Color Converter
Convert colors between HEX, RGB, HSL, HSV/HSB, and CMYK formats. HEX to RGB: split 6 hex digits into 3 pairs and convert to decimal (e.g. #3B82F6 → rgb(59, 130, 246)). RGB to HEX: convert each 0-255 value to 2-digit hex. HSL uses hue angle (0-360°), saturation, and lightness percentages. CMYK is for print with cyan, magenta, yellow, and black channels.
Convert colors between HEX, RGB, HSL, HSV/HSB, and CMYK formats instantly. Auto-detect any color format, see all conversions at once, search CSS named colors, and view complementary colors. Includes Material Design and Tailwind CSS color presets.
Enter Any Color
Accepts HEX, RGB, HSL, HSV/HSB, CMYK, or CSS color names
Preview
Complementary
#c47d09All Formats
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)RGB Channels
HSL Values
CSS Named Colors
Popular Presets
Color Format Guide
- HEX: 6-digit hexadecimal (#RRGGBB), e.g. #3B82F6
- RGB: Red, Green, Blue (0–255 each), e.g. rgb(59, 130, 246)
- HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
- HSV/HSB: Hue (0–360°), Saturation (0–100%), Value/Brightness (0–100%)
- CMYK: Cyan, Magenta, Yellow, Key/Black (0–100% each) — used for print
How to Use
- 1
Enter a color
Type any color value (HEX, RGB, HSL, HSV, CMYK, or CSS name) into the input field, or use the color picker
- 2
View all formats
See the color instantly converted to HEX, RGB, HSL, HSV/HSB, and CMYK simultaneously
- 3
Copy any format
Click the copy button next to any format to copy it to your clipboard
- 4
Browse presets
Explore Material Design and Tailwind CSS color presets, or search CSS named colors
Frequently Asked Questions
- How do I convert HEX to RGB?
- To convert HEX to RGB, split the 6-digit hex code into three pairs representing Red, Green, and Blue, then convert each pair from hexadecimal to decimal. For example, #3B82F6: 3B = 59 (Red), 82 = 130 (Green), F6 = 246 (Blue), giving rgb(59, 130, 246). Our converter does this automatically for any hex color.
- What is the difference between RGB and CMYK?
- RGB (Red, Green, Blue) is an additive color model used for screens — combining all three at full intensity produces white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for print — mixing all inks produces black. Colors may look different on screen vs. print because the color gamuts differ. Always convert to CMYK before sending designs to a printer.
- What is HSL and how does it differ from HSV/HSB?
- HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) both describe color using a hue angle (0–360°) and two percentages. The key difference: in HSL, 100% lightness is always white, while in HSV, 100% value is the purest form of the hue. HSL is often preferred in CSS because its lightness scale is more intuitive — 50% lightness gives the "pure" color.
- Can I use CSS color names instead of hex codes?
- Yes! CSS supports 148 named colors like "coral" (#FF7F50), "tomato" (#FF6347), and "steelblue" (#4682B4). Named colors are valid in CSS properties just like hex or rgb() values. They are great for prototyping but hex/rgb gives you access to all 16.7 million colors. Our converter includes a searchable CSS named color list.
- What is a complementary color?
- A complementary color sits directly opposite another on the color wheel (180° apart in hue). For example, the complement of blue (#0000FF) is yellow (#FFFF00). Complementary pairs create high contrast and visual energy when used together, making them popular in design for call-to-action buttons, alerts, and branding. Our converter shows the complementary color automatically.
- How do I convert RGB to HEX manually?
- Convert each RGB value (0–255) to a two-digit hexadecimal number. For rgb(59, 130, 246): 59 in hex = 3B, 130 in hex = 82, 246 in hex = F6, giving #3B82F6. Values under 16 need a leading zero (e.g., 10 = 0A). Combine all three pairs with a # prefix.