Convert a HEX token
Paste a color such as #2d7d76 to get RGB, HSL, and a CSS custom property.
Color Converter
Convert HEX colors to RGB, HSL, and CSS variable formats.
Converted values
- HEX
- #2d7d76
- RGB
- rgb(45, 125, 118)
- HSL
- hsl(175, 47%, 33%)
- CSS variable
- --color: #2d7d76;
About color conversion
Designers and developers often need the same color represented in different formats. HEX is compact, RGB maps directly to screen channels, and HSL is useful for reasoning about hue, saturation, and lightness.
Common uses
- Convert a HEX color for CSS
- Inspect RGB channel values
- Create HSL values for design tokens
- Copy a CSS custom property quickly
Notes
This converter accepts 3-digit and 6-digit HEX values. Alpha channels and named CSS colors are not included yet.
Examples
Check channel values
Use RGB and HSL output when translating design colors into CSS or documentation.
FAQ
Which color formats can I enter?ShowHide
The converter accepts 3-digit and 6-digit HEX colors.
Does it support alpha colors?ShowHide
Alpha channels are not included yet. The current converter focuses on solid HEX colors.
Can I copy CSS variables?ShowHide
Yes. The output includes a CSS custom property format you can copy into stylesheets.