Every CSS stylesheet relies on color values — whether you're styling a button, setting a background gradient, or defining a design system. But the sheer number of CSS color formats can be confusing. Should you use HEX codes like #3b82f6, RGB values like rgb(59, 130, 246), or HSL notation like hsl(217, 91%, 60%)? And how do you convert between them?
This guide covers everything developers need to know about CSS color formats — HEX, RGB, RGBA, HSL, HSLA, named colors, and the modern color() function. You'll learn how each format works, how to convert between them (with formulas), color theory fundamentals for better design choices, accessibility considerations, and how to use CSS custom properties to build maintainable color systems. If you need a quick conversion right now, try our CSS color converter tool.
Understanding CSS Color Formats
CSS supports several ways to define colors. Each format has trade-offs in readability, precision, and developer experience. Here's a breakdown of every format you'll encounter in modern CSS.
HEX Color Codes
HEX (hexadecimal) is the most widely used CSS color format. A HEX color starts with # followed by six hexadecimal digits representing red, green, and blue channels — each channel ranges from 00 (0) to FF (255).
/* 6-digit HEX */
color: #3b82f6; /* Blue */
color: #ef4444; /* Red */
color: #10b981; /* Green */
color: #000000; /* Black */
color: #ffffff; /* White */
/* 3-digit shorthand (when each pair repeats) */
color: #fff; /* Same as #ffffff */
color: #000; /* Same as #000000 */
color: #f00; /* Same as #ff0000 — pure red */
/* 8-digit HEX with alpha (transparency) */
color: #3b82f680; /* Blue at 50% opacity */
color: #00000033; /* Black at 20% opacity */
The 3-digit shorthand works by doubling each digit: #abc expands to #aabbcc. The 8-digit variant adds two characters for alpha transparency, where 00 is fully transparent and FF is fully opaque.
When to use HEX: HEX codes are compact, universally supported, and the standard output from most design tools like Figma and Photoshop. They're ideal when copying colors from a design spec. The downside is that HEX values are not human-readable — you can't easily tell what #6366f1 looks like without a css color picker.
RGB and RGBA
RGB defines colors using three decimal values (0–255) for red, green, and blue. RGBA adds an alpha channel for transparency (0 to 1).
/* RGB */
color: rgb(59, 130, 246); /* Blue */
color: rgb(239, 68, 68); /* Red */
color: rgb(16, 185, 129); /* Green */
/* RGBA with transparency */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */
color: rgba(0, 0, 0, 0.1); /* Black at 10% opacity — subtle shadow */
/* Modern syntax (CSS Level 4) — space-separated, slash for alpha */
color: rgb(59 130 246);
color: rgb(59 130 246 / 0.5);
color: rgb(59 130 246 / 50%); When to use RGB: RGB is useful when you need to programmatically manipulate colors with JavaScript (each channel is a simple integer) or when you need alpha transparency. It's also the native format for the <canvas> API and WebGL.
HSL and HSLA
HSL stands for Hue, Saturation, and Lightness — a format designed to be more intuitive for humans. Instead of mixing abstract red/green/blue channels, you specify a color by its position on the color wheel (hue), how vivid it is (saturation), and how bright it is (lightness).
/* HSL */
color: hsl(217, 91%, 60%); /* Blue — 217° on color wheel */
color: hsl(0, 84%, 60%); /* Red — 0° on color wheel */
color: hsl(160, 84%, 39%); /* Green — 160° on color wheel */
/* HSLA with transparency */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */
/* Modern syntax */
color: hsl(217 91% 60%);
color: hsl(217 91% 60% / 0.5);The hue value is an angle on the color wheel: 0° is red, 120° is green, 240° is blue, and 360° wraps back to red. Saturation goes from 0% (gray) to 100% (fully vivid). Lightness goes from 0% (black) to 100% (white), with 50% being the "pure" color.
When to use HSL: HSL is the best format for building color systems and design tokens. Want a darker shade? Lower lightness. Want a muted version? Reduce saturation. Want a complementary color? Add 180° to the hue. This makes HSL perfect for CSS custom properties and dynamic theming.
CSS Named Colors
CSS defines 148 named colors — from aliceblue to yellowgreen. While convenient for prototyping, they are limited and rarely match brand colors.
color: tomato; /* #ff6347 */
color: cornflowerblue; /* #6495ed */
color: slategray; /* #708090 */
color: rebeccapurple; /* #663399 — added in CSS4 as a tribute */
color: transparent; /* rgba(0, 0, 0, 0) */
color: currentColor; /* Inherits from parent's color property */
Two special keywords are worth knowing: transparent is a fully transparent black, and currentColor references the element's current color property value — extremely useful for SVG icons and borders that should match text color.
Modern CSS Color Functions
CSS Color Level 4 and Level 5 introduce powerful new functions that go beyond the traditional sRGB color space. These enable wider gamut colors on modern displays.
/* Lab color — perceptually uniform lightness */
color: lab(60% 50 -30);
/* LCH — like HSL but perceptually uniform */
color: lch(60% 50 270);
/* oklch — improved perceptual model, preferred in 2026 */
color: oklch(0.65 0.2 270);
/* color() — access any color space */
color: color(display-p3 0.3 0.5 1.0);
/* color-mix() — blend two colors in any color space */
color: color-mix(in oklch, #3b82f6 70%, white);
/* relative color syntax — derive new colors from existing ones */
color: hsl(from var(--brand) h s calc(l - 20%));
The oklch() function is quickly becoming the recommended format for new projects. It offers perceptually uniform lightness (unlike HSL, where different hues at the same lightness look visually different in brightness), wide gamut support for P3 displays, and predictable color manipulation. The color-mix() function is already well-supported and eliminates the need for Sass color functions in many cases.
CSS Color Format Conversion
Converting between CSS color formats is a common task. Here's how each conversion works, with formulas and examples. For instant conversions without manual math, use our hex rgb converter tool.
HEX to RGB Conversion
HEX to RGB conversion is straightforward — each pair of hex digits converts to a decimal value between 0 and 255.
/* HEX: #3b82f6 */
R = 0x3b = 3×16 + 11 = 59
G = 0x82 = 8×16 + 2 = 130
B = 0xf6 = 15×16 + 6 = 246
/* Result: rgb(59, 130, 246) */In JavaScript, you can automate this:
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2{)([a-f\d]{2{)([a-f\d]{2{)$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
{ : null;
{
hexToRgb('#3b82f6'); // { r: 59, g: 130, b: 246 {RGB to HEX Conversion
The reverse: convert each decimal channel (0–255) to a two-digit hexadecimal string.
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0'))
.join('');
{
rgbToHex(59, 130, 246); // '#3b82f6'RGB to HSL Conversion
This conversion is more complex. You first normalize RGB values to the 0–1 range, find the min and max channels, then calculate hue, saturation, and lightness.
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const l = (max + min) / 2;
let h, s;
if (max === min) {
h = s = 0; // achromatic (gray)
{ else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
{
{
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
{;
{
rgbToHsl(59, 130, 246); // { h: 217, s: 91, l: 60 {Common Color Conversion Reference Table
Here are popular colors across all three formats for quick reference:
Color Name | HEX | RGB | HSL
----------------|-----------|----------------------|------------------------
White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%)
Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%)
Pure Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%)
Pure Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%)
Pure Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%)
Tailwind Blue | #3b82f6 | rgb(59, 130, 246) | hsl(217, 91%, 60%)
Tailwind Red | #ef4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%)
Tailwind Green | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%)
Coral | #ff7f50 | rgb(255, 127, 80) | hsl(16, 100%, 66%)
Indigo | #6366f1 | rgb(99, 102, 241) | hsl(239, 84%, 67%)
Amber | #f59e0b | rgb(245, 158, 11) | hsl(38, 92%, 50%)
Slate Gray | #64748b | rgb(100, 116, 139) | hsl(215, 16%, 47%)Color Theory Basics for Web Developers
You don't need a design degree to choose good colors. Understanding a few fundamentals will dramatically improve your UI work.
The Color Wheel
The color wheel arranges hues in a circle: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°. This is exactly what the H value in HSL represents. Knowing the wheel lets you build color relationships mathematically.
Color Harmonies
Color harmonies are combinations that naturally look good together. Using HSL, you can compute them directly:
/* Starting hue: 217° (blue) */
/* Complementary — opposite on the wheel (±180°) */
--primary: hsl(217, 91%, 60%); /* Blue */
--complement: hsl(37, 91%, 60%); /* Orange */
/* Analogous — neighbors on the wheel (±30°) */
--primary: hsl(217, 91%, 60%);
--analog-1: hsl(187, 91%, 60%); /* Cyan-ish */
--analog-2: hsl(247, 91%, 60%); /* Purple-ish */
/* Triadic — three equally spaced hues (±120°) */
--primary: hsl(217, 91%, 60%);
--triad-1: hsl(337, 91%, 60%); /* Pink */
--triad-2: hsl(97, 91%, 60%); /* Lime */
/* Split-complementary — complement's neighbors */
--primary: hsl(217, 91%, 60%);
--split-1: hsl(7, 91%, 60%); /* Red-orange */
--split-2: hsl(67, 91%, 60%); /* Yellow-green */Want to explore these harmonies visually? Our color palette generator creates complete palettes from a single starting color using these relationships.
Building Shade Scales with HSL
A single hue can produce an entire shade scale by varying lightness. This is how frameworks like Tailwind CSS generate their color palettes — and you can do it with plain CSS.
:root {
--blue-50: hsl(217, 91%, 97%); /* Lightest */
--blue-100: hsl(217, 91%, 93%);
--blue-200: hsl(217, 91%, 84%);
--blue-300: hsl(217, 91%, 74%);
--blue-400: hsl(217, 91%, 67%);
--blue-500: hsl(217, 91%, 60%); /* Base */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%); /* Darkest */
{In practice, you'll often want to also slightly decrease saturation as you go darker and increase it slightly for lighter shades — this prevents colors from looking neon or muddy at the extremes.
CSS Custom Properties for Color Systems
CSS custom properties (variables) transform how you manage colors across a project. Instead of scattering hex codes throughout your stylesheet, you define a single source of truth.
Basic Color Tokens
:root {
/* Brand colors */
--color-primary: #3b82f6;
--color-primary-light: #93c5fd;
--color-primary-dark: #1d4ed8;
/* Semantic colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #06b6d4;
/* Neutral palette */
--color-text: #1e293b;
--color-text-muted: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
{
/* Dark mode — override only what changes */
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-bg: #0f172a;
--color-bg-subtle: #1e293b;
--color-border: #334155;
{
{Advanced: HSL Channel Splitting
A powerful technique is storing individual HSL channels, then composing them on the fly. This lets you create alpha variants and shade adjustments without duplicating colors.
:root {
--primary-h: 217;
--primary-s: 91%;
--primary-l: 60%;
--color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--color-primary-hover: hsl(var(--primary-h), var(--primary-s), 55%);
--color-primary-active: hsl(var(--primary-h), var(--primary-s), 48%);
--color-primary-bg: hsl(var(--primary-h), var(--primary-s), 95%);
{
.button-primary {
background: var(--color-primary);
color: white;
{
.button-primary:hover {
background: var(--color-primary-hover);
{
.alert-primary {
background: var(--color-primary-bg);
border: 1px solid var(--color-primary);
color: hsl(var(--primary-h), var(--primary-s), 30%);
{Using color-mix() for Modern Color Systems
The color-mix() function, now supported in all major browsers, simplifies creating color variations without channel splitting:
:root {
--brand: #3b82f6;
--brand-hover: color-mix(in oklch, var(--brand) 85%, black);
--brand-light: color-mix(in oklch, var(--brand) 20%, white);
--brand-muted: color-mix(in oklch, var(--brand) 60%, gray);
/* Create alpha variants */
--brand-10: color-mix(in srgb, var(--brand) 10%, transparent);
--brand-50: color-mix(in srgb, var(--brand) 50%, transparent);
{
The in oklch parameter produces better perceptual results than mixing in sRGB — darker shades stay vibrant instead of turning muddy.
Color Accessibility and Contrast Ratios
Choosing the right CSS color isn't just aesthetic — it's an accessibility requirement. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors.
WCAG Contrast Requirements
Level AA (minimum):
- Normal text (under 18px): 4.5:1 contrast ratio
- Large text (18px+ bold or 24px+): 3:1 contrast ratio
- UI components and graphics: 3:1 contrast ratio
Level AAA (enhanced):
- Normal text: 7:1 contrast ratio
- Large text: 4.5:1 contrast ratioContrast Ratio Examples
/* GOOD — passes AA for normal text */
color: #1e293b; /* Dark slate */
background: #ffffff; /* White */
/* Contrast ratio: 13.5:1 ✓ */
/* GOOD — passes AA for large text */
color: #64748b; /* Slate gray */
background: #ffffff; /* White */
/* Contrast ratio: 4.6:1 — passes AA for large text, fails for normal text */
/* BAD — fails AA entirely */
color: #93c5fd; /* Light blue */
background: #ffffff; /* White */
/* Contrast ratio: 2.3:1 ✗ — unreadable for many users */
/* Common mistake: light gray on white */
color: #d1d5db;
background: #ffffff;
/* Contrast ratio: 1.6:1 ✗ — fails all levels */Calculating Contrast Ratios
The contrast ratio formula uses relative luminance. You first convert each sRGB channel to linear light, compute luminance, then calculate the ratio.
function getRelativeLuminance(r, g, b) {
const [rs, gs, bs] = [r, g, b].map(c => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
{);
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
{
function getContrastRatio(color1, color2) {
const l1 = getRelativeLuminance(...color1);
const l2 = getRelativeLuminance(...color2);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
{
// Example: dark text on white background
getContrastRatio([30, 41, 59], [255, 255, 255]);
// Returns: 13.5 — passes AAATip: when designing a color palette, always check each shade against both white and dark backgrounds. A good css color picker tool will display contrast ratios automatically. Our color converter includes WCAG contrast checking.
Tips for Accessible Color Usage
- Never rely on color alone to convey information — pair colored indicators with icons, text labels, or patterns
- Test with color blindness simulators — roughly 8% of men have some form of color vision deficiency
- Provide sufficient contrast for interactive elements — focus rings, borders, and hover states all need 3:1 minimum against adjacent colors
- Use your shade scale wisely — for text on a white background, 700-900 shades typically pass AA; 500-600 often fail for body text
- Check dark mode separately — contrast that works on white may fail on dark backgrounds, and vice versa
Practical CSS Color Patterns
Here are real-world CSS patterns that use color effectively.
Gradient Buttons with Color Harmony
.button-gradient {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
{
.button-gradient:hover {
opacity: 0.9;
{
.button-gradient:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
{Semantic Status Colors with Alpha Variants
.badge {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
{
.badge-success {
background: rgb(16 185 129 / 0.1);
color: #065f46;
border: 1px solid rgb(16 185 129 / 0.2);
{
.badge-error {
background: rgb(239 68 68 / 0.1);
color: #991b1b;
border: 1px solid rgb(239 68 68 / 0.2);
{
.badge-warning {
background: rgb(245 158 11 / 0.1);
color: #92400e;
border: 1px solid rgb(245 158 11 / 0.2);
{Smooth Dark Mode Transitions
:root {
--surface: #ffffff;
--on-surface: #1e293b;
--surface-elevated: #ffffff;
--shadow-color: 220 3% 15%;
color-scheme: light;
{
@media (prefers-color-scheme: dark) {
:root {
--surface: #0f172a;
--on-surface: #e2e8f0;
--surface-elevated: #1e293b;
--shadow-color: 220 40% 2%;
color-scheme: dark;
{
{
body {
background: var(--surface);
color: var(--on-surface);
transition: background-color 0.3s ease, color 0.3s ease;
{
.card {
background: var(--surface-elevated);
box-shadow: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
{CSS Color Picker Tools Compared
There are many tools available for picking and converting CSS colors. Here's how the popular options compare for developers working with a css color picker hex rgb converter workflow.
Browser DevTools Color Picker
Every browser includes a built-in color picker in the CSS inspector. Click any color swatch in the Styles panel to open it. Chrome DevTools is particularly full-featured — it shows contrast ratios, supports all color formats, and lets you toggle between HEX, RGB, HSL, and HWB with a single click. This is the fastest option when you're already debugging styles.
VS Code Color Picker
VS Code shows a color swatch next to any CSS color value. Hovering over it opens a mini picker where you can adjust hue, saturation, opacity, and toggle between formats. For quick edits while coding, it's hard to beat.
Online Color Converter Tools
Dedicated web tools like our color converter are ideal for batch conversions and when you need to see all formats simultaneously. The best online css color picker tools display HEX, RGB, HSL, and OKLCH side by side, show the color visually, provide contrast checking, and let you copy any format with one click.
Palette Generation Tools
When you need to build a complete color system — not just convert a single value — use a color palette generator. These tools create harmonious multi-color palettes, generate shade scales, and ensure accessibility. They save hours compared to manually tweaking HSL values.
Common CSS Color Mistakes and How to Avoid Them
- Using pure black
#000000for text: On white backgrounds, pure black creates harsh contrast. Use dark gray like#1e293bor#111827instead — it's easier on the eyes while still passing AAA contrast. - Inconsistent opacity approaches: Mixing
opacity: 0.5(affects entire element including children) withrgba()alpha (affects only that color) causes unexpected results. Prefer per-color alpha for backgrounds. - Hardcoding colors everywhere: Without CSS custom properties, changing your brand blue means find-and-replace across hundreds of files. Define colors once, reference everywhere.
- Ignoring the P3 color gamut: Modern displays can show millions more colors than sRGB. Consider using
color(display-p3 ...)with an sRGB fallback for more vibrant hero sections and illustrations. - Forgetting
forced-colorsmode: Windows High Contrast Mode overrides your colors. Use@media (forced-colors: active)to ensure critical UI elements remain visible.
Frequently Asked Questions
What's the difference between HEX and RGB colors in CSS?
HEX and RGB represent the same color model — both define colors using red, green, and blue channels. HEX uses hexadecimal notation (#3b82f6) while RGB uses decimal values (rgb(59, 130, 246)). They are fully interchangeable. HEX is more compact; RGB is easier to read and manipulate programmatically.
When should I use HSL instead of HEX or RGB?
Use HSL when building color systems, creating shade scales, or deriving related colors. HSL separates the hue (color identity) from saturation and lightness, making it trivial to create lighter/darker variants or find complementary colors. HEX or RGB is fine for individual one-off color values.
How do I convert HEX to RGB manually?
Split the 6-digit hex code into three pairs (e.g., #3b82f6 becomes 3b, 82, f6). Convert each pair from hexadecimal to decimal: 3b = 59, 82 = 130, f6 = 246. The result is rgb(59, 130, 246).
What is a good contrast ratio for accessible text?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal-sized text (Level AA) and 3:1 for large text (18px bold or 24px regular). For enhanced accessibility (Level AAA), aim for 7:1 for normal text and 4.5:1 for large text.
What is OKLCH and should I use it?
OKLCH is a perceptually uniform color space that improves on HSL's shortcomings. In HSL, yellow at 50% lightness looks much brighter than blue at 50% lightness. OKLCH corrects this, making lightness values consistent across hues. It's supported in all modern browsers and recommended for new color systems in 2026.
Can I use CSS custom properties for colors with fallbacks?
Yes. Use the two-value syntax: color: var(--primary, #3b82f6). If --primary is not defined, the browser falls back to #3b82f6. You can also use @supports queries to provide fallbacks for modern color functions like oklch().
How do I add transparency to a HEX color?
Append two hex digits to the 6-digit code: #3b82f680 is approximately 50% opacity (80 hex = 128 decimal, which is 128/255 ≈ 50%). Alternatively, convert to rgb() and use the alpha parameter: rgb(59 130 246 / 0.5).
What CSS color format is best for performance?
All CSS color formats parse to the same internal representation — there is no measurable performance difference between HEX, RGB, and HSL. Choose the format that best serves readability and maintainability for your team.