🎨 Color Converter

Three ways to describe the same colour

HEX is six hexadecimal digits — two each for red, green, and blue, from 00 to FF. It is the standard notation in CSS and design tools, and it is simply RGB written compactly.

RGB gives the same three channels as decimal values from 0 to 255. It is easier to manipulate arithmetically, and it extends naturally to RGBA when transparency is needed.

HSL describes hue as an angle on the colour wheel, with saturation and lightness as percentages. It is far more intuitive for design work: to make a colour lighter you change one number, whereas in RGB you have to adjust all three in the right proportion.

Contrast is what makes text readable

The Web Content Accessibility Guidelines define a contrast ratio between text and background, running from 1:1 for identical colours to 21:1 for pure black on pure white.

• 4.5:1 — minimum for normal body text (AA)
• 3:1 — minimum for large text, 18pt or 14pt bold (AA)
• 7:1 — enhanced standard for body text (AAA)

Light grey text on a white background is the single most common accessibility failure on the web. It looks refined on a bright, high-quality monitor and becomes unreadable on a phone in sunlight or to anyone with reduced contrast sensitivity — which includes most people over sixty.

Building a palette that holds together

Start from one hue and vary lightness to produce a scale. Because HSL separates hue from lightness, you can generate a coherent set of tints and shades by holding hue and saturation constant and stepping lightness.

For accent colours, hues roughly 30 degrees apart read as related, 120 degrees apart as clearly distinct, and 180 degrees apart as complementary. Avoid relying on red and green alone to convey meaning: around one in twelve men has some form of colour vision deficiency, and red-green is by far the most common. Pair colour with shape, position, or a label so the information survives without it.

Common questions

Why does the same hex look different on two screens?

Displays vary in colour gamut and calibration. A wide-gamut screen renders saturated colours more intensely than an sRGB panel. For anything print-bound, work in a colour-managed application.

Should I use hex or HSL in CSS?

Both are valid. HSL is easier to reason about when generating variations programmatically, which is why CSS custom properties are often defined in HSL and adjusted by channel.

What is the fourth value in an eight-digit hex?

Alpha — the opacity channel. FF is fully opaque, 00 fully transparent, 80 roughly fifty percent.