CSS Color Converter: Convert HEX, RGB, HSL & OKLCH Online (2026)

CSS color specifications have evolved dramatically. In the early days of the web, developers were limited to basic 3-digit and 6-digit hexadecimal codes or named keywords. Today, CSS supports perceptually uniform color spaces like OKLCH, wide-gamut Display P3 colors, and functional systems like HSL and HWB.

As modern stylesheet features mature, you frequently need to convert between formats. Whether you are translating a designer's HEX palette into HSL for dynamic theming, or exploring OKLCH for perceptual accessibility, a CSS color converter is an essential daily utility — no sign-up, no account, free in your browser.

---

Convert Color Formats Online

---

How to Use the CSS Color Converter

Step 1: Enter a Color Value

Paste any color in a supported format — HEX, RGB, HSL, HWB, CMYK, or OKLCH — into the input field.

Step 2: Select Your Target Format

Choose the format you want to convert to from the output format selector.

Step 3: Copy the Result

Click the copy icon next to the converted value to save it directly to your clipboard, ready to paste into your stylesheet.

---

Comparing CSS Color Formats

Each color format represents a different way of organizing color data. The right choice depends entirely on your use case:

---

How Color Conversions Work

HEX to RGB

HEX is simply base-16 notation for RGB. A 6-character string is split into three pairs and each pair is parsed as a base-16 number:

• Red: 3B → $3 \times 16 + 11 = 59$
• Green: 82 → $8 \times 16 + 2 = 130$
• Blue: F6 → $15 \times 16 + 6 = 246$

So #3B82F6 = rgb(59, 130, 246).

RGB to HSL

Scale each channel to 0–1. Let $X_{\max} = \max(R, G, B)$ and $X_{\min} = \min(R, G, B)$. Chroma = $C = X_{\max} - X_{\min}$.

$$L = \frac{X_{\max} + X_{\min}}{2}$$

$$S = \begin{cases} 0 & C = 0 \ \dfrac{C}{1 - |2L - 1|} & C > 0 \end{cases}$$

$$H = \begin{cases} 60° \times \left(\dfrac{G-B}{C} \bmod 6\right) & X_{\max} = R \ 60° \times \left(\dfrac{B-R}{C} + 2\right) & X_{\max} = G \ 60° \times \left(\dfrac{R-G}{C} + 4\right) & X_{\max} = B \end{cases}$$

Why OKLCH Is Different

OKLCH solves a fundamental problem with HSL: in HSL, different hues at the same lightness value look dramatically different in perceived brightness. Yellow at hsl(60 100% 50%) appears far brighter to the human eye than blue at hsl(240 100% 50%). OKLCH is built on the OKLab perceptual color model, which ensures that two colors at the same Lightness ($L$) value genuinely appear equally bright to the human eye.

This makes OKLCH especially valuable for design systems and accessibility-focused work where consistent visual weight matters.

---

Declaring Colors in Modern CSS

Modern browsers support a unified functional syntax that drops commas and sets opacity with a slash:

.element {
  background-color: rgb(59 130 246);           /* Modern — no commas */
  border-color:     hsl(217 91% 60% / 0.5);    /* 50% opacity */
  color:            oklch(60% 0.25 250);        /* Perceptually uniform */
  outline-color:    hwb(217 23% 4%);            /* Whiteness / Blackness */
}

Adding Opacity to HEX

You can add a two-character alpha suffix to any 6-digit HEX code. 00 is fully transparent, FF is fully opaque, and 80 is approximately 50%:

.overlay { background-color: #3B82F680; } /* ~50% transparent blue */

---

When to Use Each Format: A Quick Decision Guide

• HEX — Default for static design handoff. Most designers use it, most editors support it.
• HSL — Use when you need to programmatically adjust brightness or saturation in JavaScript or CSS calc(). Ideal for generating hover states.
• OKLCH — Use for new design systems where perceptual color consistency matters, especially across a wide palette of hues.
• RGB — Use when interfacing with animation libraries, canvas APIs, or hardware color outputs that work in 0–255 space.
• CMYK — Use only for print handoff. Browsers convert it to RGB before rendering anyway.

---

Privacy Note

Converting brand color palettes and theme configurations involves private design data. FluxToolkit handles all mathematical conversions client-side using JavaScript in your browser. None of your inputs or outputs are sent to our servers. Your assets stay completely private.

---

Frequently Asked Questions

Which format is best for dark mode?

HSL or OKLCH. Both let you modify lightness independently of hue, which is exactly what you need when scaling dark mode values from your light mode palette.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space where identical Lightness values appear genuinely equally bright across different hues. HSL does not guarantee this — yellow looks brighter than blue at the same HSL lightness. OKLCH is the modern choice for consistent, accessible design systems.

How do I add transparency in HEX?

Append a two-character alpha value to any 6-digit HEX code. Values range from 00 (transparent) to FF (opaque). #3B82F680 is approximately 50% transparent.

Can browsers display CMYK?

No. Displays are RGB devices. Browsers convert any CMYK declaration to RGB internally. CMYK is only meaningful for physical print output.

Does the converter work offline?

Yes. All conversions run locally. Once the page loads, you can convert colors without an internet connection.

Is my color data sent to a server?

No. All calculations happen in your browser. Your palette stays private.

---

Convert Colors Free — No Sign-Up Required

Paste any color format and get instant conversions. FluxToolkit is entirely browser-based — no account, no sign-up, no paywall.

Convert Your Colors Now →

---

Related Articles

• Color Contrast Checker: Audit WCAG Accessibility — Test if your converted colors pass contrast audits.
• Tint and Shade Generator: Build CSS Color Scales — Expand a single color into a full design system scale.
• CSS Gradient Generator Guide — Combine color formats in gradient declarations.