Color Picker

1. Pick a colour with the visual selector or type a value in any of the formats.
2. All four formats appear at once: HEX, RGB, HSL and oklch.
3. Copy whichever format your project uses.

HEX and RGB describe the same thing in different ways: the intensity of red, green and blue. They are direct for machines and unintuitive for building a palette — you cannot look at two HEX values and tell which is lighter.

HSL separates hue, saturation and lightness. That makes variations predictable: the same hue at different lightness gives you a tonal scale.

oklch does the same, but in a perceptually uniform space. That is the difference that matters in practice.

In HSL, 50% lightness does not mean the same apparent brightness across colours. A yellow at 50% looks far lighter than a blue at 50%, because the human eye is more sensitive to green and yellow.

The practical consequence is well known: a palette built by varying HSL lightness comes out visually uneven, and gradients pass through greyish zones in the middle.

oklch fixes this because it is built on a model of human perception. Equal lightness in oklch means equal apparent brightness regardless of hue. Palettes stay consistent and gradients stay clean without manual tweaking.

That is why oklch entered the CSS specifications and is being adopted in design systems.

No format guarantees legibility on its own. Text needs sufficient contrast against its background, and that is measured by contrast ratio, not by the difference between colour values.

The usual reference requires a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.

A frequent pitfall: a beautiful brand colour can be illegible as text. In that case it works better as a background, a border or a graphic element than as reading colour.

1. Enter the colour in HEX or in RGB. Conversion is two-way and immediate.
2. The hash sign is optional on HEX input.
3. Accepted formats: three-digit #RGB, four-digit #RGBA, six-digit #RRGGBB and eight-digit #RRGGBBAA with alpha.

They are the same information in different notations. Each channel — red, green and blue — runs from 0 to 255, which fits exactly into two hexadecimal digits.

That is why #FF0000 and rgb(255, 0, 0) are identical: FF in hexadecimal is 255 in decimal.

The three-digit short form is an abbreviation where each digit is doubled. #F00 becomes #FF0000, and #ABC becomes #AABBCC. It can only represent colours where both digits of each channel match — 4,096 combinations against the 16.7 million of the full form.

Two extra digits at the end of a HEX value represent opacity, also from 0 to 255. #FF000080 is red at roughly 50% opacity.

In RGB, alpha is expressed from 0 to 1 in the rgba() notation. Converting between the two scales divides by 255, so not every value maps exactly — 0.5 becomes 128, which converts back to a rounded 0.5.

The four-digit short form follows the same doubling rule: #F008 equals #FF000088.

• HEX is more compact and remains the dominant format in stylesheets and design tools.
• RGB lets you manipulate channels through CSS variables, useful for generating opacity variants from one base colour.
• HSL is more intuitive for building a palette, because it separates hue, saturation and lightness.
• oklch is the newest and works in a perceptually uniform space, which makes gradients and lightness variations look more natural to the eye.