CSS Color Formats Explained: HEX, RGB, HSL, and When to Use Each

Open any CSS file and you'll see colors written a dozen different ways: #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), blue, oklch(60% 0.2 250). They can all refer to the same color. So which format should you actually use?

The answer depends on what you're doing — building a design system, animating colors, supporting older browsers, or working in a modern color space.

---

Convert Between Color Formats

---

Pick Colors Visually

---

HEX — The Web Standard

color: #3B82F6;
color: #3b82f6;    /* case-insensitive */
color: #38F;       /* shorthand — same as #3388FF */
color: #3B82F680;  /* 8-digit = includes alpha (50% opacity) */

HEX is the most widely used CSS color format. Compact, copy-pasteable, and universally supported. The six digits are three hex pairs for red, green, and blue — each ranging from 00 (0) to FF (255).

Use HEX when: Sharing specific colors, copying from design tools (Figma outputs HEX by default), defining fixed brand colors in a stylesheet.

Drawback: Hard to read or manipulate mentally. #3B82F6 doesn't intuitively communicate "a medium-bright blue."

---

RGB — Explicit Channels

color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.5);    /* 50% transparent — legacy */
color: rgb(59 130 246 / 50%);      /* modern syntax — same result */

RGB explicitly names the red, green, and blue channels as integers (0–255) or percentages.

Use RGB when: You need transparency (rgba), you're doing color math programmatically, or you're passing values to a canvas or WebGL context.

Modern note: CSS Color Level 4 unified the syntax — rgb() and rgba() are now identical, and you can use rgb(59 130 246 / 50%) without the rgba variant.

---

HSL — Human-Readable Colors

color: hsl(217, 91%, 60%);
color: hsl(217deg 91% 60% / 80%);    /* with alpha */

HSL stands for Hue, Saturation, Lightness:

• Hue — The color wheel position in degrees (0–360): 0°=red, 120°=green, 240°=blue
• Saturation — How vivid the color is (0%=grey, 100%=full color)
• Lightness — How light or dark (0%=black, 50%=normal, 100%=white)

Use HSL when: Building color scales and theming systems. Adjusting only the L value creates consistent tints and shades. Adjusting S creates desaturated variants. This makes HSL ideal for generating systematic palettes programmatically.

/* Easy to create a 10-step scale by adjusting lightness */
--blue-100: hsl(217, 91%, 95%);
--blue-500: hsl(217, 91%, 60%);
--blue-900: hsl(217, 91%, 20%);

---

Modern: OKLCH — Perceptually Uniform Colors

color: oklch(60% 0.2 250);

OKLCH is the modern successor to HSL, designed to be perceptually uniform — meaning a 10% change in lightness looks like the same visual change regardless of hue. In HSL, a bright yellow at 50% lightness appears visually lighter than a bright blue at 50% lightness.

OKLCH parameters:

• L — Lightness (0–1 or 0–100%)
• C — Chroma (colorfulness, roughly 0–0.37)
• H — Hue angle in degrees

Use OKLCH when: Building accessible color systems, working in wide-gamut (P3) color spaces, or creating palettes that need visual consistency across different hues. Increasingly supported in modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+).

---

Comparison Table

---

Color in CSS Custom Properties

Modern design systems use CSS custom properties (variables) for colors, making it easy to switch themes:

:root {
  --color-primary: hsl(217, 91%, 60%);
  --color-primary-50: hsl(217, 91%, 97%);
  --color-primary-900: hsl(217, 91%, 15%);
}

.dark {
  --color-primary: hsl(217, 91%, 75%);   /* lighter for dark mode */
}

This approach works with any format but HSL makes it most intuitive to create systematic variations.

---

Frequently Asked Questions

Which format does Tailwind CSS use?

Tailwind v3 uses HEX internally but lets you define your theme in any format. Tailwind v4 uses OKLCH natively for its built-in color palette.

Can I mix color formats in the same CSS file?

Yes — CSS doesn't restrict you to one format. Using HEX for brand colors and HSL for component-level variations is common and valid.

What are "wide-gamut" colors?

Standard sRGB displays show about 35% of visible colors. Modern P3 displays (iPhone, MacBook, many TVs) can show about 45%. OKLCH and color(display-p3 ...) let you use colors outside sRGB that appear more vivid on capable displays.

How do I make a color 30% lighter in CSS?

With HSL: increase the lightness value. hsl(217, 91%, 60%) → hsl(217, 91%, 90%). With OKLCH: increase L. With HEX or RGB, you'd need to convert first.

Does FluxToolkit store my color values?

No. All conversions run in your browser. Your inputs are never sent to our servers.

---

Related Articles

• Color Picker Online: HEX, RGB, and HSL — Pick any color and get all formats at once.
• WebP vs PNG vs JPG: Which Image Format Should You Use? — Color management also affects image format choices.
• How to Create a Favicon — Apply your brand colors when creating favicons.