Color Picker & Converter
Pick a colour, copy it as HEX, RGB or HSL, and check the contrast for accessible text. Everything runs locally in your browser.
New to this? Read the Color Converter guide →
- RGB
- —
- HSL
- —
Contrast checker
Ratio: —
- Normal text (AA): —
- Large text (AA): —
- Normal text (AAA): —
Pick a colour to see its values and contrast.
How to use the colour converter
- Enter a colour in any format (hex, RGB or HSL) or pick one from the swatch.
- The matching values in the other formats appear alongside it.
- Copy whichever notation your CSS or design tool needs.
Hex, RGB and HSL
These are three ways of writing the same colour. Hex (#7c3aed) is RGB in base 16, two digits each for red, green and blue. RGB (rgb(124 58 237)) writes those same channels as numbers from 0 to 255. HSL (hsl(258 83% 58%)) describes the colour as hue, saturation and lightness.
Which to use when
Hex and RGB are interchangeable and most common in stylesheets. HSL is the one to reach for when you want to adjust a colour by hand: nudge the lightness for a hover state, or keep the hue and change saturation for a muted variant. An alpha channel (rgb(124 58 237 / 50%)) adds transparency to any of them.
Common uses
- Turning a hex from a design file into RGB or HSL for CSS.
- Building lighter and darker shades of a brand colour from one base.
- Checking that a value matches across a stylesheet, a component and a design token.
Building a multi-colour background? Try the gradient generator.
Where you'd use this
Translating a colour between the formats different tools insist on — hex in a style guide, rgb() in a canvas call, hsl() when you need a lighter variant of the same hue.
For example: A brand purple is specified as #7c3aed and you need a hover state. Converting to hsl(258 83% 58%) lets you drop the lightness to 48% for a darker shade that keeps the exact hue.
Frequently asked questions
Which colour formats can it convert?
It converts between HEX, RGB(A), HSL and other common CSS colour notations, so you can copy whichever format your stylesheet or design tool needs.
How do I pick a colour?
Use the colour picker or type a value in any supported format; the equivalent values in every other format update instantly.
Is anything uploaded?
No. Colour conversion runs locally in your browser.