Convert Colors Between HEX, RGB, HSL Formats
Convert color values between HEX, RGB, RGBA, and HSL formats. Essential for CSS, design handoffs, and cross-tool consistency.
The Problem
Figma gives you <code>#4F46E5</code>. Your CSS framework needs <code>rgb(79, 70, 229)</code>. Your animation library expects <code>hsl(243, 75%, 59%)</code>. Converting manually is tedious and error-prone.
Why This Matters
Different tools, frameworks, and APIs use different color formats. CSS supports all three (HEX, RGB, HSL), but libraries like D3.js, Three.js, and animation tools often require specific formats. Design tokens systems need consistent color format across all outputs.
Step-by-Step Instructions
Enter your color value
Type or paste a HEX code (#4F46E5), RGB value (rgb(79, 70, 229)), or HSL value (hsl(243, 75%, 59%)). The tool auto-detects the format.
View all format conversions
All equivalent color values appear instantly — HEX, RGB, RGBA (with alpha), and HSL. Click any value to copy it.
Use the color preview
See the actual color swatch to verify it matches what you expect before copying the values into your CSS or code.
Try It Now — Color Converter
Open full page →All processing happens in your browser — no data is sent to any server.
Before & After Example
Brand primary: #4F46E5 Brand secondary: #06B6D4 Success: #10B981 Warning: #F59E0B Error: #EF4444
/* Brand primary */ hex: #4F46E5 rgb: rgb(79, 70, 229) rgba: rgba(79, 70, 229, 1) hsl: hsl(243, 75%, 59%) /* Brand secondary */ hex: #06B6D4 rgb: rgb(6, 182, 212) hsl: hsl(189, 94%, 43%)
Frequently Asked Questions
When should I use HEX vs RGB vs HSL?
HEX is most common in CSS and design tools. RGB is useful when you need to manipulate individual channels or set opacity. HSL is most human-intuitive — changing lightness/saturation is predictable.
How do I add transparency to a color?
Use RGBA: rgba(79, 70, 229, 0.5) for 50% opacity. Or HSLA: hsla(243, 75%, 59%, 0.5). HEX also supports alpha with 8 digits: #4F46E580.
Why does my converted color look slightly different?
Rounding during conversion can cause 1-2 unit differences. For example, #4F46E5 converts to exactly rgb(79, 70, 229) with no rounding. Most converters are accurate to within 1 unit.
Related Workflows
Want the full Color Converter experience?
Open the standalone tool for more space, keyboard shortcuts, and additional features.
Open Color Converter →