Convert a HEX or RGB color into HEX, RGB, and HSL values. Match colors across design notes and CSS without guessing equivalent values.
How to use
Enter a three or six digit HEX value, or an rgb() value with integer channels. Copy the notation required by your design or code.
Example
#ff0000 returns rgb(255, 0, 0) and hsl(0, 100%, 50%). #f00 represents the same input color.
FAQ
Can I enter transparency or a color name?
No. Alpha channels, named colors, and HSL input are not supported. HSL output is rounded to whole values.
Related tools
A practical task
Check a primary color before comparing subtle shades. #00ff00 corresponds to rgb(0, 255, 0) and hsl(120, 100%, 50%). This makes a useful reference when a stylesheet and design note use different notations.
Another useful question
Can HSL rounding change a later round trip?
Rounded hue, saturation, and lightness lose some precision. Keep the original HEX or RGB value when exact channel equality matters across tools.
Details for interpreting the result
| Detail | Explanation |
|---|---|
| RGB channels | RGB describes red, green, and blue light channels. In the common integer form, each runs from 0 through 255. A six digit HEX value represents the same three channels as two hexadecimal digits per channel. |
| HSL values | HSL separates hue, saturation, and lightness. It is useful for describing variations of one color, but the lightness percentage is not a direct measure of perceived contrast or accessibility. |
| Color contrast | A foreground and background need enough contrast for readable text. Attractive colors do not automatically produce accessible combinations. Check the intended font size, text weight, and actual background together. |
| Rounded color components | Rounding hue, saturation, or lightness removes some numeric precision. Keep the original RGB channels or HEX value when comparing an exact brand color. A visually similar rounded result is not proof of exact channel equality. |
| Supported color notation | A converter only understands the input notations it implements. A valid color in CSS can still use syntax outside that set. Check alpha channels, named colors, and newer CSS color forms before treating an input rejection as an invalid color. |
| The display context | A color sample appears beside other colors and under display settings that affect perception. Evaluate the chosen value in the actual interface with its neighbors and text, rather than approving an isolated square alone. |
| Labels beyond color | Color alone is a weak way to distinguish important categories. Use readable labels, shapes, or patterns where a chart or status matters. A valid palette does not ensure that every viewer can distinguish every item. |