Convert HEX, RGB, HSL, HSV, and CMYK color values instantly. Pick a color, generate tints and shades, check contrast, and copy values for CSS, UI design, or print workflows.
Click any swatch to use it as the active color.
HEX and RGB represent the same digital color in different notations. RGB uses decimal red, green, and blue values, while HEX stores those values in hexadecimal form such as #FF0000.
HSL stands for Hue, Saturation, and Lightness. It is useful for design work because it makes it easier to adjust color tone and brightness visually.
HSV stands for Hue, Saturation, and Value. It is similar to HSL and is often used in design tools and color pickers where brightness-based control is preferred.
CMYK stands for Cyan, Magenta, Yellow, and Key or Black. It is mainly used for print design because printing relies on ink mixing rather than light-based RGB color.
Yes. Enter any valid HEX code and this tool instantly converts it into RGB, HSL, HSV, and CMYK values for free.
This free online color converter is designed for web designers, frontend developers, graphic designers, students, and creators who need quick color format conversion without opening heavy design software. It lets you convert between HEX, RGB, HSL, HSV, and CMYK in one place, with a live picker, generated tints and shades, a contrast checker, and one-click copy for CSS values.
You can use this tool to prepare CSS color values, generate shade palettes for user interfaces, estimate print-friendly CMYK values, and quickly test contrast for readable text on colored backgrounds. The built-in picker and palette chips make the workflow considerably faster than manually calculating each format by hand for real design and development projects.
Modern design and development work touches several different color formats, each suited to a different context:
Different tools and contexts expect different formats, and needing to convert between them is a routine part of design and development work. A brand guideline document might specify a color only in CMYK because it was written for print, but a web developer implementing that brand on a website needs the equivalent HEX or RGB value. A designer working in HSL to create a consistent set of five shades of a brand color might need to hand off the final HEX codes to a developer who will paste them directly into a CSS file. This tool keeps all five formats in sync at once — changing any one of them instantly recalculates the rest, so you're never stuck manually computing a conversion or guessing at an approximate match.
The Tints & Shades palette on this page automatically generates a spectrum of lighter and darker variations of your active color — tints move toward white, shades move toward black — giving you an instant starting point for building a cohesive color system around a single base color. This is a common design task: most UI design systems need not just a primary brand color, but a range of lighter and darker variants for hover states, disabled states, backgrounds, borders, and text, all derived consistently from the same base hue. Clicking any generated swatch instantly loads it as the new active color across every format field, letting you explore a palette interactively rather than recalculating each variant by hand.
The tool automatically calculates a relative luminance value for your active color and recommends whether black or white text would be more readable on top of it, displayed both in the swatch itself and in the "Recommended Text" stat. This is a quick, practical check for anything from button design to banner text — placing dark text on a dark background (or light text on a light background) is one of the most common and easily avoided accessibility and readability mistakes in interface design, and this feature flags the safer choice instantly as you adjust the color.
Alongside the numeric conversions, the tool also identifies the closest common named color to whatever custom shade you've selected — useful for quickly communicating a color verbally ("it's basically a deep navy blue") even when the exact HEX value is something more precise and less memorable like #0B1D42. This uses a straightforward color-distance calculation across a curated list of common named colors to find the closest visual match.
Beyond individual format copy buttons, the tool includes a "Copy CSS Vars" option that outputs a ready-to-paste block of CSS custom properties (HEX, RGB, and HSL variants of the active color), and a "Copy All" option that outputs every format at once in a clean, labeled block — handy for design handoff documents, style guides, or quickly dropping a full color specification into a ticket or chat message without retyping each value by hand.
Every conversion, palette generation, and contrast calculation in this tool runs entirely in your browser using JavaScript math — no color values are ever sent to a server. This makes the tool equally suitable for public brand colors and for unreleased or confidential design work you'd rather not upload anywhere.
Of the formats supported here, HSL tends to be the most intuitive for making deliberate color adjustments by hand, because its three components map closely to how people naturally describe color changes. Wanting a color "a bit lighter" means increasing Lightness; wanting it "more vivid" or "more muted" means increasing or decreasing Saturation; and changing the color family entirely (blue to purple to red) means adjusting Hue. This is why many CSS-based theming systems and design tools expose HSL sliders even when the underlying stored value is HEX — it's simply easier to reason about a controlled adjustment in HSL terms than to guess at the equivalent HEX or RGB shift directly.