Color Converter
Convert HEX to RGB and RGB to HEX with instant two-way synchronization. Type or paste any hex code or adjust individual red, green, and blue channels with live color preview and one-click copy.
Royal Blue
Type or paste any hex (e.g. #3B82F6 or FFF)
How It Works
Paste Any Color Format
Input any raw hex code, rgb/rgba function, hsl/hsla string, oklch CSS, cmyk percentages, or recognized CSS color name into the universal search bar. The converter auto-detects the format instantly.
Live Two-Way Conversion
All format cards update in real time. Adjust individual channel inputs (Red, Green, Blue, Lightness, Chroma, Hue, Cyan, Magenta) or slide the alpha opacity to instantly export production-ready CSS and Tailwind codes.
Color Spaces & Format Reference
| Color Space | Best Used For | Syntax Example | Channel Ranges |
|---|---|---|---|
| HEX | Web markup & UI design tokens | #3B82F6 | 00 to FF (Base 16) |
| RGB / RGBA | Digital screen rendering & CSS | rgb(59, 130, 246) | R, G, B: 0 - 255 |
| HSL / HSLA | Human-intuitive lightness tuning | hsl(221, 83%, 60%) | H: 0-360°, S/L: 0-100% |
| HSV / HSB | Graphic software (Figma, Photoshop) | hsv(221, 76%, 96%) | H: 0-360°, S/V: 0-100% |
| OKLCH | CSS Color 4 & Perceptual uniform gradients | oklch(0.623 0.214 259.8) | L: 0-1, C: 0-0.4, H: 0-360° |
| CMYK | Offset printing & commercial packaging | cmyk(76%, 47%, 0%, 4%) | C, M, Y, K: 0-100% |
Why Use OKLCH in Modern Web CSS?
Legacy HSL has an infamous perceptual flaw: yellow at 50% lightness appears vastly brighter to human eyes than blue at 50% lightness. OKLCH (Oklab Lightness Chroma Hue) is perceptually uniform: changing hue maintains consistent perceived brightness and contrast. It also accesses wide-gamut Display P3 colors that cannot be rendered in sRGB.
Screen RGB vs. Print CMYK
Screens emit light using an additive color system (RGB), where combining Red, Green, and Blue produces White. Physical inks use a subtractive model (CMYK), where Cyan, Magenta, Yellow, and Black absorb light. Converting RGB to CMYK ensures your brand assets match when printed on physical stationery or marketing collateral.
Frequently Asked Questions
How do I convert a 3-digit HEX code to 6-digit RGB?▼
A 3-digit hex shorthand like #F0A duplicates each character: F becomes FF, 0 becomes 00, and A becomes AA, resulting in #FF00AA. In RGB, this converts to rgb(255, 0, 170). Our converter detects shorthand automatically.
What is the 8-digit HEX code format?▼
The last two hex characters in an 8-digit hex code represent the alpha (transparency) channel from 00 (0% fully transparent) to FF (100% fully opaque). For example,#3B82F680 represents a 50% transparent blue.
How is WCAG contrast ratio measured?▼
WCAG 2.1 evaluates relative luminance to calculate a contrast ratio between 1:1 (lowest) and 21:1 (pure black on pure white). Body text requires at least 4.5:1 (AA level) or 7:1 (AAA level), while large headlines require at least 3:1 (AA Large).
Can I convert CMYK directly back to digital HEX or RGB?▼
Yes! You can paste a CMYK string like cmyk(76%, 47%, 0%, 4%) directly into the input, or adjust the C, M, Y, and K channel inputs to see immediate conversion to HEX, RGB, HSL, and OKLCH.