FREE TOOL · AUTO-DETECT INPUT
Color Converter — HEX, RGB, HSL, HSV, CMYK, OKLCH
Paste a color in any format and read out every other format at once. Includes the closest CSS named color and copy-ready snippets for CSS variables, Tailwind, SCSS, Swift, Android, and Flutter.
Detected: hex
All color formats
#7C3AED
R 124 · G 58 · B 237
rgb(124, 58, 237)
124, 58, 237
hsl(262, 83%, 58%)
H 262.1° · S 83.3% · L 57.8%
hsv(262, 76%, 93%)
H 262.1° · S 75.5% · V 92.9%
cmyk(48%, 76%, 0%, 7%)
C 48% · M 76% · Y 0% · K 7%
oklch(54.13% 0.2466 293.01)
L 0.541 · C 0.247 · H 293°
oklab(54.13% 0.0964 -0.227)
L 0.541 · a 0.096 · b -0.227
CSS named color
bluevioletClosest match
Drop into your codebase
--brand: #7c3aed;bg-[#7c3aed] text-[#7c3aed]$brand: #7c3aed;UIColor(red: 0.486, green: 0.227, blue: 0.929, alpha: 1.0)Color.parseColor("#7C3AED")Color(0xFF7C3AED)Three steps to every format
Paste any color
Hex, rgb(), hsl(), hsv(), cmyk(), oklch(), oklab(), or a CSS name like "tomato" — we detect the format automatically and show you which one was matched.
Read every format at once
All seven formats render side by side with one-click copy. The numeric breakdown sits beneath each line so you don't need a calculator.
Drop into your codebase
Pre-rendered snippets for CSS variables, Tailwind arbitrary values, SCSS, Swift UIColor, Android Color, and Flutter Color save you the formatting work.
Pick the right tool
Which format should I actually use?
Most converters treat the formats as equal. They are not — each was designed for a different problem, and using the wrong one is how you end up with banding in dark mode or muddy colors in print.
HEX
Use for
Anything that gets handed between humans and machines: brand guidelines, Figma swatches, Slack pastes, configuration files.
Avoid for
Generating tints or shades programmatically — you cannot reason about lightness from a hex string.
RGB / RGBA
Use for
Working with pixel data, image manipulation, or any case where you need to inspect channel-by-channel.
Avoid for
Building accessible color scales — RGB has no concept of perceptual lightness.
HSL
Use for
Quick manual tweaks in code where you want to nudge a hue or pull saturation down.
Avoid for
Design tokens and color scales. HSL "lightness" is not perceptually uniform — 50% lightness yellow and 50% lightness blue look nothing alike in brightness.
HSV / HSB
Use for
Inside color-picker UIs, where users want hue/saturation control with a value slider for brightness.
Avoid for
CSS — HSV is not a valid CSS color function. Convert to HSL or OKLCH before shipping.
CMYK
Use for
Anything destined for a printing press: business cards, packaging, brochures.
Avoid for
Screen design entirely. CMYK has a smaller gamut than sRGB — vibrant on-screen colors will desaturate when converted for print.
OKLCH / OKLab
Use for
Design tokens, perceptually uniform color scales, dark-mode pairs, accessible palettes. The format CSS Color Module 4 is steering toward.
Avoid for
Older browsers without OKLCH support (Safari 15.4 and earlier) — provide an sRGB fallback via @supports or a build step.
Our take
Stop building palettes in HSL. Use OKLCH.
For two decades, designers built color scales by stepping HSL lightness from 10% to 90%. The result: yellow-50 looks washed out, blue-900 looks black, and the "neutral gray" between them looks vaguely green. The math says these are evenly spaced; your eyes say they are not.
OKLCH was built to fix exactly this. Its lightness axis is perceptually uniform — L 0.5 in red looks the same brightness as L 0.5 in blue, which means stepping by 0.05 produces a scale that actually reads as evenly spaced. Every modern design system that ships in 2026 — Tailwind v4, Radix, Material, even system colors on macOS Sonoma — is migrating to it.
Keep HEX for handoff and RGB for pixel work. But when you sit down to design a palette, switch to OKLCH. Your accessibility audits will improve overnight.