Color Picker and Converter

Start from a swatch or from a value you already have; the two controls stay in step.

1. Click Pick a colour to open your browser colour chooser, or type into Or type any CSS colour. Accepted forms include #4f46e5, rgb(79, 70, 229), hsl(243, 75%, 59%) and names such as rebeccapurple.
2. Read the large swatch and the Values panel: HEX with the nearest CSS colour name, then RGB, HSL, HSV / HSB, CMYK, Decimal, Complementary, Contrast on white, Contrast on black and a closing row that recommends white or black text.
3. Use Tints and shades. Four darker steps, the original marked with a dot, four lighter steps and a comp button for the complement. Click any button to copy its hex code.
4. Press Copy all values to put the whole list on the clipboard.

Text the browser cannot parse shows a note asking for a valid CSS colour. Transparency is ignored, so rgba(79, 70, 229, 0.5) reports the solid colour. Everything is arithmetic done in the page, so nothing is uploaded.

Common jobs include turning a hex code from a design file into an rgb() value for a stylesheet, finding an hsl() value from which to build hover and disabled states, checking whether white or black text suits a button colour, and getting the single decimal integer that some game and graphics tools expect.

The example #4f46e5 shows how the models relate.

The Decimal row, 5195493, is the same colour as a single integer, and the nearest named CSS colour is royalblue. In HSL, lowering the lightness gives a shade and raising it gives a tint, which is why that model is easiest for hand adjustment. HSV differs because 100% value is the pure colour, not white. CMYK uses a simple formula with no press or paper profile, so give a printer the HEX or RGB value instead. Values are rounded for display, so converting back by hand can be out by one. When a stylesheet is ready, the CSS formatter tidies it, and the number base converter shows how hex pairs map to decimal.

Contrast compares the relative luminance of two colours on a scale from 1:1 to 21:1. The WCAG minimums for text are:

• AA: 4.5:1 for normal text and 3:1 for large text (about 24px regular or 19px bold).
• AAA: 7:1 for normal text and 4.5:1 for large text.
• Non-text parts such as icons and input borders need 3:1 against neighbouring colours.

For the example, the tool reports 6.29:1 on white, labelled AA, and 3.34:1 on black, labelled AA large text only. So white text is the readable choice, which is what the closing row of the panel recommends. The label is judged for normal-size text: AAA, AA, AA large text only, or fails. Two limits follow. Contrast is only measured against pure white and pure black, never against another colour you choose, so a grey background needs a separate check. Judging a design also means testing real sizes, weights and states, not one ratio. The complementary colour is the hue rotated 180 degrees with saturation and lightness kept, here #DCE546, which is a starting point for accents and charts rather than a finished palette. Colours for a favicon can be prepared with the favicon generator.

Shorthand such as #fff and names such as teal are expanded by the browser before conversion. Each tint or shade step moves the HSL lightness 20, 40, 60 or 80 percent of the way towards white or towards black, while hue and saturation stay put.