Color Converter
Convert between HEX, RGB, and HSL color formats
Click to pick any color
#a855f7rgb(168, 85, 247)hsl(271, 91%, 65%)About this tool
The Color Converter translates colors between HEX (#a855f7), RGB (rgb(168, 85, 247)), and HSL (hsl(280, 89%, 65%)) formats with a live color preview swatch. All three formats are valid CSS — the choice between them depends on context and readability preference.
When to use it
- →Converting brand color hex codes from design tools into CSS variables
- →Generating lighter or darker color variants by adjusting HSL lightness
- →Matching colors between Figma (hex), Tailwind (HSL), and raw CSS
- →Translating colors from color pickers that output RGB to the format your codebase uses
Tips
- ◆HSL is the most intuitive format for programmatically generating color palettes — adjusting only the L value gives you tints and shades.
- ◆HEX shorthand (#fff) is 3-digit when each pair of hex digits is the same — #aabbcc = #abc.
- ◆CSS accepts all three formats interchangeably — use whichever is most readable in context.
Frequently asked questions
When should I use HEX vs RGB vs HSL in CSS?
HEX is the most compact and widely used in design tokens and design tools. RGB is useful when you need to programmatically manipulate color channels or add alpha transparency (rgba). HSL is the most human-readable for adjusting hue, saturation, and lightness — ideal for design systems and dynamic theming.
What is the difference between RGB and RGBA?
RGBA adds a fourth channel for alpha (opacity), where 0 is fully transparent and 1 is fully opaque. For example, rgba(168, 85, 247, 0.5) is 50% transparent purple. HEX also supports alpha as an 8-digit code (#a855f780), though browser support is slightly older.
Why does the same HEX color look different on different screens?
Color rendering varies with screen color profiles (sRGB, P3, etc.), brightness settings, and panel technology. OLED screens have deeper blacks and more saturated colors than IPS panels. Always test color choices on multiple devices for important UI work.
How do I choose colors that meet WCAG accessibility contrast requirements?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against its background. Use the Color Palette Generator to explore combinations, and verify contrast ratios with a dedicated accessibility checker. High-lightness colors on white and low-lightness colors on dark backgrounds typically pass.