A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)-CSS Tutorial-php.cn

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

青灯夜游

Oct 17, 2018 am 10:57 AM

css

How to use hsl() and hsla() to set color values in css? This article will briefly talk about how to set color values in css using hsl() and hsla(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are two ways to set color values in css: hsl() and hsla(). They basically use the HSL color mode method to set colors. So let’s take a look at what HSL color mode.

HSL color mode is a color standard in the industry. It changes the three color channels of hue (H), saturation (S), and brightness (L) and superimposes them on each other. to get a wide variety of colors. The HSL color standard includes almost all colors that can be perceived by human vision and is one of the most widely used color systems currently.

HSL represents the color of the three channels of hue, saturation, and brightness

And HSLA adds a transparency (A) setting on the basis of HSL.

Now that we know what the HSL color mode is, let’s take a look at how to use hsl() and hsla() in css to set color values.

Basic syntax of hsl() and color value

hsl() in css:

hsl(H,S,L);

H (Hue: Hue): Derived from color Disk, where 0 and 360 are red, close to 120 is green, and 240 is blue;

S (saturation: Saturation): the value is a percentage, 0% represents grayscale, and 100% represents the highest Saturation;

L (brightness: Lightness): The value is also a percentage, where 0% represents the darkest, 50% represents the average, and 100% represents the brightest.

We can use a simple code example to see how hsl() sets the color value:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hsl()和颜色</title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslL1 { background:hsl(320, 100%, 50%); height:40px; }      
			.hslL2 { background:hsl(320, 50%, 50%); height:40px; }      
			.hslL3 { background:hsl(320, 100%, 75%); height:40px; }      
			.hslL4 { background:hsl(202, 100%, 50%); height:40px; }      
			.hslL5 { background:hsl(202, 50%, 50%); height:40px; }      
			.hslL6 { background:hsl(202, 100%, 75%); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslL1"></div>
			<div class="hslL2"></div>
			<div class="hslL3"></div>
			<div class="hslL4"></div>
			<div class="hslL5"></div>
			<div class="hslL6"></div>
		</div>
	</body>
</html>

Rendering:

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

It can be seen that they have the same hue, but the saturation or brightness is changed, and it becomes another color

background:hsl(320, 100%, 50%); 
background:hsl(320, 50%, 50%);     
background:hsl(320, 100%, 75%);

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

background:hsl(202, 100%, 50%); 
background:hsl(202, 50%, 50%);
background:hsl(202, 100%, 75%);

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

The basic syntax of hsla() and color value

hsla() in

##css:

hsla(H,S,L,A);

H, S, L of hsla() are the same as hsl(), they are It represents hue, saturation, and brightness, and the basic settings are the same, so I won’t introduce them here. Let’s take a look at the A attribute value of hsla():

A (transparency: Alpha): The value is a number between 0 and 1, where 0 represents opaque and 1 represents completely transparent.

Let’s take a look at how hsla() sets the color value through a simple code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      
			.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      
			.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      
			.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      
			.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslaL1"></div>
			<div class="hslaL2"></div>
			<div class="hslaL3"></div>
			<div class="hslaL4"></div>
			<div class="hslaL5"></div>
			<div class="hslaL6"></div>
		</div>
	</body>
</html>

Rendering:

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

From the above example, we can see that the hue, saturation, and brightness of these six colors are the same, but different colors are displayed by changing the transparency.

background:hsla(165, 35%, 50%, 0.2); 
background:hsla(165, 35%, 50%, 0.4);
background:hsla(165, 35%, 50%, 0.6); 
background:hsla(165, 35%, 50%, 0.8); 
background:hsla(165, 35%, 50%, 1.0);

Let’s take a look at the browser compatibility of hsl() and hsla():

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

Currently hsl() and hsla() are available in Firefox, Browsers such as Google Chrome and Safari have good support and can be used without any prefix.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial

! ###

The above is the detailed content of A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a FallbackApr 16, 2025 am 11:06 AM

You might be seeing the term JAMstack popping up more and more frequently. I’ve been a fan of it as an approach for some time.

CSS-Tricks Chronicle XXXVIApr 16, 2025 am 10:58 AM

This is one of these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family.

Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled ExchangesApr 16, 2025 am 10:46 AM

In this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new

Meeting GraphQL at a Cocktail MixerApr 16, 2025 am 10:43 AM

GraphQL and REST are two specifications used when building APIs for websites to use. REST defines a series of unique identifiers (URLs) that applications use

Introducing Sass ModulesApr 16, 2025 am 10:42 AM

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used

How I Learned to Stop Worrying and Love Git HooksApr 16, 2025 am 10:41 AM

The merits of Git as a version control system are difficult to contest, but while Git will do a superb job in keeping track of the commits you and your

A Proof of Concept for Making Sass FasterApr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

Demonstrating Reusable React Components in a FormApr 16, 2025 am 10:36 AM

Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Visual web development tools

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 English version

Recommended: Win version, supports code prompts!

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),