Modern CSS supports over ten different ways to define a color. Knowing when to use each format — and how to convert between them — is essential for web developers, designers, and anyone building interfaces that need to meet accessibility standards.
The major color formats
HEX
The most common format for web colors. Six hexadecimal digits represent red, green, and blue values (two digits each):
#FF5733 → R: 255, G: 87, B: 51
The shorthand #RGB works when each pair repeats: #FF0000 = #F00.
HEX8 adds two digits for the alpha channel: #FF5733CC (80% opacity).
RGB and RGBA
Expresses each channel as a decimal (0–255):
rgb(255, 87, 51) — opaquergba(255, 87, 51, 0.8) — 80% opacity
Useful when you need to manipulate individual channels programmatically.
HSL and HSLA
Hue-Saturation-Lightness is more intuitive for design work than RGB. Hue is the color angle (0–360°), saturation is intensity (0–100%), and lightness is brightness (0–100%):
hsl(14°, 100%, 60%) — a vivid orange-red
This format makes it easy to create variations: decrease lightness for a shade, increase it for a tint, keep hue and saturation the same.
OKLCH
A newer perceptually uniform color space designed for CSS Color Level 4. Unlike HSL, equal steps in OKLCH produce equal perceived changes in color — making it ideal for programmatically generating accessible color palettes.
oklch(0.70 0.25 30.00) — L: lightness (0–1), C: chroma, H: hue angle
OKLCH is now supported in all major browsers via the oklch() CSS function.
WCAG contrast ratios
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with low vision:
| Level | Minimum contrast | Use case |
|---|---|---|
| AA | 4.5:1 | Normal text (under 18px regular, under 14px bold) |
| AA | 3:1 | Large text (18px+ regular, 14px+ bold) |
| AAA | 7:1 | Normal text (enhanced) |
| AAA | 4.5:1 | Large text (enhanced) |
The ratio is calculated from relative luminance — how much light a color reflects relative to pure white:
- White has a luminance of 1.0
- Black has a luminance of 0.0
- A color with luminance 0.18 against white gives a ratio of (1 + 0.05) / (0.18 + 0.05) = 4.57:1 (passes AA)
Color harmonies
Color harmony theory describes combinations of colors that work well together, based on their positions on the color wheel:
| Harmony | Positions | Character |
|---|---|---|
| Complementary | 180° apart | High contrast, vibrant |
| Triadic | 120° apart (3 colors) | Balanced, colorful |
| Analogous | ±30° adjacent | Harmonious, calming |
| Split-complementary | 150° and 210° | Softer contrast than complementary |
| Tetradic/Square | 90° apart (4 colors) | Rich, complex |
Shade and tint palettes
A shade is a color mixed with black (lower lightness). A tint is a color mixed with white (higher lightness). For design systems and component libraries, a 10-step palette from near-white to near-black gives you the full range you need for backgrounds, borders, text, and hover states.
Tailwind CSS uses this exact model with steps 50–900:
--color-50: #FFF0ED; /* near white tint */
--color-100: #FFE1D6;
--color-200: #FFBFAD;
...
--color-800: #9D2B0A;
--color-900: #330D09; /* near black shade */
CSS custom properties and Tailwind
Two output formats are especially useful for developers:
CSS custom property: --color-primary: #FF5733; — define once, use everywhere, change in one place.
Tailwind arbitrary value: bg-[#FF5733] — use any color directly in Tailwind classes without configuring the theme.
How to use the color picker for free
- Go to Advanced Color Picker
- Use the visual picker tab or paste any color in Paste any format
- See all 9 output formats simultaneously with copy buttons for each
- Check WCAG contrast ratios against white and black
- Explore the 5 harmony generators — click any swatch to make it active
- Generate a 10-shade palette and copy all shades as CSS variables
- Recent colors are saved in your browser history for quick access
All processing runs in your browser — no colors, data, or preferences are sent to any server.