Color Converter
Convert colors between different formats including HEX, RGB, HSL, HSV, and CMYK. Perfect for web design, graphic design, and development work.
#4F46E5
rgb(79, 70, 229)
HEX Color
RGB Values
HSL Values
All Color Formats
#4F46E5rgb(79, 70, 229)hsl(243, 75%, 59%)hsv(243, 69%, 90%)cmyk(66%, 69%, 0%, 10%)#4f46e5Preset Colors
Our color converter transforms colors between all major formats: HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Use the visual color picker to select colors and instantly see them in all formats. Perfect for web development (CSS), graphic design (CMYK for print), and creating consistent color systems across projects.
When to Use This Tool
- Converting design colors from HEX to RGB for CSS styling
- Preparing colors for print with CMYK conversion
- Adjusting color values in design software like Photoshop or Figma
- Creating color palettes for web development
- Matching colors between digital and print projects
- Generating accessible color combinations for UI design
How to Use
Enter a Color
- Enter a color in any supported format (HEX, RGB, HSL, etc.)
- Use the color picker to select a visual color
- View the color preview and all converted values
- Copy any format to use in your project
Supported Color Formats
- HEX: #FF5733 or #F53 (3-digit shorthand)
- RGB: rgb(255, 87, 51) or rgba(255, 87, 51, 0.5)
- HSL: hsl(11, 100%, 60%) or hsla(11, 100%, 60%, 0.5)
- CMYK: cmyk(0%, 66%, 80%, 0%) for print
Understanding Color Models
- HEX is hexadecimal - used in CSS and web (#RRGGBB)
- RGB adds red, green, blue light - screens, digital displays
- HSL is hue, saturation, lightness - more intuitive for humans
- CMYK is cyan, magenta, yellow, black - used in print
Examples
Brand Color Conversion
Converting a brand color across all formats
Input
HEX: #4F46E5 (Indigo)
Result
RGB: rgb(79, 70, 229) | HSL: hsl(243, 75%, 59%) | CMYK: cmyk(79%, 70%, 0%, 10%)
Shade Generation
Creating lighter and darker variations for design systems
Input
Base: HSL(200, 80%, 50%)
Result
Light: HSL(200, 80%, 70%) | Dark: HSL(200, 80%, 35%)
CSS Ready Output
Directly usable CSS values for web development
Input
Color picker selection
Result
background-color: #3B82F6; color: rgb(255, 255, 255);
Frequently Asked Questions
What's the difference between RGB and CMYK?
RGB (Red, Green, Blue) is additive color for screens - combining all three creates white. CMYK (Cyan, Magenta, Yellow, Key/Black) is subtractive color for print - combining all creates black. The same color will look different on screen vs. printed.
Why do colors look different when printed?
Screen colors (RGB) and print colors (CMYK) use different color spaces. The CMYK gamut is narrower - some bright RGB colors cannot be reproduced in print. Always convert to CMYK for print projects and expect some color shift.
What is the alpha channel in RGBA/HSLA?
Alpha (last value in RGBA/HSLA) controls opacity. 1.0 is fully opaque, 0 is fully transparent, 0.5 is half visible. This is useful for overlays, gradients, and semi-transparent UI elements.
What's the 3-digit HEX shorthand?
#RGB is shorthand for #RRGGBB. #F53 becomes #FF5533. It only works when each digit is doubled. #123 works, but #12 doesn't - you need #112233 instead.
How do I create a good color palette?
Start with a base color, then generate variations by adjusting lightness (L in HSL) while keeping saturation constant. Add neutrals (grays) by setting saturation to near zero. Tools like Coolors.co can help generate harmonious palettes.
Pro Tips
- •For web CSS, use HEX for single colors and RGBA for transparency
- •When designing for print, work in CMYK from the start to avoid surprises
- •Store brand colors in both HEX (screen) and CMYK (print) for consistency
- •Lightness adjustments in HSL are more intuitive than RGB percentages
- •For accessibility, ensure 4.5:1 contrast ratio between text and background colors
- •Use CSS custom properties (variables) to store color values for easy theming