Design FIELD NOTES · 3 MIN READ
Color Picker Explained: From One Click to Every CSS Code
What happens after you pick a color: hex parsing, the 3-digit shorthand rule, the RGB to HSL conversion, and how the coordinating palette is generated.
A color picker looks like a single control — drag a dot, get a color — but the useful part is what happens after the click. One chosen color becomes a hex code, a shorthand, rgb() and hsl() strings, and a small ready-made palette. All of that is deterministic math on three numbers, and knowing the steps tells you why the outputs look the way they do.
Everything starts as three numbers
Strip the # and a hex code is just three bytes written in base 16: one for red, one for green, one for blue, each 0–255. The picker reads 1a73e8 as 0x1a, 0x73, 0xe8 — that is 26, 115, and 232 — and immediately has your color in the form every screen actually displays: three light amounts. Everything else on the panel is derived from that triple, never the other way around.
When a three-digit shorthand exists
Hex supports a compact form, #f80 instead of #ff8800, but only under a strict condition: both digits of every pair must match, so the byte is a doubled digit like ff or 88. A picker can test this without touching strings — a byte has a doubled-digit form exactly when it is divisible by 17 (0, 17, 34 … 255). #1a73e8 fails the test on all three channels, so it has no shorthand; #ff8800 passes on all three and collapses to #f80. That is why some colors in your stylesheet shrink and others never do.
HSL: turning three dials into one
Next the picker converts RGB into HSL — hue, saturation, lightness. For #1a73e8 that is hsl(214, 82%, 51%): a blue whose hue sits at 214° on the 360° color wheel. The conversion itself is a short algorithm (find the strongest and weakest channel, derive lightness from their average and saturation from their spread), but its value is practical: hue becomes one number you can reason about and rotate, which is what makes the palette section possible.
The palette is just four hue rotations
The coordinating swatches are not "suggestions" from a database — they are your own hue spun around the wheel while saturation and lightness are held fixed. For #1a73e8 (h=214): the complementary color is 214 + 180 = 34°, which lands on #e88f1a, an orange; the two analogous neighbors at ±30° give the cyan #1adae8 and the violet-blue #281ae8; and the split-complement pair at 150° and 210° away produces #e8281a and #dae81a. Keeping S and L constant is why the palette always looks related to your base color — only the angle changed. The full set of schemes and their angles is covered in How Color Harmonies Work.
Picker, converter, or palette generator?
Three tools overlap here, and picking the right one saves steps. A color picker is for the moment you have (or want to find) a single color and need every code format plus a quick coordinating set. A color converter assumes the color is already decided and only translates it between formats. A palette generator starts from one color and expands it into full harmony sets with more schemes than a picker's quick panel. If you are exploring, start with the picker; if you are implementing, the converter's plain hex/RGB/HSL output is usually all you need.
Try it yourself
The Color Picker runs all of this live: pick or type a color and copy the hex, shorthand, rgb(), rgba(), hsl() or hsla() string, or grab any palette swatch. When you already have a code in one format, the Color Converter translates it without the picking step, and the Color Palette Generator expands a single hue into the full five-scheme harmony set.