HEX, RGB and HSL explained
HEX and RGB describe the same thing in two notations: how much red, green and blue light to mix, each from 0 to 255. #3b82f6 is rgb(59, 130, 246), with each pair of hex digits being one channel. Three-digit shorthand such as #fa0 doubles each digit, so it equals #ffaa00. Eight-digit hex such as #3b82f680 adds a fourth pair for transparency.
HSL describes a color the way people think about it: hue as an angle on the color wheel (0 is red, 120 green, 240 blue), saturation as how vivid it is, and lightness from black to white. That makes HSL the easiest format for building palettes, since you can keep the hue and step the lightness to get tints and shades.
When to use each format
Design tools and brand guidelines usually hand you HEX. CSS accepts all three, and modern CSS also supports newer spaces such as oklch(). Use HSL in CSS custom properties when you want to derive hover and disabled states from one base color, and RGB when you need to add transparency with rgb(59 130 246 / 50%). The transparency slider writes 8-digit hex and rgba() for you.
Checking color contrast for accessibility
WCAG 2 measures how readable text is by the contrast ratio between text and background, from 1:1 (identical) to 21:1 (black on white). Level AA needs at least 4.5:1 for body text and 3:1 for large text (24px, or about 19px bold) and for icons and form borders. Level AAA raises that to 7:1 and 4.5:1.
Enter your text color, set the background, and the checker shows the ratio with a pass or fail for each level and a live preview. Translucent colors are blended over the background first, which is what the eye actually sees. If a color fails, click a darker shade or lighter tint from the palette below it until it passes.
