Color Converter
Enter a color in any format, HEX, RGB, HSL, or CMYK, and see it converted to all other formats. Includes a live color preview swatch and one-click copy buttons for every format.
#06b6d4
rgb(6, 182, 212)
hsl(189, 94%, 43%)
cmyk(97%, 14%, 0%, 17%)
RGB
HSL
CMYK
How to use
Enter a color value in the HEX input field (e.g., #06b6d4) or adjust the RGB, HSL, or CMYK sliders. All other formats update automatically. Click any copy button to copy that color format to your clipboard. The large preview swatch updates in real time so you can see exactly what color you are working with.
Color Formats
HEX: #RRGGBB, 6-digit hexadecimal, most common in web design
RGB: rgb(R, G, B), Red, Green, Blue values from 0-255
HSL: hsl(H, S%, L%), Hue (0-360°), Saturation, Lightness
CMYK: cmyk(C%, M%, Y%, K%), Cyan, Magenta, Yellow, Key (Black) for print
When this tool helps
Designers and developers constantly switch between color formats, a brand guideline might specify a Pantone or CMYK value, but you need the HEX code for CSS. This converter bridges the gap between design tools like Figma and Photoshop (which use different formats) and web code. Front-end developers use it to quickly convert client-provided colors, UI designers use it to ensure consistency across platforms, and print designers verify how their digital colors will translate to ink. The live preview swatch confirms you have the right color before copying.
Examples
Example 1: Brand Color to CSS
A client provides their brand color as RGB(6, 182, 212). The developer enters these values and gets #06B6D4 for CSS stylesheets, hsl(187, 94%, 43%) for CSS variables, and cmyk(97%, 14%, 0%, 17%) for any print collateral, all from a single input.
Example 2: Adjusting Color Lightness
A designer wants a darker shade of their button color #3B82F6. They convert to HSL (217°, 91%, 60%) and reduce the lightness from 60% to 40%, creating a darker variant at hsl(217, 91%, 40%) which converts to #084FCC. HSL makes creating shade variations intuitive.
Example 3: Print Design Verification
A graphic designer is preparing a brochure and needs to verify that the website's teal (#06B6D4) will look correct in print. Converting to CMYK shows 97% cyan, 14% magenta, 0% yellow, 17% black. They can share these exact CMYK values with the print shop to ensure color accuracy.
Things to watch
- •HEX codes are case-insensitive, #06b6d4 and #06B6D4 represent the same color in all browsers and design tools.
- •RGB to CMYK conversion is approximate, for professional print work, use a color-managed workflow with ICC profiles.
- •HSL is the most intuitive format for creating color palettes, keep the hue constant and vary saturation and lightness for harmonious shades.
- •Colors can look different on different monitors due to varying color profiles and calibration, test on multiple screens.
- •For accessibility, ensure sufficient contrast between text and background colors, WCAG recommends a minimum contrast ratio of 4.5:1.
Common questions
- What is the difference between HEX and RGB?
- HEX is a hexadecimal format (#RRGGBB) commonly used in web design and CSS, while RGB uses decimal values (rgb(R, G, B)) that range from 0-255. Both represent the same colors; HEX is more compact for web use, while RGB is more readable for humans.
- What is HSL?
- HSL stands for Hue, Saturation, and Lightness. Hue is the color (0-360°), Saturation is color intensity (0-100%), and Lightness is brightness (0-100%). HSL is intuitive for designers because adjusting saturation or lightness is more predictable than working with RGB.
- When should I use CMYK vs RGB?
- Use RGB for digital displays (screens, websites) as it uses light-based color mixing. Use CMYK for print materials (brochures, business cards) as it uses ink-based color mixing. Converting directly from RGB to CMYK may result in color shifts, so professional printers use calibrated conversion.
- What is a HEX color code?
- A HEX color code is a 6-digit hexadecimal number preceded by # (e.g., #FF5733). The first two digits represent red, the middle two green, and the last two blue. Each pair ranges from 00 (0) to FF (255). HEX is the most common format in web design because it is compact and supported in all CSS and HTML.
- Why do colors look different on screen versus in print?
- Screens use RGB (additive light mixing) where combining all colors makes white, while printers use CMYK (subtractive ink mixing) where combining all colors makes black. The color gamuts differ, some bright RGB colors cannot be reproduced in CMYK. Always convert to CMYK and proof before sending designs to print.