HEX, RGB, HSL & CMYK Color Converter
Paste any color and convert live between HEX, RGB, HSL, HSV/HSB and CMYK. Alpha ...Paste any color and convert live between HEX, RGB, HSL, HSV/HSB and CMYK. Alpha support, named CSS colors and one-click copy, all in your browser.
Updated
At less than 100 percent the HEX becomes 8-digit and RGB and HSL switch to their alpha forms.
Quick answer
To convert a color between HEX, RGB, and HSL, paste any value into the input and every other format updates at once. YaliKit's converter reads hex (like #ff8800), rgb(), hsl(), named CSS colors like tomato, and 8-digit hex with alpha, then shows HEX, RGB, HSL, HSV/HSB, and CMYK side by side with a copy button on each. It runs fully in your browser, so conversions are instant and nothing is uploaded.
Everything In One Place
Why Use HEX, RGB, HSL & CMYK Color Converter?
One Input, Every Format
Paste a color once and read it back as HEX, RGB, HSL, HSV/HSB and CMYK at the same time. No mode switching and no separate hex-to-rgb and rgb-to-hex steps. Each format has its own copy button.
Accepts Anything You Paste
It understands 3, 6 and 8 digit hex, rgb() and rgba(), hsl() and hsla(), and named CSS colors like tomato or rebeccapurple. Space or comma separated values both work.
Live Sliders Both Ways
Drag the RGB or HSL sliders and the swatch and every output update as you move. Type a value and the sliders jump to match. The conversion stays in sync in both directions.
100% Private, In Your Browser
There is no server and no upload. Every conversion is plain math running locally with the same helpers our color tools are unit tested against, so it works offline too.
What You Can Do
Web Development
Turn a designer hex into rgb() or hsl() for your CSS, or grab rgba() when you need transparency.
Design Handoff
Match a color across Figma, Photoshop and code by copying the exact value in whatever format each tool wants.
Print Preparation
Convert screen RGB colors to CMYK before sending artwork to a printer so the values are print ready.
Theming And Tokens
Use HSL to reason about lightness and saturation when building consistent color tokens for a design system.
How It Works
Paste Your Color
Type or paste a value in any format into the input: a hex like #ff8800, rgb(255, 136, 0), hsl(32, 100%, 50%) or a CSS name like tomato. Or open the native picker.
Read Every Format
HEX, RGB, HSL, HSV/HSB and CMYK all appear at once and update instantly. Drag the RGB or HSL sliders, or the alpha slider, to fine tune and watch the swatch change.
Copy And Use
Click the copy button next to any format to put it on your clipboard. Paste it straight into your CSS, design tool, print file or code.
Pro Tips
HSL For Quick Tweaks
Need a color a little lighter or darker? Keep H and S the same and change L. HSL makes lightness and saturation adjustments far more intuitive than editing raw RGB.
8-Digit Hex For Opacity
The last two hex digits are alpha. #ff8800cc is orange at about 80 percent opacity. Drag the alpha slider and the HEX output switches to the 8 digit form automatically.
CMYK Cannot Match Every Screen Color
Very saturated blues, greens and oranges live outside the CMYK gamut, so they print duller than they look on screen. Check the CMYK preview before sending to print.