Free Color Converter
Convert a color between HEX, RGB, HSL, HSV and CMYK. Pick or paste a color and read it in every format at once, build shades and tints, check text contrast, and copy any value as CSS. It all runs in your browser.
Shades and tints
Lighter tints on the left, your color in the middle, darker shades on the right. Click any step to make it the current color.
Convert in four steps.
No convert button, no page reload and no upload. Pick or paste a color and every format updates as you type.
Pick or paste a color
Drag the picker, or type a value into any field. Paste a HEX code, an rgb() string, an hsl() string, whatever you have.
Read it in every format
HEX, RGB, HSL, HSV and CMYK all update together the moment you change one. No convert button, no reload.
Tune it
Nudge the alpha for transparency, or click a lighter or darker step to build a quick shade and tint range from your base color.
Copy and go
Copy any format as a ready-to-paste CSS string in one tap. It drops straight into your stylesheet, design tool or code.
Five formats, one color.
The same color, side by side in the models you actually use, from the HEX code on the web to the CMYK mix for print.
HEX
The six-digit code you see everywhere on the web, like #EE7C24. Add two more digits for transparency. This is what most CSS and design tools expect.
RGB / RGBA
Red, green and blue from 0 to 255, the way screens actually mix light. RGBA adds an alpha channel for see-through color.
HSL / HSLA
Hue, saturation and lightness. The friendliest model for tweaking a color by hand, since lighter and darker is just one number to move.
HSV / HSB
Hue, saturation and value, also called HSB for brightness. The model behind most color pickers in design software.
CMYK
Cyan, magenta, yellow and key (black), as percentages. The ink model for print, so you can see roughly how a screen color maps to paper.
Everyday color work, sorted.
Turn a HEX into RGB for code
A design hands you #EE7C24 but your canvas, shader or older stylesheet wants rgb(238, 124, 36). Paste and copy the other format in a second.
Match a brand color
Read a color off one tool and reproduce it exactly in another. The same swatch in HEX, RGB and HSL keeps every surface on brand.
Build shades and tints
Start from your primary color and step lighter and darker to rough out hover states, borders and backgrounds without leaving the page.
Check text contrast
See at a glance whether white or black text reads cleanly on a color before you ship it, so labels and buttons stay legible.
Prep a color for print
Read the CMYK breakdown of a screen color to get a feel for how it will translate to ink on a flyer, box or label.
Add or read transparency
Move the alpha to build a translucent overlay, then copy it as an 8-digit HEX or an rgba() string that drops straight into CSS.
Brand colors that stay consistent?
Converting one color is easy. Holding a whole palette steady across a web app, a mobile app, PDFs, emails and a design system, so the same brand color renders the same everywhere, is a different job. That is the kind of software we build at Techliphant, shaped around how your product actually works.
Common questions.
It converts a single color between the formats you use every day: HEX, RGB and RGBA, HSL and HSLA, HSV (also called HSB) and CMYK. Pick a color or paste a value into any field, and every other format updates at once, ready to copy.
Type or paste your HEX code, for example #EE7C24, into the HEX field. The RGB field updates straight away to rgb(238, 124, 36). Press the copy button next to it to grab the string, or read the individual red, green and blue values.
Enter your rgb() values in the RGB field, or type the three numbers, and the HEX field shows the matching six-digit code instantly. If you set an alpha below 1, the HEX becomes an eight-digit code that carries the transparency.
Both start with hue, the position on the color wheel. HSL then uses saturation and lightness, where 50 percent lightness is the most vivid version of the color. HSV uses saturation and value (brightness), where 100 percent value is the brightest. HSL is handy for building lighter and darker steps by hand, while HSV matches the pickers in most design software.
Yes. Move the alpha slider to set how see-through the color is, from fully transparent to fully solid. The preview shows the color over a checkerboard so you can judge it, and the RGBA, HSLA and eight-digit HEX outputs all carry the alpha for you.
CMYK is the cyan, magenta, yellow and black ink model used for print. This tool gives you a straight mathematical conversion, which is a good guide for how a screen color maps to ink. It is not colour-managed to a specific printer or paper, so treat it as a close starting point rather than a proof.
The row under the swatch takes your current color and steps it lighter (tints) and darker (shades) in even amounts. Click any step to make it the current color and read it in every format. It is a quick way to rough out hover states, borders and background fills from one base color.
It works out the relative luminance of your color using the standard WCAG formula, then tells you whether black or white text has the stronger contrast against it. It is a fast sanity check for legibility, not a full accessibility audit, so still confirm the exact contrast ratio for text that has to meet a standard.
No. Every conversion runs in your browser using plain arithmetic. Nothing you pick or paste is sent to a server or stored, so the tool is safe for confidential brand work and keeps working even if your connection drops.
Yes. There is no account, no email and no watermark. Use it for personal or commercial work as much as you like, on a phone, tablet or computer, in any modern browser.
Private by design: this converter runs entirely in your browser. Every conversion happens on your own device in JavaScript, so nothing you pick or paste is uploaded to a server or stored anywhere. That makes it safe for confidential brand work, and it keeps working even if your connection drops.
Ready when you are
Let's build something exceptional.
Tell us about your business, your stack, and the problem you are trying to solve. We respond with a clear next step usually a 30-minute discovery call, no fluff.