Free · No sign-up · Runs in your browser

HEX, RGB & HSL Color Converter

Convert colours between HEX, RGB and HSL instantly, and check whether text on that colour is readable.

White text 3.82:1 · AA largeBlack text 5.49:1 · AA
  • HEX#FF1654
  • RGBrgb(255, 22, 84)
  • HSLhsl(344, 100%, 54%)
How it works

How to use the Color Converter

  1. 1

    Type or paste a colour in HEX, RGB or HSL — or pick one with the colour picker.

  2. 2

    All three formats update instantly; copy the one you need.

  3. 3

    Check the contrast scores to see whether white or black text is readable on it.

FAQ

Frequently asked questions

What is the difference between HEX, RGB and HSL?

They describe the same colour in different ways. HEX (#FF1654) and RGB (rgb(255, 22, 84)) mix red, green and blue light; HSL describes hue, saturation and lightness, which is easier to adjust by hand.

What contrast ratio do I need?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA asks for 7:1.

Which format should I use in CSS?

All three work in every modern browser. HEX is the most common; HSL is handy for building lighter and darker shades of one colour.

Keep going

More free tools

CSS Gradient GeneratorDesign linear and radial gradients and copy the CSS.Open tool Box Shadow GeneratorBuild CSS box-shadows visually with a live preview.Open tool AI Visibility CheckerSee if ChatGPT, Gemini, Perplexity & Google AI can find, read and quote your page — with fixes.Open tool

See all tools →