—

Edit any field below to convert

White text — —

Black text — —

Color picker

Click the swatch above to open the browser color picker

HEX

RGB

HSL

H°

HSV

H°

OKLCH

H°

CSS

Tints & Shades Click any swatch to load it

CSS color formats explained

Choosing the right color format for your project

Modern CSS supports many color formats, each suited to different scenarios. HEX is the most widely used in web development and is supported everywhere. RGB maps directly to screen hardware. HSL is human-friendly — adjusting hue, saturation, and lightness is intuitive when designing palettes. OKLCH is the newest addition to CSS, offering perceptually uniform color manipulation and a much wider gamut for modern displays, making it the preferred format for design systems targeting P3 and HDR screens.

HEX — the web standard

6-digit hex: #rrggbb — most common format
8-digit hex: #rrggbbaa — includes alpha channel
Shorthand: #rgb when digits repeat (#aabbcc → #abc)
Best for: static colors, design tokens, icon fills

RGB — screen native

Each channel 0–255 (or 0%–100%)
Modern syntax: rgb(37 99 235) (space-separated)
Maps directly to display hardware channels
Best for: dynamic colors computed in JS

HSL — designer-friendly

Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
Intuitive for creating color variations
Easy to lighten/darken by adjusting L value
Best for: CSS custom properties, theming

OKLCH — the modern choice

Perceptually uniform — equal L changes look equal
Supports P3 wide-gamut and HDR displays
Supported in all modern browsers (2023+)
Best for: design tokens, accessible color systems

100% private & client-side

All conversions run entirely in your browser
No color data is ever sent to a server
Safe for proprietary brand colors and design tokens
Works fully offline after initial page load

How to use this tool

Enter any color value — HEX, RGB, HSL, or OKLCH
All other formats update instantly as you type
Use the color picker for visual input
Click any value to copy it to your clipboard

Choosing the right color format for your project

For most web projects today, HEX remains the safest default — it's universally supported, compact, and understood by every tool in the ecosystem. Use RGB or RGBA when you need to control opacity dynamically in CSS or JavaScript, or when constructing colors programmatically. HSL is the best choice for building design systems where you want to express lightness and saturation as readable numbers — it makes creating consistent color palettes and tints much more intuitive than HEX arithmetic.

If you are building a modern design system targeting up-to-date browsers (Chrome 111+, Firefox 113+, Safari 16.4+), OKLCH offers the most perceptually uniform model available in CSS. Unlike HSL, OKLCH ensures that two colors with the same lightness value actually appear equally light to the human eye, which is invaluable for accessible contrast ratios and harmonious palette generation. Regardless of which format you use in CSS, keeping a HEX reference in your design tokens is still recommended for compatibility with third-party tools and older environments.