Skip to main content
Utulio
Developer Tools

Color Converter

Convert any color between HEX, RGB, HSL, and CMYK formats instantly. Use the color picker or type in any format — all others update in real time.

HEX
#
RGB
HSL
CMYK

Understanding Color Formats

Designers and developers work with colors in many formats. Web developers use HEX codes in CSS. JavaScript and Canvas APIs typically use RGB. Design tools like Figma often work in HSL or HSB. Print designers need CMYK values. Converting between them is a constant need.

The verification example: #3B82F6→ RGB(59, 130, 246) → HSL(217°, 91%, 60%). This is Tailwind CSS's blue-500 color, a popular design system choice. You can enter any known brand or design system color and get all its format equivalents instantly.

CMYK values shown here are calculated from RGB and may differ slightly from professional print software due to different color profile assumptions. For production print work, always verify colors in your design software with the correct ICC profile for your printer.

Color Converter FAQs

How do I convert HEX to RGB?
A HEX color like #3B82F6 is broken into three two-digit hex values: 3B (red), 82 (green), F6 (blue). Convert each from hexadecimal to decimal: 3B = 59, 82 = 130, F6 = 246. So #3B82F6 → RGB(59, 130, 246). This tool does the conversion automatically when you enter any color format.
What is HSL color?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on a color wheel (0°–360°): 0° is red, 120° is green, 240° is blue. Saturation is how vivid the color is (0% = gray, 100% = full color). Lightness is brightness (0% = black, 50% = normal, 100% = white). HSL is more intuitive for adjusting colors.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. Unlike RGB which is additive (for screens), CMYK is subtractive (for ink on paper). When sending files to a printer, designs must use CMYK color values. Note that not all RGB colors can be reproduced accurately in CMYK print.
Why are there different color formats?
Different systems use different color models. Screens (monitors, phones) use RGB because they emit light additively. Printers use CMYK because ink absorbs light subtractively. HEX is just a compact way to write RGB for web development. HSL/HSV is used in design tools because it matches how humans perceive color adjustments.
What's the difference between RGB and CMYK?
RGB is an additive model — combining all values at maximum gives white (255, 255, 255). CMYK is a subtractive model — combining all values at maximum gives black (100, 100, 100, 100). RGB is for screens; CMYK is for print. Converting between them can result in color shifts because their gamuts (color ranges) don't perfectly overlap.
How do I pick a color?
Use the color picker at the top of this tool — click the color swatch to open a native browser color picker. Alternatively, type directly into any format's input fields and all other formats will update instantly. You can also enter a known HEX code (like a brand color) and immediately see its RGB/HSL/CMYK equivalents.

Related Tools

developer

JSON Formatter & Validator

Format, validate, and minify JSON instantly. Private — runs entirely in your browser.

Open tool →
developer

Regex Tester

Test regular expressions in real-time with live match highlighting and capture group display.

Open tool →
developer

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 to text. UTF-8 safe, private, instant.

Open tool →