CSS color setting method: simple comparison of HEX, RGB, and HSL

In CSS, there are many ways to represent color values, such as color name, hexadecimal color, RGB(), HEX(), HSL(), etc. So do you know the difference between HEX, RGB and HSL? The following article will give you a brief comparison of HEX, RGB, and HSL to see their differences.

I wonder if you know the difference between HEX, RGB and HSL, and the various advantages of any one of them?

---

Before we delve into this issue, let’s briefly understand what each color method means.

Definition of color methods

Hex Color values ​​are one of the most popular methods of setting CSS color properties, especially among developers . Almost all browsers support it.

We can define purple in a hexadecimal color code as follows:

800080

The format of the color here is #RRGGBB, where RR (red), GG (green) and BB (blue) are between 00 and FF The hexadecimal integer represents the color intensity.

The difference between HEX and RGB

RGB or Red/Green/Blue (i.e. red/green/blue) Also used to define colors in CSS, another popular method. The RGB color scheme is a three-channel format in which the values ​​of r, g, and b are integers between 0 and 255. Here are examples of RGB colors:

rgb(128, 0, 128)复制代码

The implementation of the above RGB color codes is consistent with the HEX colors above. You may be wondering, why do we use RGB when hexadecimal color codes are easier to remember and type?

Well, each color method has its own benefits. The beauty of RGB is that it allows you to add opacity to colors.

This is the strength of RGBA. In CSS3, an additional alpha channel was added to the RGB color scheme to indicate the opacity of the color.

Translator's Note: Actually, Hex also supports it. For example, 50% black is #00000088, the last two digits are hexadecimal transparency, and the range is also 00 to FF.

Newcomer, HSL!

HSL stands for Hue, Saturation, and Lightness and is another way to declare colors in CSS. The HSL color value for purple can be specified as follows:

hsl(300, 100%, 25.1%)

As you can see, the first parameter is used to define the hue, which is the value of the actual solid color, such as red, yellow, green, blue, magenta, etc. . Hue is a color wheel that takes values ​​from 0 to 360 degrees. Here 0 and 360 degrees represent red, 120 degrees represent green, and 240 degrees represent blue.

Unlike RGB, in HSL both the saturation and brightness of colors can be changed.

These colors can be dull or bright. The less color there is, the more shades of gray it becomes. Saturation refers to how much color is present in a mixed color. It controls how bright or dull the color is.

As you can see, as the saturation value changes from 100% to 0% along the line, the color changes from a pure tone to a dark tone.

In addition, there is a third parameter representing brightness. This thing is also a percentage value, the value range is also 0% to 100%, used to describe the proportion of black or white in the color.

This is similar to the use of watercolor in painting. If you want the color to be lighter you can add white, if you want the color to be darker you can add black. Therefore, 100% brightness represents completely white, 50% represents the actual tint color, and 0% represents pure black.

HSLA Similar to RGBA, it is an extension of HSL. The fourth channel represents the opacity of the color, not unlike RGBA and Hex-alpha. Opacity is specified as a decimal value, as in RGBA, where 1 means fully opaque, 0 means fully transparent, and all values ​​in between are partially opaque.

However, while most browsers support RGB and Hex color codes, HSL colors are primarily supported in HTML5-based browsers.

---

You may have used all or some of these color methods when setting color properties in CSS. Hex is my personal favorite, but what are the differences between them and what are the advantages of each? Without further ado, let’s find out together!

What is the best way to specify colors in CSS?

If you are used to HTML, you may be more accustomed to using Hex color values, because Hex color values ​​are heavily used in HTML. But if you studied design, you probably used RGB notation since it is the most commonly used format in most design software, such as Photoshop, Corel, and Illustrator.

My advice is that if you are a pure developer and just want to complete your project, continue to use the color method you are most familiar with.

Because the browser doesn't really care which color format you use, even if there are subtle performance changes between different methods, the performance difference is negligible.

Beyond that, if you're worried about usability, the impact of decisions on developers, etc., let's see which approach is best for your situation.

Let's start with hexadecimal notation. Hexadecimal is very attractive due to its short notation. Many developers find that compared to RGB and HSL, Hex values ​​are very easy to read and easier to copy into their favorite text editor.

RGB is well known and supported in older versions of Internet Explorer (9 and earlier).

HSL is designed to be easier for humans to understand!

Formats such as RGB and Hex are more machine readable than human readable. Instead, HSL is designed for better human understanding. HSL is a newer and natural way of processing color.

Unlike in Hex and RGBA where you have to pass some numbers to get the color you want, in HSL we can use Hue to define the color and use the second and third parameters percentage to Get the saturation and brightness levels you want.

If I tell you that the title of the web page needs to be #578557 or rgb(87, 133, 87), can you guess what color it is? No, unless you're a computer. But, at the same time, if I give you the color in HSL: hsl(120, 21%, 43%)? It's a little easier to guess now, right? A Hue value of 120° means it is pure green. Next, it has a saturation of 61%, indicating that it is 21% away from a dark gray (a very unsaturated green). Finally, 43% brightness means the color goes from solid to the darker side by 7%.

Okay, let's say you want the button color to be lighter on hover and darker on click. It’s amazing how easy it is to use HSL – just increase and decrease the brightness value, that’s it! ! But it's not possible to do this in HEX or RGB without the help of tools or a designer.

HSL is an intuitive color notation that mimics the real world.

For example, let’s consider a piece of light blue colored paper. The color values ​​in its three formats are:

##HexRGBHSL#ADD8E6rgb(173, 216, 230)hsl(195, 53.3%, 79%)Okay, now hold your hand a few inches from the surface. The shadow of your hand darkens the surface a little bit, right? There is no way to represent this color change using RGB or hexadecimal notation without changing the color itself. But in HSL, we just need to adjust the brightness value slightly, and then we're done! Isn't it really cool that we don't need to make any changes to the original color at all?

##HexOriginal value#4f2017#2F819D

RGB	HSL
rgb(79, 32, 23)	hsl(195, 53.3%, 79%)		New value
rgb(47, 129, 157)	hsl(195, 53.3%, 50%)		如你所见，Hex 和 RGB 值已经被改到面目全非了，而对于 HSL，只有一个值发生了变化。毫无疑问，在构建配色方案时，HSL 是最有用的。以底色为基础，根据需要调整饱和度和亮度，就是这样！有了 HSL，建立一个配色方案，简直就是小菜一碟。 最后，这一切都取决于个人喜好！ 现在你可能认为 HSL 是最好的颜色表示法。但是，正如我上面提到的，旧版本的 Internet Explorer 不支持 HSL。同样，每种颜色格式都有其优点和缺点。问题是，这并不重要。 最重要的是尽可能保持在项目中使用到的类型的一致性，因为它有助于提高生产力。 和其他两种颜色相比 Hex 有不支持透明度的限制（译者注：Hex 是支持的……） 不使用特定工具来调整 RGBA 颜色是很很困难的 旧浏览器不支持 HSLA 如果你所服务的浏览器支持 HSLA 那就忽略这条吧！你可以选择使用任何格式！ 在选择在项目中设置 CSS 颜色属性的最佳方法时，你可以考虑以下因素。 1、使用与开发团队其他成员相同的格式来提高可维护性。 2、如果你已经熟悉 RGB 格式，请使用它。 3、如果你的目标访问者使用严重过时的浏览器访问你的网站，请使用 Hex，或者使用如下后备代码： p { color: #FF0000; color: hsla(0, 100%, 50%, 1); } 4、如果以上三点还是没能让你决定使用哪一种，请使用 HSLA。HSLA 允许你像 RGBA 一样使用透明度，而且更具备可访问性。 有哪些替代方案？ 除了上面提到的方法，还有一些其他方法可以用来在 CSS 中设置颜色属性。 使用颜色名称：所有现代浏览器都支持 140 个标准 CSS 颜色名称。颜色名称是代表特定颜色的关键字，如 coral。 currentcolor 关键字：如果需要引用一个元素的颜色，可以使用这个关键字。 HWB 值： HWB 代表色相、白度、黑度。虽然目前 HTML 不支持它，但它被建议作为 CSS4 的新标准。 CMYK 值：CMYK 是青色、洋红色、黄色和黑色的组合。尽管计算机屏幕使用 RGB 值来显示颜色，但打印机通常使用 CMYK 颜色值来显示颜色。与 HWB 类似，CMYK 在 HTML 中尚不支持，不过也是被建议作为 CSS4 中的新标准。 最后 颜色在网页中起着至关重要的作用。在 CSS 中，我们能使用 RGB、Hex 和 HSL 等方法来定义颜色。在本文中，我们了解了用于在 CSS 中设置颜色属性的三种主要方法，以及它们的区别和各自的优缺点，还有可用于在 CSS 中定义颜色属性的其他替代方法。 尽管 HSLA 由于其人类可读性而比其他两种方法略有优势，但如果不是针对特定情况，则无关紧要。你可以使用任何你觉得舒服的方式。 看看不同的优缺点，每种方法都优于其他方法，总而言之，决定使用哪种方式在 CSS 中设置颜色属性应取决于以下三个因素： 偏好 可维护性 性能与效果 那么，你更喜欢用什么来设置 CSS 中的颜色？Hex、RGBA、HSLA 或其他什么？原因又是什么？在评论区告诉我吧。  英文原文地址：https://link.juejin.cn/?target=https%3A%2F%2Fblog.bitsrc.io%2Fhex-vs-rgb-vs-hsl-what-is-the-best-method-to-set-css-color-property-f45d2debeee 原文作者：Nethmi Wijesinghe 更多编程相关知识，请访问：编程视频！！

The above is the detailed content of CSS color setting method: simple comparison of HEX, RGB, and HSL. For more information, please follow other related articles on the PHP Chinese website!