The 5 CSS Color Formats
CSS supports five main ways to define colors. Each has specific use cases where it excels. Pick and convert any color instantly: HEX Color Picker
| Format | Example | Best for |
|---|---|---|
| HEX | #06d6a0 | Design systems, CSS variables, copying from tools |
| RGB | rgb(6, 214, 160) | When you need numeric values for JavaScript |
| HSL | hsl(161deg, 94%, 43%) | Creating color variations programmatically |
| oklch | oklch(78% 0.15 161) | Perceptually uniform color manipulation |
| Named | coral, tomato | Prototyping and quick demos only |
HEX Colors — When to Use Them
HEX (#rrggbb) is the most compact format and easiest to copy from design tools like Figma, Sketch and Adobe XD. Every color picker outputs HEX by default. Use HEX for: design tokens and CSS custom properties, hardcoded brand colors, copying colors from design files.
Shorthand: When both digits of each channel are the same you can use 3-digit HEX. #ff6600 = #f60, #ffffff = #fff, #000000 = #000.
RGB — When to Use It
RGB is most useful when you need to manipulate color values in JavaScript, or when you need to add transparency. Use RGB for: JavaScript color calculations, CSS rgba() with transparency, reading color values from canvas or image data.
rgba(6, 214, 160, 0.5) — same color at 50% opacity. Note: you can now do this with HEX too — #06d6a080 adds 50% alpha as the last two digits.
HSL — The Developer-Friendly Format
HSL (Hue, Saturation, Lightness) is the best format for generating color variations programmatically. Changing the lightness value creates lighter and darker versions of the same color. Rotating the hue creates complementary and analogous colors.
Creating a palette with HSL:
- Base: hsl(161, 94%, 43%)
- Lighter: hsl(161, 94%, 65%) — just change L
- Darker: hsl(161, 94%, 25%) — just change L
- Complementary: hsl(341, 94%, 43%) — add 180 to H
WCAG Color Contrast — Accessibility Requirements
The Web Content Accessibility Guidelines require minimum contrast ratios between text and background colors. Our Color Picker includes a built-in WCAG contrast checker.
| Level | Normal text | Large text (18pt+) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Black on white = 21:1 (maximum). Many dark UI color schemes with light text fail AA compliance — always check before shipping.
Building a Design System Color Palette
A well-structured color system uses CSS custom properties with semantic naming:
--color-primary: #06d6a0;--color-primary-light: hsl(161, 94%, 65%);--color-primary-dark: hsl(161, 94%, 25%);--color-surface: #1a1a2e;--color-text: #e2e8f0;
Related Tools
- HEX Color Picker — Convert and generate color palettes
- HTTP Headers Checker — Inspect your site response headers
