Color Converter

All three notations address the same sRGB colour space; they differ in what is easy to change. HEX is a compact way of writing three 0-255 channel values in base 16, so #FF6B35 is simply red 255, green 107, blue 53. RGB writes those numbers in decimal, which is easier to read and lets you attach an alpha channel with rgba(). Neither tells you anything useful about the colour by looking at it.

HSL is the one built for humans. It splits colour into hue (0-360 degrees around a colour wheel), saturation (0-100 percent, grey to vivid), and lightness (0-100 percent, black to white). That separation is why HSL is the right notation for building a palette: keep the hue fixed and vary lightness to generate a consistent tint and shade ramp for a design system, or rotate the hue by 180 degrees for a complementary accent. Doing the same in HEX means guessing.

A colour pair that looks fine to a designer on a bright monitor can be unreadable to a user with low vision or on a phone in sunlight. WCAG 2.1 sets measurable minimums: body text needs a contrast ratio of at least 4.5:1 against its background, and large text (18pt, or 14pt bold) needs 3:1. Interface components and meaningful graphics also need 3:1. The AAA level raises body text to 7:1.

Contrast is calculated from relative luminance, not from how different two hues look, which produces some counter-intuitive results. Mid-grey text on white fails easily. Two strongly different hues at the same lightness, such as a saturated red on a saturated green, can have almost no contrast at all while looking loud, and are exactly the pairing that disappears for the roughly 8 percent of men with red-green colour vision deficiency. Never carry meaning in hue alone; pair it with a label, an icon, or a pattern.

Keep colours in one place. Define each brand colour once as a CSS custom property on :root and reference the variable everywhere else. When a colour changes, you edit one line rather than hunting hex codes through a stylesheet, and a dark theme becomes a matter of redefining the same variable names inside a media query.

Some format-specific notes. HEX with an alpha channel is written as eight digits (#FF6B3580) and is supported in every current browser, though older tooling may not parse it. CSS named colours such as tomato and rebeccapurple are exact sRGB values, not approximations, and are fine to use. Print work needs CMYK, which has a smaller gamut than sRGB, so vivid screen colours will shift when converted and should be checked against a proof rather than trusted from a converter. Newer CSS colour spaces like oklch() give more perceptually even lightness ramps than HSL and are worth adopting for palette generation.