Colour Converter: HEX, RGB, HSL and HSV
Convert between HEX, RGB, HSL and HSV with a live preview.
- HEX
- #ff8800
- RGB
- rgb(255, 136, 0)
- HSL
- hsl(32, 100%, 50%)
- HSV
- hsv(32, 100%, 100%)
Use via API
Convert a colour between HEX, RGB(A), HSL and HSV, detecting the input format. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/color-converter
curl https://pithlab.com/api/v1/tools/color-converter \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#0f766e"}'About the Colour Converter
Convert colours between HEX, RGB(A), HSL(A) and HSV instantly, with a live swatch. Supports 3, 4, 6 and 8-digit hex codes and alpha transparency.
How to use the Colour Converter
- Type or paste a colour in any supported format, such as #ff8800, rgb(255 136 0), hsl(32, 100%, 50%) or hsv(32, 100%, 100%).
- Or pick one with the colour picker. The swatch and every other format update as you type.
- Copy the format you need. Colours with transparency are shown as 8-digit HEX, rgba() and hsla().
Examples
Input
#ff8800
Output
rgb(255, 136, 0)
Input
hsl(210, 50%, 40%)
Output
#336699
Input
#0f08
Output
rgba(0, 255, 0, 0.533)
Input
rgb(255, 136, 0)
Output
hsl(32, 100%, 50%)
Frequently asked questions
What is the difference between HSL and HSV?
Both describe a colour by hue and saturation, but HSL uses lightness, where 100% is always white, while HSV (also called HSB) uses value, where 100% is the brightest version of the hue. CSS supports hsl() but not HSV.
How do 3, 4 and 8-digit hex codes work?
A 3-digit code doubles each digit, so #f80 is #ff8800. A 4-digit code adds an alpha digit (#f808), and an 8-digit code adds an alpha byte (#ff880080), where 00 is fully transparent and ff is fully opaque.
Why does converting back give a slightly different value?
RGB channels are whole numbers from 0 to 255, so HSL and HSV values are rounded when converted. A round trip can shift a hue or percentage by about one unit, which is invisible on screen.
Are colour names like 'red' supported?
Not at the moment. Use a HEX, RGB, HSL or HSV value instead.