In-depth knowledge of Web colour format

The developer's troubles

Why do some colours in CSS indicate in HEX that some are RGB and some are useful? HSL？ What is the difference between them?

Format Selection

HEX is the most concise, suitable for fixed colours; RGB visualization of hardware luminescence; HSL It is best suited to human instincts and is highly appropriate for dynamically adjusted brightness or saturation.

Main colour format comparison

HEX (#RRGGBB) : Hexadecimal format is Web The most commonly used format is being developed. It converts the values of the three channels, red, green and blue, to two hexadecimals. The advantage is that the character is fixed in length and very concise.
RGB (rgb(r, g, b)) : Based on three original colours. Each parameter defines the strength of the colour, with a value of 0 to 255。 This approach is fully consistent with the principles of the computer monitor.
HSL (hsl(h, s, l)) : Representation of Hue, Saturation and Lightness. It's the most popular format of the current front-end developers, because it just needs to change. The L value allows the colour to darken or light up, and is very suitable for the Hover effect of making buttons.

Why HSL is better?

Imagine you have a brand, and now you need to create a slightly light background for it. If used HEX, YOU MAY NEED TO GO TO THE PYPICAL REHOSE; But if you use HSL, you just have to increase Lightness by 10%. - Yeah. This semantic adjustment makes HSL do a great job in building modern CSS variable systems.

Functional characteristics of this tool

This colour converter supports all formats Sync in Real Time 。 Whether you're dragging, RGB. Slider, select in the colour picker, or manually enter the hexadecimal code, and all other formats are updated instantaneously. In addition, we automatically adjust the colours (black or white) of the preview text to the brightness of the current background colour to ensure optimal readability.