OKLCH is a perceptually uniform color space supported in modern CSS. It provides better color manipulation than HSL because equal steps in lightness/chroma produce visually equal color changes.

Which color format should I use in CSS?

HEX is the most common. HSL is great for programmatic color manipulation. OKLCH is the newest and most perceptually accurate option, supported in all modern browsers.

How do I convert HEX to RGB?

Split the hex code into three pairs: #3b82f6 → 3b, 82, f6. Convert each from hexadecimal to decimal: 3b=59, 82=130, f6=246. Result: rgb(59, 130, 246). This tool does the conversion instantly -- just paste your hex code.

What is the difference between HSL and OKLCH?

HSL (Hue, Saturation, Lightness) is widely supported but not perceptually uniform -- equal lightness steps look visually unequal across different hues. OKLCH (Lightness, Chroma, Hue in the OKLab space) is perceptually uniform, meaning a 10% lightness increase looks the same regardless of the hue. OKLCH is better for generating accessible color scales and design tokens.

Which color format should I use in CSS?

HEX for static colors in stylesheets (most readable). RGB or HSL when you need to manipulate opacity or generate colors programmatically. OKLCH for modern design systems where perceptual consistency matters -- it is supported in all modern browsers as of 2023 and is the recommended format in CSS Color Level 4.

Color Converter

Convert colors between HEX, RGB, HSL, and OKLCH formats.

How it works

1
Paste your input

Paste the code, text, or value you want to process with Color Converter.
2
Run the conversion

Use the tool controls to generate, convert, validate, or inspect the result instantly.
3
Copy output

Copy the final output and use it in your app, script, or workflow.

Common use cases

HEX to RGB

#3b82f6
RGB to HSL

rgb(59, 130, 246)

About This Tool

Convert colors bidirectionally between HEX, RGB, HSL, and OKLCH formats. See a live color preview, copy any format with one click, and use the built-in color picker to select colors visually.

HEX (#3b82f6) is the most common format in CSS and design tools. RGB (59, 130, 246) is useful for programmatic color manipulation and opacity control. HSL (217°, 91%, 60%) is intuitive for adjusting lightness and saturation. OKLCH is the newest CSS color space -- perceptually uniform, meaning equal steps in lightness produce visually equal changes, making it ideal for design systems and accessible color scales.

All modern browsers support HEX, RGB, and HSL. OKLCH is supported in Chrome 111+, Firefox 113+, and Safari 15.4+. For design systems, OKLCH is increasingly preferred because it produces more consistent color ramps.

More examples

Examples

HEX to RGB

Input

#3b82f6

Output

rgb(59, 130, 246)

RGB to HSL

Input

rgb(59, 130, 246)

Output

hsl(217, 91%, 60%)

Frequently Asked Questions

What is OKLCH?: OKLCH is a perceptually uniform color space supported in modern CSS. It provides better color manipulation than HSL because equal steps in lightness/chroma produce visually equal color changes.
Which color format should I use in CSS?: HEX is the most common. HSL is great for programmatic color manipulation. OKLCH is the newest and most perceptually accurate option, supported in all modern browsers.
How do I convert HEX to RGB?: Split the hex code into three pairs: #3b82f6 → 3b, 82, f6. Convert each from hexadecimal to decimal: 3b=59, 82=130, f6=246. Result: rgb(59, 130, 246). This tool does the conversion instantly -- just paste your hex code.
What is the difference between HSL and OKLCH?: HSL (Hue, Saturation, Lightness) is widely supported but not perceptually uniform -- equal lightness steps look visually unequal across different hues. OKLCH (Lightness, Chroma, Hue in the OKLab space) is perceptually uniform, meaning a 10% lightness increase looks the same regardless of the hue. OKLCH is better for generating accessible color scales and design tokens.
Which color format should I use in CSS?: HEX for static colors in stylesheets (most readable). RGB or HSL when you need to manipulate opacity or generate colors programmatically. OKLCH for modern design systems where perceptual consistency matters -- it is supported in all modern browsers as of 2023 and is the recommended format in CSS Color Level 4.

Related Guides

Color Contrast and Accessibility: Meeting WCAG Guidelines

7 min read

Color Contrast and Accessibility: A Practical Guide to WCAG Compliance

6 min read

Discover More Tools

View all Developer Tools →

CSS Unit Converter

Convert between px, rem, em, vw, vh, %, and pt.

Aspect Ratio Calculator

Calculate width, height, and ratios for video and responsive design.

Base64 Encode & Decode

Encode text to Base64 or decode Base64 to text.

JSON Formatter & Validator

Format, validate, and prettify JSON instantly.