Color Picker and Contrast Checker

One color, three sets of numbers

A screen pixel is three small lights, one red, one green and one blue. Every color you see is a mix of those three, and every color format is a way of writing down how much of each light to turn on. HEX, RGB and HSL all describe the same sRGB color space, so any of them can be converted into the others without losing anything.

The differences are about convenience. HEX is compact and lives in stylesheets and design files. RGB matches how the hardware works. HSL matches how people think about color, because it separates the hue from how light or dark the color is. A designer who needs a darker shade of the same blue can drop the lightness in HSL and keep the hue, which is awkward in HEX.

This page takes one color and shows it three ways, then checks the contrast against white and black text. That last number decides whether the color can carry text at all, and it is the step most palettes skip.

HEX codes in plain English

A HEX code is six hexadecimal digits in three pairs, written with a hash in front. The pairs are red, green and blue, in that order. Each pair runs from 00 to FF, which is 0 to 255 in decimal, so there are 256 levels per channel and 16,777,216 possible colors in a six digit code.

Hexadecimal is base 16, so the digits run 0 to 9 and then A to F for 10 to 15. A pair like 25 is 2 times 16 plus 5, which is 37. A pair like EB is 14 times 16 plus 11, which is 235. That is the whole conversion, and it is why #2563EB is the same as rgb(37, 99, 235).

Three digit codes are shorthand. Each digit is doubled, so #26E becomes #2266EE. That only works when both digits in a pair match, which limits the shorthand to 4,096 colors. Eight digit codes add an alpha pair at the end, so #2563EBCC is the same blue at 80% opacity.

Case does not matter. #2563eb and #2563EB are the same color, and browsers treat them as identical. Most style guides settle on uppercase for readability in long lists, and either is fine as long as the file is consistent.

RGB: the numbers your screen uses

RGB writes the three channel values directly, each from 0 to 255. Zero means the light is off and 255 means full power, so rgb(0, 0, 0) is black and rgb(255, 255, 255) is white. Mixing is additive: red plus green gives yellow, and all three at full power give white.

The range stops at 255 because each channel is stored in 8 bits, and 8 bits hold 256 values starting at zero. Modern CSS also accepts percentages, so rgb(14.5% 38.8% 92.2%) is the same color as rgb(37, 99, 235), and it accepts a fourth value for alpha: rgb(37 99 235 / 0.8).

RGB is the format to reach for when you are computing. Blending two colors, darkening by a fixed amount, or averaging a palette all work on channel values. It is the least friendly format to read, because rgb(37, 99, 235) does not tell you that the color is a medium blue until you decode it.

One quirk is worth knowing. The sRGB values are not linear light. A value of 128 is not half the brightness of 255, it is closer to a fifth, because the encoding bends the curve to match how the eye works. That is why the contrast formula has to linearize each channel before it does any math.

HSL and the color wheel

HSL stands for hue, saturation and lightness. Hue is an angle on the color wheel from 0 to 360 degrees. Saturation is how far the color sits from gray, from 0% for a pure gray to 100% for the most vivid version. Lightness runs from 0% for black through 50% for the pure hue to 100% for white.

The angle is the useful part. Red sits at 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Complementary colors sit 180 degrees apart, and a triad sits 120 degrees apart, which makes it easy to build a scheme that is not random.

Lightness is where HSL earns its place. Take #2563EB, which is hsl(221, 83%, 53%). Drop the lightness to 35% and you get a dark blue that keeps the same hue and saturation, which is exactly what a hover state needs. In HEX you would be guessing at three channel values to get the same shift.

Saturation behaves in a way that surprises people. At 100% lightness every hue becomes white, and at 0% lightness every hue becomes black, so the hue angle stops mattering at the ends of the scale. The vivid colors live near 50% lightness, and most brand palettes sit between 40% and 60%.

Converting between the three formats

The conversion is arithmetic, not magic. Take #2563EB and walk it through.

• HEX to RGB: split into 25, 63 and EB. 25 is 37, 63 is 99, EB is 235. The result is rgb(37, 99, 235).
• RGB to HSL, lightness: the largest channel is 235 and the smallest is 37. Lightness is the average of the two divided by 255, so (235 + 37) / 2 / 255 = 0.533, or 53%.
• RGB to HSL, saturation: the spread is 235 minus 37, which is 198. Divide by 255 to get 0.776, then divide by 1 minus the distance of lightness from 0.5 doubled, which is 0.933. The result is 0.832, or 83%.
• RGB to HSL, hue: blue is the largest channel, so the hue starts at 240 degrees and shifts by the red and green values. The result is 221 degrees.
• Result: hsl(221, 83%, 53%).

Going the other way, HSL to RGB, uses the same formulas in reverse. Convert the hue to a position on a 0 to 1 scale, build the chroma from saturation and lightness, then add the same offset to each channel. A spreadsheet or a few lines of code handle it faster than a person can, which is why the calculator on this page exists.

#2563EB is exactly hsl(221.2, 83.2%, 53.3%). Round those to whole numbers, type 221, 83 and 53 back in, and the conversion returns #2463EB, one step off on the red channel. That drift is normal and it is why the HEX value should stay the source of truth while the HSL numbers act as a working copy.

Contrast and readability

Contrast is the difference in brightness between text and its background, written as a ratio from 1 to 1 up to 21 to 1. The W3C's WCAG 2.1 guidance on contrast sets the thresholds that most accessibility rules, including Section 508 in the US, build on.

The ratio comes from relative luminance, which weights the channels by how much each one contributes to perceived brightness: 0.2126 for red, 0.7152 for green and 0.0722 for blue. Green carries most of the weight, which is why a pure green at rgb(0, 255, 0) is far brighter than a pure blue at rgb(0, 0, 255) even though both are full power.

Run the numbers on #2563EB and the luminance is 0.153. Against white the ratio is (1.0 + 0.05) / (0.153 + 0.05) = 5.17 to 1, which passes AA for body text. Against black the ratio is (0.153 + 0.05) / 0.05 = 4.06 to 1, which fails AA for body text and passes only for large text. White is the right text color on that blue.

Try #059669, a medium green, and the answer flips. Its luminance is 0.229, so white text sits at 3.77 to 1 and black text at 5.57 to 1. White on that green looks fine on a bright monitor and fails in daylight. That gap between what looks fine and what measures fine is the reason to check.

Picking colors that hold up

A palette that works in a design tool can fall apart in a browser, on a phone, outdoors, or for a reader with low vision. A few habits catch most of the problems before launch.

Test in grayscale. Convert the screen to gray and check that the hierarchy still reads. If the primary button and the disabled button become the same gray, the palette is leaning on hue to carry meaning that hue cannot carry for everyone.

Do not use hue alone. Error and success states need an icon or a label as well as a color. Roughly 1 in 12 men has some form of color vision deficiency, according to Colour Blind Awareness, and red against green is the most common confusion.

Check the small sizes. A color that passes at 24 pixels can fail at 12 pixels, because thin strokes lose contrast at the edges. Run the check on the smallest size the color appears at, not the largest.

Keep a floor. Pick a body text color that clears 7 to 1 against the background and you have room to move. Pick one at 4.6 to 1 and any change to the background, a tinted section or a hover state, drops it below the line.

Limit the palette. One primary, one accent, three neutrals and a set of state colors covers most interfaces. Every extra hue is another contrast pair to check and another chance for two colors to look the same on a cheap screen.