Color Converter
Enter a color in any format and instantly see it converted to HEX, RGB, HSL, HSV, and CMYK — all synced bidirectionally.
Color input
Updates as you typeExamples
How It Works
HSL (Hue, Saturation, Lightness) reorganises the color space around a 360° color wheel. Hue selects the base color, saturation controls how vivid it is, and lightness moves it between black (0%) and white (100%). This makes HSL ideal for building palettes: keep the hue fixed and vary saturation or lightness to create tints, shades, and tones. HSV (Hue, Saturation, Value) is similar but defines brightness differently — 100% value is the brightest version of the hue, which is why graphic editors like Photoshop favour it for colour pickers.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive model used in printing. Inks absorb light instead of emitting it, so CMYK gamut is narrower than RGB. Converting between the two is straightforward mathematically but may require colour-profile adjustments for print-accurate results. This tool converts all formats through RGB as the intermediary and displays a live preview, complementary colour, and closest CSS named colour for every input.
Tips & Best Practices
Frequently Asked Questions
What is a HEX color code?
HEX is a 6-digit hexadecimal notation (#RRGGBB) representing red, green, and blue channels. Each pair ranges from 00 to FF (0–255 in decimal). For example, #FF0000 is pure red and #FFFFFF is white.
How does RGB work?
RGB represents colors by mixing Red, Green, and Blue light. Each channel has a value from 0 to 255. Combining all three at full intensity (255,255,255) produces white, while all at zero (0,0,0) produces black.
What is the difference between HSL and HSV?
Both use Hue (0–360°) for the color wheel position. HSL uses Saturation and Lightness — 50% lightness is the pure color. HSV uses Saturation and Value (brightness) — 100% value is the brightest version. HSL is generally more intuitive for web design.
How do I find complementary colors?
Complementary colors are opposite each other on the color wheel, which means they are 180° apart in hue. In HSL, simply add 180 to the hue value (wrapping around at 360). Complementary pairs create high contrast and visual impact.
What is CMYK and when should I use it?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in print. When designing for physical media — business cards, posters, packaging — you should work in CMYK to ensure accurate color reproduction on paper.
Why do colors look different on screen versus in print?
Screens use additive RGB light (mixing light wavelengths), while printers use subtractive CMYK ink (absorbing light). RGB can display vivid neon and electric hues that CMYK physically cannot reproduce, which is why bright on-screen colors often appear muted when printed.
How can I check color contrast for accessibility?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Convert your foreground and background colors to RGB, calculate their relative luminance, then compute the ratio. Many online tools automate this check.
What is a CSS named color?
CSS defines 148 named colors (like 'coral', 'teal', 'rebeccapurple') that you can use directly in stylesheets instead of HEX or RGB values. Named colors are easier to remember but offer a limited palette compared to the full 16.7 million colors available through HEX.
How do I convert HEX to RGB manually?
Split the 6-digit HEX code into three pairs, then convert each pair from base-16 to base-10. For example, #2563EB becomes 25₁₆ = 37, 63₁₆ = 99, EB₁₆ = 235, giving RGB(37, 99, 235).
What are web-safe colors?
A palette of 216 colors that displayed consistently on early 8-bit monitors. Each RGB channel uses one of six values (00, 33, 66, 99, CC, FF). They are largely obsolete on modern displays but still referenced in legacy projects.