Free Color Code Converter — HEX, RGB, HSL, HSV & CMYK
Instantly convert any color between HEX, RGB, HSL, HSV, and CMYK. Generate shades, tints, and six color harmony schemes.
🔢 HEX
🟢 RGB
🔵 HSL
🔶 HSV
🖨️ CMYK
🎨 6 Harmonies
About the Color Code Converter
Every color on a digital screen can be described in multiple mathematical ways. HEX is the shorthand used in web development; RGB describes the exact mix of red, green, and blue light; HSL makes it easy to adjust lightness and saturation programmatically; HSV is preferred in image-editing tools like Photoshop; and CMYK is the standard for offset printing.
This free converter handles all five formats in one place. Whether you're translating a brand color from a print spec into a CSS value, or building a design system that requires both digital and print outputs, this tool gives you every format instantly — with no signup required.
The shades and tints panel lets you create a full lightness ramp from your base color — ideal for generating Tailwind-style color scales. The harmony section applies established color theory to suggest six relationship types: complementary, triadic, analogous, split-complementary, tetradic, and monochromatic.
Frequently Asked Questions
How do I convert HEX to RGB? +
Split the six-character hex code into three two-character pairs and convert each from base-16 to base-10. For example, #FF5733 becomes R=255, G=87, B=51. Our converter handles this automatically — enter any hex code and the RGB value appears instantly. You can also go the other direction and type an RGB value to get the HEX equivalent.
What is the difference between HEX and RGB? +
HEX and RGB both describe the same Red-Green-Blue color model — they just use different notation. HEX uses a six-character base-16 string (e.g. #FF5733), while RGB uses three decimal numbers from 0–255 (e.g. rgb(255, 87, 51)). They are mathematically equivalent; you can convert between them with zero color loss. CSS accepts both formats, and modern browsers support a fourth channel for transparency: rgba() and #RRGGBBAA.
When should I use HSL instead of HEX? +
HSL (Hue, Saturation, Lightness) is far more intuitive for programmatic manipulation. To make a lighter shade, you increase the L value; to make it more muted, you lower S. This mental model is much harder with HEX or RGB. HSL is the preferred format for CSS custom properties and design systems because you can generate a full palette by varying a single parameter. Many modern frameworks like Tailwind CSS use HSL under the hood.
What is CMYK and when do I use it? +
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in physical printing. Unlike RGB which mixes light additively, CMYK mixes inks subtractively. You need CMYK values when sending files to a print shop, preparing business cards, packaging, or any physical media in software like Adobe InDesign or Illustrator. Note that the RGB-to-CMYK conversion is approximate because screen and print gamuts differ — not all screen colors can be reproduced in print.
What is HSV (HSB) and how is it different from HSL? +
HSV (Hue, Saturation, Value) — also called HSB (Brightness) — is used by Adobe Photoshop and many professional design tools. The key difference from HSL is how they handle brightness: in HSL, 100% lightness always gives white regardless of saturation; in HSV, 100% value at full saturation gives the pure hue. HSV is generally more intuitive for selecting vibrant colors because it places pure pigment-like colors at the corner of maximum saturation and value.
What are color harmonies and how are they calculated? +
Color harmonies are sets of colors with a fixed angular relationship on the HSL color wheel. Complementary colors are 180° apart and provide maximum contrast; triadic colors are 120° apart and create vibrant, balanced palettes; analogous colors are within 30°–60° and look naturally cohesive. These relationships come from traditional color theory and have been validated by centuries of art and design practice. The converter generates all six major harmony types automatically as you pick your color.
Can I use this converter in CSS directly? +
Yes — all output formats are valid CSS. You can use color: #E07A5F (HEX), color: rgb(224, 122, 95) (RGB), or color: hsl(13, 66%, 63%) (HSL) directly in any stylesheet. Modern browsers support all three. HSL is especially powerful in CSS because you can use CSS calc() to manipulate hue, saturation, or lightness dynamically without JavaScript. Click the copy button next to any format and paste directly into your code editor.
How do I generate a full color scale from one color? +
Use the Shades & Tints section below the main converter. Shades are darker variants created by decreasing lightness; tints are lighter variants created by increasing lightness. This gives you a Tailwind-style scale of 10 steps from your base color. If you need even finer control — or want to export CSS custom properties for all steps — visit our Color Palette Generator which provides full palette export in both CSS and JSON.
