Colours and gradients

HEX, RGB, HSL, OKLCH, contrast and gradients

No database: AIMRAN doesn't store your files, text or results

What is Colours and gradients?

Pick or paste a color and you'll see its code in every format web designers and developers use: HEX, RGB, HSL, HWB and OKLCH. It also generates a range of lighter and darker shades of the same color.

It also checks whether text in that color is readable on a background according to accessibility standards, and helps you create CSS gradients ready to copy.

How to use it

  1. Enter a color in any format (#0071e3, rgb(…), hsl(…), oklch(…) or a CSS name) or use the picker.
  2. Copy the format you need under “Formats”.
  3. Choose a background color under “WCAG contrast” to see whether it passes AA and AAA.
  4. Click a shade to use it as the main color.
  5. Under “CSS gradient”, choose linear, radial or conic, adjust the angle and stops and copy the CSS.

Advantages

Technical details

It accepts 3, 4, 6 or 8-digit HEX, rgb()/rgba(), hsl()/hsla(), hwb(), oklch() and CSS color names, with an alpha channel. HSL and HWB conversions are those of CSS Color Module Level 4; OKLCH is calculated from linear sRGB via Björn Ottosson's Oklab space. Contrast follows WCAG 2.x: relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B on linearized components and ratio (L1 + 0.05) / (L2 + 0.05); 4.5:1 is required for AA normal text, 3:1 for AA large text, 7:1 for AAA normal and 4.5:1 for AAA large. Semi-transparent colors are composited over the background before measuring. Shades are obtained by mixing with white and black in 15% steps. Gradients produce linear-gradient, radial-gradient or conic-gradient with editable stops and positions.

Frequently asked questions

How do I convert a HEX color to RGB?

Paste the HEX code and the tool instantly shows its RGB, HSL, HWB and OKLCH equivalents. For example, #0071e3 is rgb(0, 113, 227).

What minimum contrast does web accessibility require?

WCAG requires a 4.5:1 ratio between text and background for level AA with normal text and 3:1 with large text. Level AAA requires 7:1 and 4.5:1.

What is OKLCH?

A modern CSS color format based on perceived lightness, chroma and hue. It makes consistent palettes easier because changing lightness doesn't shift the visible hue.

How do I make a gradient in CSS?

Under “CSS gradient”, choose the type, the angle and the color of each stop, then copy the generated background property.

What's the difference between HSL and HEX?

Both describe the same color. HEX expresses it in hexadecimal as red, green and blue; HSL uses hue, saturation and lightness, which is more intuitive to adjust.

More Developers tools