Is hex or HSL better for CSS?

Neither is better as output: browsers treat them identically. HSL is better as a source of truth, because a designer changing "the brand colour, ten percent lighter" can express that directly, while the same change in hex means recomputing three channels by hand.

What contrast ratio do I actually need?

WCAG AA requires 4.5:1 for normal text and 3:1 for text at 18pt or 14pt bold. AAA raises those to 7:1 and 4.5:1. Interface elements such as icons and input borders need 3:1 against their background to meet AA, which is the rule most often missed.

Why does my gradient look muddy in the middle?

Because it is being interpolated in sRGB, where the midpoint between two saturated colours passes through a desaturated grey. Interpolating in a perceptual space such as OKLCH keeps the middle as vivid as the ends, and CSS now lets you ask for that explicitly.

4 tools · runs in your browser

Color & CSS

Convert colour formats, build gradients and check contrast before shipping a palette.

Most used

Color ConverterConvert colors between HEX, RGB and HSL formats
Gradient GeneratorBuild CSS linear and radial gradients visually and copy the CSS code
Palette GeneratorGenerate harmonious color palettes from a seed color with multiple harmony rules
Contrast CheckerCheck WCAG AA/AAA contrast ratio between text and background colors

Files never leave your device
No sign-up
Free, no watermarks

All Color & CSS tools

Grouped by what you want to get done. Star a tool to find it again on the homepage.

Colour values · Convert formats, build palettes and check contrast.

Color Converter

Convert colors between HEX, RGB and HSL formats

Palette Generator

Generate harmonious color palettes from a seed color with multiple harmony rules

Contrast Checker

Check WCAG AA/AAA contrast ratio between text and background colors

CSS gradients · Linear and radial gradients, with copyable CSS.

Gradient Generator

Build CSS linear and radial gradients visually and copy the CSS code

Often used alongside these, from other categories.

About these Color & CSS tools

Colour on the web is several different models wearing the same clothes. Hex, RGB, HSL and OKLCH all describe the same pixel, but they make different operations easy: HSL makes "slightly lighter" obvious, hex makes nothing obvious but is what design tools hand you. Converting between them is exact arithmetic, which is why it belongs in the browser, next to the page you are styling.

Choosing between these Color & CSS tools

Pick the model that matches the change you want

Adjusting lightness or saturation is trivial in HSL and awkward in hex. Building a palette where every step looks equally different needs a perceptual model such as OKLCH, because equal numeric steps in HSL are not equal steps to the eye.

Contrast is a requirement, not a preference

WCAG asks for a 4.5:1 ratio for body text and 3:1 for large text. The ratio depends on relative luminance, not on how different two colours look side by side, which is why a mid-grey on white can fail while a colour pairing that looks bolder passes.

Check both themes before committing

A palette tuned on a light background frequently fails on a dark one, because contrast is not symmetric: inverting a design does not preserve its ratios. Every colour that carries meaning needs a value defined for each theme.

Questions people ask

Is hex or HSL better for CSS?: Neither is better as output: browsers treat them identically. HSL is better as a source of truth, because a designer changing "the brand colour, ten percent lighter" can express that directly, while the same change in hex means recomputing three channels by hand.
What contrast ratio do I actually need?: WCAG AA requires 4.5:1 for normal text and 3:1 for text at 18pt or 14pt bold. AAA raises those to 7:1 and 4.5:1. Interface elements such as icons and input borders need 3:1 against their background to meet AA, which is the rule most often missed.
Why does my gradient look muddy in the middle?: Because it is being interpolated in sRGB, where the midpoint between two saturated colours passes through a desaturated grey. Interpolating in a perceptual space such as OKLCH keeps the middle as vivid as the ends, and CSS now lets you ask for that explicitly.

Guides on this topic

Gradients and palettes: why yours goes grey in the middleBlend blue into yellow and you get a muddy grey halfway. That is not your eye, it is the colour space doing arithmetic that does not match perception.Colour contrast: what the WCAG numbers mean and how to hit themLow-contrast text is the most common accessibility failure on the web, and one of the easiest to fix, once you know which number you are aiming at and why.