Color Converter Free Online
Convert between HEX, RGB, HSL, HSV, and CMYK with a live color preview. Pick any color or edit any field — all formats update instantly. Runs entirely in your browser.
Click swatch to pick a color
Or edit any field below — all formats update automatically.
Pro — color palette generator, contrast checker, alpha support, API access
API access · Priority queue · Team workspace
How It Works
Pick or Type
Click the color swatch to open your browser's native color wheel, choose one of the preset swatches, or type a HEX, RGB, or HSL value directly into any input field.
Auto-Convert
The tool instantly recalculates and fills all other formats — HEX, RGB, HSL, HSV, CMYK, and a CSS-ready color string — with no button needed.
Copy & Use
Click Copy next to any format to put it on your clipboard, ready to paste into CSS, Figma, Photoshop, Tailwind config, or any code editor.
Color Converter Features
Bi-directional conversion across 5 color models with live preview
5 Color Formats
HEX (#rrggbb), RGB, HSL, HSV, and CMYK — plus a ready-to-paste CSS color value. All formats are shown simultaneously in clearly labeled, copyable fields.
Native Color Picker
The swatch opens your browser's built-in color wheel, which on most systems gives you access to eyedropper, recent colors, and gradient sliders.
Bi-Directional Input
Edit the HEX, RGB, or HSL field directly and all other formats update instantly. Type a color code from any source and get all equivalents immediately.
Relative Luminance
The WCAG 2.1 relative luminance value (0 = black, 1 = white) is displayed for every color, making it easy to check perceived brightness for accessibility.
Preset Swatches
Eight common brand and design colors are available as quick-select swatches so you can instantly load any of them without typing a hex code.
100% Offline
Every conversion is calculated locally in your browser. No color data is ever sent to a server, making the tool safe for private brand colors and design systems.
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| HEX, RGB, HSL conversion | ||
| HSV & CMYK output | ||
| Live preview swatch | ||
| Color palette generator | — | |
| Contrast ratio checker (WCAG) | — | |
| REST API access | — |
Frequently Asked Questions
The tool supports HEX (#rrggbb), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), HSV/HSB, CMYK, and a CSS-ready color string. All formats are shown simultaneously.
Yes. You can type directly into the HEX, RGB, or HSL fields. As you type a valid value, all other formats update automatically. The tool accepts shorthand hex (#fff) and full-form (#ffffff).
Relative luminance (WCAG 2.1) is a perceptual measure of a color's brightness, ranging from 0 (black) to 1 (white). It's used to calculate contrast ratios for accessibility: WCAG AA requires a ratio of at least 4.5:1 for normal text.
The free tool converts opaque (fully solid) colors. Alpha channel support (rgba, hsla, hex-8) is on the Pro roadmap and will be available in an upcoming update.
CMYK is derived from RGB using the standard formula: normalize R,G,B to 0–1, then K = 1 − max(R,G,B), C = (1−R−K)/(1−K), and so on. Note that screen CMYK differs from print ICC profiles, so results may not match print-accurate values.
No. All color math runs entirely in your browser using JavaScript. Nothing is transmitted to any server, making it safe for private brand colors and proprietary design systems.