DigiKitColor Code Converter (HEX, RGB, HSL)
Type a colour code (#ff8800, rgb(255,136,0) or hsl(32,100%,50%)) to see it in the other formats.
Colour code formats
In web design and CSS the same colour can be written in three formats. This tool helps when you take a HEX value from a design tool and want HSL in your stylesheet, or need to turn an RGB value into a short HEX code.
The three formats
- HEX: #RRGGBB. Each component is 00-FF. Example: #FF8800.
- RGB: rgb(red, green, blue); each component 0-255. Example: rgb(255, 136, 0).
- HSL: hsl(hue, saturation%, lightness%). Hue is the position on the 0-360 degree colour wheel. Example: hsl(32, 100%, 50%).
Common colours
| Colour | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Green | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
| Yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% |
| White | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| Black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| Gray | #808080 | 128, 128, 128 | 0, 0%, 50% |
| Orange | #FF8800 | 255, 136, 0 | 32, 100%, 50% |
How to use it
- Type the colour code: #ff8800, #f80, rgb(255,136,0) or hsl(32,100%,50%).
- Press Run.
- Copy the HEX, RGB and HSL equivalents into your CSS.
Tips
- For a lighter shade increase the lightness in HSL; for a darker one reduce it.
- Enough contrast between text and background colours matters for readability and accessibility.
- Because of rounding, HSL values may differ by one unit after conversion.
Check readability when you pick a colour
If a colour will be used for text or a background, watch the contrast ratio. For level AA, the Web Content Accessibility Guidelines (WCAG) ask for at least 4.5:1 for normal text and 3:1 for large text (roughly 24 px, or 18.5 px bold).
Light grey text can look elegant on white but often falls below that line. After converting a colour code here, test the text and background colours together in a contrast checker so the design stays readable for everyone.
Frequently asked questions
What is a HEX colour code?
A 6-digit code that gives the red, green and blue components as two-digit hexadecimal numbers. #FF8800: FF=255 red, 88=136 green, 00=0 blue.
What does a 3-digit code like #f80 mean?
It is shorthand; each digit is doubled. #f80 = #ff8800.
What is HSL and when is it used?
HSL defines a colour by hue (0-360 degrees), saturation and lightness percentages. It is easier than RGB for deriving lighter and darker shades of the same colour.
Which formats can I type?
#ff8800 or ff8800, #f80, rgb(255,136,0) or 255,136,0, and hsl(32,100%,50%). The result shows all three formats.