Color Code Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK with live preview.
Color Input
Color Formats
HEX
#3B82F6RGB
rgb(59, 130, 246)RGBA
rgba(59, 130, 246, 1)HSL
hsl(217, 91%, 60%)HSLA
hsla(217, 91%, 60%, 1)HSV
hsv(217, 76%, 96%)CMYK
cmyk(76%, 47%, 0%, 4%)CSS Variable
--color: #3B82F6;Tailwind
[#3B82F6]About
The Color Code Converter translates any color between the formats used in web development, graphic design, and print production. Pick a color using the visual color picker or type a HEX code directly, and instantly see the equivalent values in HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Each format card has a one-click copy button so you can paste the value directly into CSS, Sass, Tailwind config, Figma, or Photoshop. The live color swatch updates as you type.
How to use
- 1 Click the color swatch to open the browser color picker and choose any color visually.
- 2 Or type a HEX code directly into the text input (3-digit shorthand like #F00 is also supported).
- 3 All color format cards (RGB, HSL, HSV, CMYK, etc.) update instantly.
- 4 Click the copy icon on any card to copy that format's value to your clipboard.
- What is the difference between HSL and HSV?
- Both HSL and HSV represent colors using Hue (0–360°), Saturation, and a third component. In HSL (Hue, Saturation, Lightness), a Lightness of 50% is a "pure" color, 0% is black, and 100% is white. In HSV (Hue, Saturation, Value/Brightness), a Value of 100% is the brightest shade of the hue, and 0% is black. HSL is common in CSS; HSV is often used in color pickers and image editors like Photoshop.
- What is CMYK and when do I use it?
- CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in color printing. Unlike RGB which adds light, CMYK subtracts light by layering ink. When sending designs to a professional printer, you typically need CMYK values rather than RGB or HEX. Note that the RGB–CMYK conversion here assumes sRGB; for print-accurate conversion, use professional design software like Adobe Illustrator.
- Why does my 3-digit HEX expand to 6 digits?
- CSS allows 3-digit HEX shorthand where each digit is doubled — #F60 is shorthand for #FF6600. The converter automatically expands 3-digit codes to their full 6-digit equivalents so all color format calculations are accurate.
- Is this tool useful for Tailwind CSS?
- Yes. Tailwind's JIT mode accepts arbitrary color values like bg-[#3B82F6]. The converter shows a ready-to-use Tailwind arbitrary-value hint alongside the HEX code. For adding a color to your tailwind.config, use the HEX value directly in your theme.colors object.