Color Converter & Picker

Pick a color or paste any format. All representations stay in sync — hex, RGB, HSL, OKLCH, and a CSS-variable shortcut.

What this does

• Two-way conversion. Edit any field; the others auto-update. Picker integrates with the OS color dialog.
• OKLCH (CSS L4). The new perceptually-uniform color space, computed from your RGB values.
• One-click CSS variable. --brand: #...; ready to drop into your styles.
• WCAG contrast checker. See the contrast tool.

How it works

Every field describes the same color, so the tool keeps one value and redraws the rest from it. Type in the hex, RGB, or HSL field, use the picker, or click a preset, and the input is turned into three numbers from 0 to 255 for red, green, and blue. Hex, HSL, OKLCH, and the CSS variable line are all written from those three numbers.

Hex is the same three numbers written in base 16, two digits each. HSL describes them as a hue angle, a saturation, and a lightness. The HSL field is rounded to whole numbers, so typing a hex, reading the HSL, and typing that HSL back can land one step away from where you started. Everything runs in your browser. Nothing is uploaded, and the recent-colors row is stored only in this browser.

What is OKLCH, and how is it different from hex and HSL?

Hex and HSL are two ways of writing the same sRGB numbers. HSL is easier to adjust by hand, but its lightness is not how bright a color looks: hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share a lightness of 50% and look very different.

OKLCH is built on the OKLab color space, which is designed so that equal steps in its numbers look like roughly equal steps to the eye. L is perceived lightness (0% to 100%), C is chroma, or how colorful it is, and H is a hue angle in degrees. Unlike hex, OKLCH can describe colors outside the sRGB range a hex code can hold. This tool shows OKLCH as a read-only value computed from your RGB numbers. It converts hex, RGB, or HSL to OKLCH, but it does not take OKLCH as input.

Checking text and background pairs? Use the WCAG contrast checker.

Why this beats search-result encoders

Most 'hex to rgb' results convert one format at a time. This tool shows every format at once, uploads nothing, and uses your browser's native color picker.

Common color formats

Worked examples

Hex to RGB, HSL, and OKLCH: #7c3aed

7c → 7 × 16 + 12 = 124
3a → 3 × 16 + 10 =  58
ed → 14 × 16 + 13 = 237   →  rgb(124, 58, 237)

HSL:   hsl(262, 83%, 58%)     (262.1°, 83.3%, 57.8% before rounding)
OKLCH: oklch(54.1% 0.247 293.0)

Expanding shorthand: #f80

#f80  →  each digit doubled  →  #ff8800
rgb(255, 136, 0)   hsl(32, 100%, 50%)   oklch(74.4% 0.181 56.5)

Only colors whose pairs repeat have a shorthand. #ff8800 does; #ff8801 does not.

HSL to RGB and hex: hsl(150, 60%, 40%)

R = 40.8 → 41    G = 163.2 → 163    B = 102
rgb(41, 163, 102)  =  #29a366
OKLCH: oklch(63.5% 0.140 156.2)

Adding transparency

Alpha is separate from the color. In CSS, #2563eb at 50% opacity can be written rgba(37, 99, 235, 0.5) or as 8-digit hex #2563eb80, where 80 is 128 out of 255 (0.502). This tool works with the opaque color only; add the alpha in your CSS.

In code

/* CSS — these all render as #2563eb (the HSL line rounds to within one step) */
.brand { color: #2563eb; }
.brand { color: rgb(37, 99, 235); }
.brand { color: hsl(221, 83%, 53%); }
.brand { color: oklch(54.6% 0.215 262.9); }

/* JavaScript — quick hex → rgb */
function hexToRgb(hex) {
  const m = hex.replace(/^#/, "");
  return {
    r: parseInt(m.slice(0,2), 16),
    g: parseInt(m.slice(2,4), 16),
    b: parseInt(m.slice(4,6), 16),
  };
}

/* Python */
import re
def hex_to_rgb(s):
    s = s.lstrip("#")
    return tuple(int(s[i:i+2], 16) for i in (0, 2, 4))

Common pitfalls

• Hex case is irrelevant. #2563EB = #2563eb. Lowercase is conventional.
• Don't confuse HSL with HSV. HSL ranges 0%–100% on L; HSV ranges 0%–100% on V (value). They look similar but produce different colors for the same numbers.
• RGB integer vs float. CSS uses 0–255 integers; image-processing libraries often use 0.0–1.0 floats. Make sure both ends agree on the range.
• Hex can carry alpha. #2563eb80 is about 50% opacity. This tool works with opaque colors only, so convert the alpha separately.

Try the related tools

• WCAG contrast checker — accessibility-grade color pairs
• Hex → RGB — focused converter
• RGB → Hex — same, the other direction
• Hex vs RGB vs HSL vs OKLCH — when each is right
• What is a hex color? — fundamentals