Color Converter
Convert colors between HEX, RGB, HSL, and OKLCH instantly. Pick a color visually or enter any value and see all formats update in real time.
🎨 Visual picker
Click the color swatch to open a full visual color picker. See all format values update instantly as you drag.
🔢 HEX input
Paste any 3 or 6 digit HEX value and get RGB, HSL, and OKLCH equivalents immediately.
📋 One-click copy
Copy any color format to your clipboard with a single click — ready to paste straight into your CSS.
🌈 Common swatches
Quick access to common web colors so you can start from a known value and adjust from there.
⚡ OKLCH support
OKLCH is the modern CSS color format with perceptually uniform lightness. Great for design systems and accessible color palettes.
🔒 100% private
All conversions happen in your browser. No color data is ever sent anywhere.
How to use the Color Converter
HEX, RGB, HSL, and OKLCH — when to use each
HEX (#FF5733) is the most common format for web colors — compact and universally supported. RGB (rgb(255, 87, 51)) is useful when you need to manipulate individual channels in JavaScript. HSL (hsl(11, 100%, 60%)) is the most human-readable — hue is the color, saturation is the intensity, and lightness is how bright it is. OKLCH is a perceptually uniform color space ideal for design systems where consistent visual contrast matters.
Understanding HSL for design work
HSL makes it easy to create color variations programmatically. To create a lighter version of a color, increase the lightness value. To create a muted version, decrease saturation. To create a complementary color, add 180 to the hue. This is why CSS custom property-based design systems often store colors in HSL — it makes generating hover states, disabled states, and focus rings straightforward without a preprocessor.
Color contrast and accessibility
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. Dark text on light backgrounds typically provides better contrast than the reverse at equivalent color values. Tools like this converter help you identify the exact values you need to pass to a contrast checker. For accessible design, aim for at least AA compliance on all interactive elements.
Working with opacity and alpha channels
Colors with opacity use the RGBA format — rgba(255, 87, 51, 0.5) is 50% transparent. In CSS you can also use hex with alpha: #FF573380 where the last two digits are the alpha channel in hex. The CSS color-mix() function and custom properties make it easy to generate consistent transparent variants of your brand colors.