Value Converter Tools
Color Converter
Convert a CSS color between HEX, RGB, and HSL forms. See the equivalent values together, including alpha when the input includes transparency.
✓ Every tool runs in your browser. We do not upload your input or output.
Keyboard shortcuts
Ctrl/⌘ + Enter: process
Ctrl/⌘ + Shift + F: full screen
Esc: exit full screen
Ctrl/⌘ + F in editor: search
How to use
- Enter a HEX color or a comma-separated rgb(), rgba(), hsl(), or hsla() value.
- Review the HEX, RGB, and HSL lines produced from the same color.
- Check alpha and rounding if you need to preserve a design token precisely.
- Copy or download the output for a stylesheet, design handoff, or test.
Examples
Read a brand color in three forms
An opaque six-digit HEX color gets equivalent RGB channels and rounded HSL components.
#336699
HEX: #336699 RGB: rgb(51, 102, 153) HSL: hsl(210, 50%, 40%)
Keep an alpha channel
The alpha value appears in all three outputs; the HEX byte is rounded to the nearest 8-bit value.
rgba(255, 0, 0, 0.5)
HEX: #ff000080 RGB: rgba(255, 0, 0, 0.5) HSL: hsla(0, 100%, 50%, 0.5)
Compare CSS color formats at a glance
HEX is common in design tokens, RGB is useful when checking channel values, and HSL can make hue and lightness easier to adjust. Paste one supported color and read all three representations in the output. A six-digit HEX value such as #336699 becomes rgb(51, 102, 153) and hsl(210, 50%, 40%). You can copy the complete output or select a single line for a stylesheet.
The tool accepts short and full HEX values, including four- and eight-digit variants with an alpha channel. It also accepts the older comma-separated CSS function forms rgb(), rgba(), hsl(), and hsla(). A value outside the supported channel range produces an error instead of an apparently valid color. Named colors, color(), and modern space-separated CSS syntax are outside this converter’s current scope.
Check rounding when transparency matters
RGB channels use integers from 0 to 255. HSL output rounds hue, saturation, and lightness to whole numbers. Alpha becomes an eight-bit HEX channel and is displayed with up to three decimal places in RGB and HSL functions. Because those representations have different precision, converting the output again may produce a small difference. If exact token values matter, retain your original source alongside the result.
This converter is useful while reviewing a UI palette or translating values from a design handoff. It performs the calculation in a Web Worker in your browser. Your color is not sent to a server, and the shared workspace keeps a stable size while you compare output lines.
Frequently asked questions
Which HEX lengths work?
Use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA. The output uses full-length lowercase HEX.
Can I enter modern space-separated CSS color syntax?
Not yet. RGB and HSL inputs use the comma-separated rgb(), rgba(), hsl(), and hsla() forms.
Are named colors supported?
No. Enter a HEX, RGB, or HSL value rather than a name such as red or rebeccapurple.
Why is an HSL value slightly different after conversion?
RGB channels are integer bytes and HSL output is rounded to whole degrees and percentages. Repeated conversion can change a value slightly.
What happens to transparency?
Alpha is retained in rgba(), hsla(), and eight-digit HEX output. The displayed decimal alpha is rounded to three places.