Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats.

HEX

#2563EB

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

CMYK

cmyk(84%, 58%, 0%, 8%)

4 Formats

HEX, RGB, HSL, CMYK conversion.

Live Preview

Color swatch updates in real-time.

Copy Result

One-click copy to clipboard.

Client-side

All processing in your browser. No data uploaded.

About Color Converter

Color Converter translates any color value between four of the most common color formats used in web and graphic design: HEX, RGB, HSL, and CMYK. Different contexts demand different formats — CSS stylesheets often use HEX or RGB, design tools like Figma and Sketch work natively with HSL, and print production workflows require CMYK. Switching between them manually is error-prone arithmetic; this tool does it instantly and accurately. Type or paste any valid color in HEX (#2563EB or shorthand #ABC), RGB (rgb(108, 92, 231)), or HSL (hsl(249, 75%, 63%)) format into the input, and all four representations update in real time alongside a live color swatch so you always know you have the right shade. Click the copy button next to any format to grab that value for use in your project.

How to Use Color Converter

Type or paste your color value into the input field. Accepted formats: HEX (#RRGGBB or #RGB), RGB (rgb(r,g,b)), and HSL (hsl(h,s%,l%)).
The color swatch on the left updates live so you can visually confirm the color.
All four output formats — HEX, RGB, HSL, and CMYK — appear instantly below.
Click the "Copy" button next to any format to copy that specific value to your clipboard.
Paste the copied value into your CSS, design tool, or print specification.

Frequently Asked Questions

What formats can I type as input?

You can enter HEX (e.g., #2563EB or #26B), RGB (e.g., rgb(37, 99, 235)), or HSL (e.g., hsl(220, 83%, 53%)).

Why does CMYK use percentages?

CMYK (Cyan, Magenta, Yellow, Black) values represent ink coverage percentages. Each channel ranges from 0% (no ink) to 100% (full ink).

Is the CMYK conversion accurate for professional printing?

The conversion uses a standard mathematical formula based on the sRGB color space. For precise print production, use a color-managed workflow in a dedicated application.

What is HSL and when should I use it?

HSL (Hue, Saturation, Lightness) is intuitive for design work because you can adjust brightness and vibrancy independently of the hue. It is natively supported in all modern CSS.

Can I enter an 8-character HEX with alpha, like #2563EBFF?

The tool currently handles 6-character and 3-character HEX without alpha. For alpha channels, use rgba() in CSS directly.

Free Ebook

Top 10 Free Tools Every Developer Needs

Boost your productivity instantly. Get our exclusive cheatsheet featuring the most essential web utilities you didn't know you needed, delivered straight to your inbox.

We respect your inbox. Unsubscribe at any time.