How to Convert Color Codes (HEX, RGB, HSL) Online — Free
Designers work in HEX. CSS often prefers RGB or HSL. Print workflows use CMYK. When you get a brand color in one format and need it in another, manual conversion is error-prone. This guide shows you how to convert between all four formats instantly — with a live swatch to confirm the color looks right.
Step-by-Step Instructions
Open the Color Converter
Go to the Color Converter tool. Four rows are shown: HEX, RGB, HSL, and CMYK. Each row has an input field and a Copy button.
Enter your color in any format
Type your color value in whichever format you have. For example: • HEX: #3b82f6 or 3b82f6 (with or without the hash) • RGB: 59, 130, 246 or rgb(59, 130, 246) • HSL: 217, 91%, 60% or hsl(217, 91%, 60%) • CMYK: 76, 47, 0, 4
Press Enter or Tab
After entering the value, press Enter or Tab (or click another field). The color is parsed, and all other format rows update simultaneously. A color swatch appears so you can visually confirm the result.
Copy the format you need
Click the Copy button on any row to copy that specific format. For CSS, you'll likely want HEX or RGB. For Figma/design tools, HEX. For print, CMYK.
Which Color Format Should You Use?
- HEX — the most compact format. Used in HTML, CSS, Figma, Sketch, and most design tools. Good for brand colors and design systems.
- RGB — explicit red, green, blue channels. Use in CSS when you need
rgba()with transparency, or when passing color values to a canvas or WebGL context. - HSL — hue (0–360°), saturation, and lightness. The most human-readable format — easy to create lighter and darker variants by adjusting only the lightness value. Recommended for CSS variables and design tokens.
- CMYK — cyan, magenta, yellow, and key (black). Used in print production. Not a CSS format — convert to RGB or HEX for screen use.
Related Color Tools
Once you have your base color, these tools help you go further:
- Palette Generator — generate complementary, analogous, and triadic color schemes from your base color.
- Contrast Checker — verify that your foreground and background colors meet WCAG AA/AAA accessibility requirements.
- Color Picker — pick a color visually and see all its format values.