Color Converters
Convert between color formats — 1 free tool in our Converters category.
The tool
Colour on the web is written several ways that describe the same pixel. Which notation you choose matters less for the output than for how easy the colour is to reason about and adjust.
The formats and what each is good at
HEX (#FF5733) is compact and the most common in design handoff, but it is opaque to manipulation — you cannot tell by looking whether one hex value is lighter than another.
RGB exposes the three channels directly, which maps onto how displays emit light. Useful for programmatic blending, still unintuitive for design decisions.
HSL separates hue, saturation and lightness, which is why it is the format to reach for when building a palette. Holding hue constant and varying lightness produces a coherent set of tints and shades in a way that editing hex digits never will.
Modern CSS also supports oklch(), which is perceptually uniform: equal numeric steps in lightness look like equal steps to the eye. HSL does not have that property, so an HSL ramp often appears to jump in brightness around the yellows and cyans.
Two things worth checking beyond conversion
Contrast. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. That is a computed ratio of relative luminance, not something you can judge from lightness values alone, so verify it with a contrast checker rather than assuming.
Dark mode. Do not simply invert your palette. Pure white text on pure black is uncomfortably harsh; reducing saturation and pulling both ends away from the extremes reads far better.
Frequently Asked Questions
Why does the same hex colour look different on two screens?▼
Because a hex value specifies numbers, not an appearance. The rendered colour depends on the display's gamut, calibration and colour profile. For colour-critical work you need a calibrated display and a defined colour space rather than trusting a hex code.
What do the 4 and 8 digit hex formats mean?▼
They add an alpha channel. `#RRGGBBAA` is the eight-digit form and `#RGBA` its shorthand, where the final component is opacity — `#FF573380` is roughly 50 percent opaque. Support is broad in current browsers.
Is HSL good enough for generating a colour scale?▼
It is workable and widely used, but its lightness is not perceptually uniform, so equal steps do not look equal. If you need a ramp that reads evenly across hues, `oklch()` gives noticeably better results.