Pick a colour and get HEX, RGB and HSL values with contrast checking.
HEX, RGB or HSL — all notations are accepted.
#4f46e5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
Against black
3.34:1
Against white
6.29:1
Brand indigo
A saturated mid-tone
#4f46e5RGB notation
Any notation is accepted
rgb(255, 136, 0)HSL with alpha
Transparency is preserved
hsla(200, 90%, 45%, 0.6)Brand indigo
A saturated mid-tone
#4f46e5RGB notation
Any notation is accepted
rgb(255, 136, 0)HSL with alpha
Transparency is preserved
hsla(200, 90%, 45%, 0.6)Use the native picker, or type a value in HEX, RGB or HSL. All formats update together.
Ratios against black and white are shown with their WCAG pass or fail grades, so you can tell immediately whether text will be legible.
Copy any format with one click, or take a tint or shade from the generated scale.
Contrast ratios and WCAG grades are shown alongside the colour, so readability is a decision you make rather than one you discover later.
HEX, RGB and HSL update together, so you can work in whichever your stylesheet or design tool prefers.
A full lightness scale is derived from your colour, which is usually the fastest route from one brand colour to a working palette.
Choose a colour visually or paste one in any notation, and get every format you might need side by side. The tool also computes the WCAG contrast ratio against black and white and tells you which passes at AA and AAA, which is the part most colour pickers leave out and the part that determines whether text on that colour is actually readable. Tints and shades are generated automatically so you can build a usable scale from a single brand colour.
Keep going
Related pages in Developer Tools, plus what others are using right now.
More developer tools that pair well with this one.
Convert HEX colour codes to RGB and HSL, including alpha values.
Convert RGB and RGBA colour values into HEX codes.
Create linear and radial CSS gradients visually and copy the code.
Build CSS box shadows visually and copy the generated code.
Format, validate and minify JSON, with errors that point to the exact line.
Test regular expressions live, with highlighted matches and capture groups.
Create strong random passwords with full control over length and characters.
Work out any percentage — of a number, as a share, or as a change.
Count words, characters, sentences and paragraphs as you type.
Convert between length, weight, temperature, volume, speed, data and more.
Count characters with and without spaces, against the limits that matter.
Find the mean, median, mode and range of a list of numbers, with the working shown.
Sample and population standard deviation and variance, both shown, with the working.
Turn a logo into favicon.ico, the PNG sizes a site needs, and the HTML to declare them.
Check a downloaded file against its published checksum, without uploading anything.
Stamp text like DRAFT or CONFIDENTIAL across a PDF, in your browser.
See how savings grow with compounding, including regular contributions.
Shrink JPEG, PNG and WebP files with a quality slider and a live size comparison.