Free Online Tool

Free CSS & Color Tools

Pick colors, build gradients, check contrast, and generate shadow & radius CSS — all in one place. Nothing gets uploaded, everything updates live as you type.

Click the swatch to pick a color

HEX

RGB

HSL

Type into any field — HEX, RGB or HSL — and the other two update automatically, along with the swatch.

What you can do with these CSS and color tools

Color Converter — type a color as HEX, RGB or HSL and the other two update at once. Handy when a design gives you one and your code needs another.
Gradient — pick your colors, choose Linear or Radial, set the angle, then press Copy CSS.
Contrast Checker — pick a text and a background color to see whether people with weak eyesight can read it (WCAG AA and AAA).
Shadow & Radius — slide the offset, blur and spread to build a box-shadow, and round the corners with border-radius. Copy the CSS when it looks right.

Color words explained

HEX — a color written as # followed by six letters or numbers, like #2563EB.
RGB — the same color as three numbers for red, green and blue.
HSL — hue, saturation and lightness. It is easier to adjust by hand, for example to make a color lighter.
WCAG contrast — a rule for how different text and background must be so text stays readable. AA is the level most websites aim for, AAA is stricter.

Good to know before you start

Colours are fully opaque: there is no transparency (alpha) and no 8-digit hex codes.
HSL values are rounded to whole numbers, so converting back can differ by 1 in a colour channel.
Contrast pass or fail uses the exact colours; the ratio shown is rounded to two decimals, so 4.496 shows as 4.50:1 but does not pass 4.5.
Gradients take up to 6 colours, evenly spaced, as a linear angle or a circular radial.