Design · 7 min read · 2026-10-18
Every color on the web boils down to three numbers. The color you perceive as "a nice indigo button" is just a recipe for how much red, green and blue light to mix - and once you can read that recipe, design tools stop feeling like slot machines. The two notations you meet everywhere, #4F46E5 and rgb(79, 70, 229), are the same numbers in different clothes.
Hexadecimal is base-16 counting: digits run 0-9 then A-F, so a two-digit hex pair can express 0-255 in two characters. In #4F46E5, the pairs are 4F (79 red), 46 (70 green) and E5 (229 blue). A full eight-digit code such as #4F46E5FF simply appends alpha (opacity) - FF is fully opaque, 00 is invisible, 80 is roughly half. That is the entire mystery. When you see #FFF and #000, you are seeing the shorthand for maximum and minimum of all three channels: white and black.
RGB answers "how much light of each primary?" - convenient for screens, terrible for intuition. HSL answers the questions you actually ask: what shade is this (hue, a 0-360 degree wheel where 0 is red, 120 is green, 240 is blue), how intense is it (saturation, 0% grey to 100% vivid), and how bright is it (lightness, 0% black to 100% white). Want the same button in a darker shade for a hover state? Keep hue and saturation, drop lightness by eight points. Want a pastel palette? One hue, high lightness, low saturation, five variations. Tasks that are guesswork in RGB become arithmetic in HSL.
Text legibility has a measurable standard: the contrast ratio between text and background, running from 1:1 (invisible) to 21:1 (black on white). The widely followed guideline asks for at least 4.5:1 for body text and 3:1 for large text. Grey-on-white designs fail constantly - #999999 on white is about 2.8:1, which technically does not clear even the large-text bar. Low contrast does not read as "elegant" to readers with ageing eyes or on a phone in sunlight; it reads as broken. A contrast checker does the arithmetic for you and takes seconds to run before shipping a color pair.
A color picker converts any code between HEX, RGB and HSL while showing the swatch; a gradient builder interpolates between two of them for buttons and hero sections; the palette generator proposes full sets from a starting hue; and the contrast checker guards the legibility line. The image eyedropper does the "steal from reality" trick on any photo. All of them run in the browser, which for color work means instant feedback with nothing to install.
Learn HSL once and color stops being luck: shade, tint and harmony become numbers you set on purpose instead of pixels you nudge by accident.