Color Picker — Workbench

Pick

Type any CSS color — hex, rgb(), hsl(), or a name

Values

hex—

rgb—

hsl—

Text contrast

—

white text on this color

—

black text on this color

Shades

click a shade to select it · same hue, lightness stepped ±10% and ±20%

Reading the notations

Hex packs the same three numbers as RGB into one word: #4c6ef5 is rgb(76,110,245), because hex 4c = 76, 6e = 110, f5 = 245. When you see eight digits, the last pair is the alpha (opacity): #4c6ef580 is the same color at 50% strength. The short three-digit form is a duplication trick — #abc means #aabbcc.

HSL describes the same color the way a paint mixer would: a hue in degrees around the wheel (0 red, 120 green, 240 blue), then saturation (how colorful vs gray) and lightness (black to white). It is the friendliest notation for humans: keep the hue, nudge the lightness, and you get the shades above.

The contrast numbers are the WCAG yardstick for readable text: the ratio between text and background brightness. 4.5:1 or better is the normal-text accessibility bar (AA), 3:1 suffices for large text, 7:1 is the stricter AAA level. The tiles above just tell you whether black or white text wins on the current color — handy when picking button or banner colors.