Color Converter Guide
Everything you can do with the OmniColor color converter — converting between HEX, RGB, HSL, HSV and CMYK in a single tool.
What Is a Color Converter?
A color converter translates a color from one format to another — for example, HEX to RGB, RGB to HSL, or CMYK to HEX. All formats describe the same color in the sRGB color space; they are just different ways of writing it.
OmniColor's color converter shows all five major formats at once: HEX, RGB, HSL, HSV and CMYK. Change any value and all others update instantly.
Opening the Tool
How to Use It
Option 1: Enter a HEX value
Type or paste a HEX code into the first field. All other formats update instantly.
Option 2: Enter RGB values
Enter R, G and B values (0–255) in their fields. HEX, HSL, HSV and CMYK update instantly.
Option 3: Enter HSL values
Enter H (0–360), S (0–100) and L (0–100). The other formats update.
Option 4: Enter CMYK values
Enter C, M, Y and K as percentages. The RGB, HEX, HSL and HSV values update (approximately, since CMYK is approximate).
Copy any format
Each output field has a Copy button. Click to copy that format's exact value to your clipboard.
The Five Formats Explained
HEX (Hexadecimal)
Six hex digits like #155EEF. The standard in HTML and CSS. Compact, portable, universally supported.
RGB (Red, Green, Blue)
Three integers 0–255 like rgb(21, 94, 239). Used in JavaScript, canvas and WebGL. Same color as HEX, written differently.
HSL (Hue, Saturation, Lightness)
Hue 0–360, saturation and lightness 0–100% like hsl(215, 84%, 51%). The most intuitive model for palette building and design tokens.
HSV (Hue, Saturation, Value)
Hue 0–360, saturation and value 0–100% like hsv(215, 84%, 94%). Similar to HSL but uses value (brightness) instead of lightness. Common in color pickers.
CMYK (Cyan, Magenta, Yellow, Key)
Four percentages like cmyk(91%, 61%, 0%, 6%). For print work. Conversion from RGB is approximate because screen and print gamuts differ.
When to Use Each Format
| Format | Use When |
|---|---|
| HEX | Writing CSS, documenting brand colors, sharing colors with others |
| RGB | JavaScript, canvas, WebGL, dynamic color manipulation |
| HSL | Design systems, palette generation, theming, accessibility tuning |
| HSV | Building color pickers, matching Photoshop/Figma values |
| CMYK | Print work — approximate, use with ICC profiles for accuracy |
Conversion Accuracy
Lossless conversions
- HEX ↔ RGB: Exact mathematical transform
- RGB ↔ HSL: Exact transform (with rounding to integers)
- RGB ↔ HSV: Exact transform (with rounding)
These conversions round-trip perfectly (aside from 1-2 integer rounding units).
Approximate conversions
- RGB ↔ CMYK: Formula-based approximation. Real print output depends on printer, ink, paper and viewing conditions.
For print-critical work, always validate CMYK values with a physical proof.
Practical Examples
Example 1: Brand color documentation
You have a brand color specified as HEX #155EEF. To document it for a brand guide, you need HEX, RGB and CMYK versions:
- HEX: #155EEF
- RGB: rgb(21, 94, 239)
- CMYK: cmyk(91%, 61%, 0%, 6%) — for print
The converter gives you all three at once.
Example 2: Matching a design tool
Your Figma shows a color as HSL(215, 84%, 51%) but your CSS needs HEX. Enter the HSL values, copy the HEX output, paste into your stylesheet.
Example 3: Converting a print colorway to web
A brand uses CMYK(0, 100, 100, 0) for red in print. Enter those values to get the approximate RGB and HEX for your website.
Example 4: Building a color scale
You need 10 shades of a brand blue. Enter the base as HSL (215, 84, 51), then generate shades by decreasing L. The converter helps you find the exact HSL values for each shade.
Batch Conversion
Need to convert many colors at once? Use our dedicated batch tools:
- Color Palette Converter — converts entire palettes
- Palette Exporter — exports palettes as CSS, JSON, SCSS
Common Mistakes
Assuming CMYK conversion is exact
RGB has a wider gamut than CMYK. Bright saturated colors will look duller when converted and printed. Test with physical proofs for critical work.
Using HEX in code that expects RGB
Canvas and WebGL need RGB (or normalized RGB). Entering HEX where RGB is expected will fail.
Confusing HSL and HSV
HSL uses lightness (50% = pure color). HSV uses value (100% = pure color). The same "hue and saturation" produces different colors because of the third axis.
Ignoring rounding in round-trip conversions
HEX → HSL → HEX may not give the exact same HEX back, due to integer rounding. The difference is imperceptible but worth knowing for precision-critical work.