OKLCH is a perceptually-uniform color space — equal numeric distances feel like equal visual distances. Modern CSS supports it natively and design tools like Figma 2024+ are adopting it for smoother gradients and consistent contrast.

Modern CSS uses space-separated 'rgb(59 130 246)'. Legacy CSS and older browsers expect comma-separated 'rgb(59, 130, 246)'. Both produce the same color.

What about alpha (RGBA / HSLA)?

This tool focuses on opaque colors. For transparency, append '/ 0.5' inside the modern syntax (e.g. 'rgb(59 130 246 / 0.5)') or use the legacy 'rgba(…, 0.5)' form.

Is HSV the same as HSB?

Yes — HSV (Value) and HSB (Brightness) are two names for the exact same color model. CSS doesn't accept hsv() directly; use HSL for stylesheets.

Color Format Converter

Pick a color with the native color picker or paste a HEX value, and instantly see it in every common CSS format — HEX, modern space-separated RGB, legacy comma RGB, HSL, HSV, OKLCH (the perceptually-uniform color space modern CSS prefers), and a ready-to-paste CSS custom property. Each value has its own copy button.

—

PickerHEX

Preview

HEX#3B82F6
RGBrgb(59 130 246)
RGB (legacy)rgb(59, 130, 246)
HSLhsl(217 91% 60%)
HSVhsv(217, 76%, 96%)
OKLCHoklch(62.3% 0.188 259.8)
CSS var--color: #3B82F6;

How to use

Use the color picker or paste a HEX value (3 or 6 digits, # optional).
Every format updates instantly.
Copy the format you need with the button on the right of each row.

Frequently asked questions

What is OKLCH?: OKLCH is a perceptually-uniform color space — equal numeric distances feel like equal visual distances. Modern CSS supports it natively and design tools like Figma 2024+ are adopting it for smoother gradients and consistent contrast.
Why two RGB rows?: Modern CSS uses space-separated 'rgb(59 130 246)'. Legacy CSS and older browsers expect comma-separated 'rgb(59, 130, 246)'. Both produce the same color.
What about alpha (RGBA / HSLA)?: This tool focuses on opaque colors. For transparency, append '/ 0.5' inside the modern syntax (e.g. 'rgb(59 130 246 / 0.5)') or use the legacy 'rgba(…, 0.5)' form.
Is HSV the same as HSB?: Yes — HSV (Value) and HSB (Brightness) are two names for the exact same color model. CSS doesn't accept hsv() directly; use HSL for stylesheets.

Guides on this topic

Colour Contrast and Accessible Palettes What the WCAG contrast ratios actually measure, why a colour that looks fine can still fail, how colour blindness changes the picture, and how to build a palette that holds up.

Related tools

HSL Color Picker

Drag hue, saturation, lightness, and alpha sliders to dial in a color — copy HEX, RGB, HSL, or a Tailwind arbitrary value.

Color 0 0

Random Color Generator

Generate a grid of random colors in HEX, RGB or HSL — pick how many, copy any value with one click, and regenerate instantly for design inspiration.

Random 0 0

OKLCH Color Picker

Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.

Color 0 0

CSS color-mix() Preview (Interpolation Space Comparison)

Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.

Color 0 0

Wavelength to Color Converter (nm → sRGB)

Convert a light wavelength in nanometres (380–780 nm — the visible spectrum) to an approximate sRGB color, with a clickable rainbow gradient bar and reference Fraunhofer absorption lines from real solar spectroscopy.

Color 0 0

CMYK ↔ RGB Color Converter (Print Color Space)

Convert between RGB / hex screen colors and CMYK percentages for print, with simple, GCR (Gray Component Replacement) and UCR (Under Color Removal) black-generation strategies, channel separation preview, and a total ink coverage readout.

Color 0 0