Picking Colors for the Web
Good colour choices make an interface feel effortless. Bad ones create eye-strain and accessibility failures. This guide covers what actually matters when picking colour for the web.
HEX, RGB, and HSL
HEX and RGB describe the same colour in different notations — three channels of red, green, and blue. HSL rewrites that as hue, saturation, and lightness, which maps closer to how humans think about colour.
For UI work HSL is the most human-friendly: change the hue for a different colour, lightness for a shade, saturation for a tint.
Contrast and accessibility
Text needs enough contrast against its background to be readable. WCAG 2 sets a minimum ratio of 4.5:1 for normal text and 3:1 for large text.
Check contrast for the exact combinations you will ship — a colour that passes on white can easily fail on your brand background.
Building a palette
- Start with one anchor brand colour.
- Generate tints (lighter) and shades (darker) for surfaces and borders.
- Add one accent colour that is far away on the colour wheel for call-to-action buttons.
- Reserve a green, an amber, and a red for success, warning, and error states.
Designing for dark mode
Colours that look vibrant on white often look neon on black. Reduce saturation for dark surfaces, and never invert a light palette one-to-one.