Color and design tools

Convert color formats, generate palettes, gradients and check WCAG contrast with an instant preview.

Tools in this category

HEX, RGB and HSL are different ways of writing the same color, not different colors -- but converting between them involves rounding, and that has practical consequences. This guide explains what actually changes when you convert a color and when to use each representation.

HEX, RGB and HSL

HEX (#RRGGBB) encodes the three color channels (red, green, blue) in hexadecimal; RGB expresses those same three channels as numbers from 0 to 255; HSL describes color by hue (the tone on the color wheel, 0-360°), saturation and lightness, a more intuitive format for lightening, darkening or desaturating a color in CSS. They're three representations of the same underlying color model, not independent color spaces: converting between them doesn't change which color it is, only how it's written.

Conversion, rounding and equivalence

The HEX supported here is 3 or 6 digits (#RGB or #RRGGBB); there's no support for 8-digit HEX with a transparency channel. Converting HEX to HSL and back to HEX doesn't always return the exact same code: hue, saturation and lightness are rounded to whole numbers when displayed, and that intermediate rounding can shift the final HEX compared to the original -- that's not a bug, it's a consequence of showing rounded values at an intermediate step; the shift isn't capped at one unit per channel, so it's worth checking the result rather than assuming it's always minimal. When converting RGB to HEX, each channel is also rounded before converting it to hexadecimal.

Transparency

None of this category's conversion tools support an alpha (transparency) channel in the input or output HEX: if you need to work with transparency, you'll have to add the alpha value separately when using the result in CSS (for example with rgba(), or the 4th/8th digit of a 4- or 8-character HEX, which this tool doesn't generate).

Choosing a format by use case

HEX is compact and common in graphic design and code; RGB is useful when you need to work with the three numeric channels separately; HSL is the most practical when you want to manually adjust a color -- raise lightness to lighten it, lower saturation to desaturate it -- because those adjustments map directly onto one of its three values, which isn't as direct in HEX or RGB. The color picker lets you pick a color visually and instantly get its value in all three formats.

Online color picker

Contrast, palettes and editing

The contrast checker computes the contrast ratio between two colors using the WCAG 2.x relative-luminance formula, and compares it against the standard WCAG thresholds (AA normal text from 4.5:1, AA large text from 3:1, AAA normal text from 7:1, AAA large text from 4.5:1). Two colors "looking different" isn't the same as clearing these thresholds: two colors can be visually distinct and still fall short of sufficient contrast for accessibility, which is why this tool computes a numeric ratio instead of relying on a visual impression. The palette generator creates harmonious colors by rotating the base color's hue in equal steps, keeping the same saturation and lightness -- it produces a palette related in color, it doesn't check whether those colors have enough contrast against each other for text and background: the separate contrast checker handles that. The CSS gradient, box-shadow and border-radius generators don't convert colors: they build CSS code directly from the values you choose (colors, angle, blur, radius), with a live preview.

Check color contrast (WCAG)

Color palette generator

CSS gradient generator

CSS box-shadow generator

Rounded corners generator

Privacy and limits

All 10 tools in this category compute in your browser: no color, palette or contrast value is sent to a server. Keep the rounding in mind when chaining several conversions (for example HEX to HSL and back to HEX), and remember these tools' HEX handling has no alpha channel.

Frequently asked questions

Are HEX, RGB and HSL different colors?

No. They're three different ways of writing the same color. Converting between them doesn't change the color, only its representation.

Does converting HEX to HSL and back to HEX always give the exact same code?

Not always. Hue, saturation and lightness are rounded to whole numbers when displayed, and that rounding can shift the resulting HEX compared to the original by an amount that varies by color, not always limited to one unit per channel.

Do these tools support a HEX with a transparency channel (8 digits)?

No. They only support 3- or 6-digit HEX, with no alpha channel; transparency needs to be added separately when you use the result in CSS.

Does two colors looking different mean they have enough contrast for accessibility?

Not necessarily. The contrast checker computes a numeric ratio using the WCAG formula and compares it against specific thresholds; a perceptible visual difference doesn't guarantee clearing those thresholds.

Does the palette generator check that the generated colors have good contrast with each other?

No. It generates harmonious colors by rotating the base color's hue, without evaluating contrast or readability; the separate contrast checker exists for that.

Do the gradient, box-shadow and border-radius generators convert colors?

No. They build CSS code from the values you choose (colors, angle, blur, radius); they don't perform any color format conversion.