What's the difference between HSL and HSV?

Both use hue and saturation. HSL's third value is lightness (50% is the pure colour), while HSV's is value/brightness (100% is the pure colour).

How do I write a transparent colour?

Use RGBA or HSLA with an alpha between 0 and 1, or an 8-digit HEX where the last two digits are the opacity.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components. AAA requires 7:1 for normal text.

Colour Converter

Convert colours between HEX, RGB, RGBA, HSL and HSV with a live swatch.

Processed locally

Any colour value

Opacity (alpha)100%

#ff4d1f

Sample text

On white: 3.32:1

Sample text

On black: 6.33:1

HEX
#ff4d1f
HEX + alpha
#ff4d1fff
RGB
rgb(255, 77, 31)
RGBA
rgba(255, 77, 31, 1)
HSL
hsl(12.3, 100%, 56.1%)
HSLA
hsla(12.3, 100%, 56.1%, 1)
HSV
hsv(12.3, 87.8%, 100%)

Instructions

How to use it

01Type or paste a colour: HEX, RGB, RGBA, HSL, HSV or a CSS colour name.
02Or click the swatch to pick a colour visually.
03Adjust opacity if you need a transparent colour.
04Copy any format with its button.

About

What it does

The same colour can be written many ways: #ff4d1f in a design file, rgb(255, 77, 31) in CSS, hsl(13, 100%, 56%) when adjusting lightness, or HSV in a colour picker. Converting between them by hand is fiddly and easy to get wrong.

Type or paste a colour in any common format and see every other format instantly, with a live swatch, an opacity slider and a contrast check against black and white text.

Supported formats

HEX: #rgb, #rgba, #rrggbb or #rrggbbaa.
RGB / RGBA: Comma or space separated, values 0–255 or percentages, with optional / alpha.
HSL / HSV: Hue in degrees, then saturation and lightness (or value) as percentages.

Settings explained

Contrast check: Shows the WCAG contrast ratio of the colour against white and black. 4.5:1 or more passes AA for normal text.

Good for

Turning a brand HEX code into RGB for CSS or HSL for theming
Getting RGBA values for a semi-transparent overlay
Checking whether text in a colour will be readable
Converting colour picker HSV values into code

Questions, answered

What's the difference between HSL and HSV?: Both use hue and saturation. HSL's third value is lightness (50% is the pure colour), while HSV's is value/brightness (100% is the pure colour).
How do I write a transparent colour?: Use RGBA or HSLA with an alpha between 0 and 1, or an 8-digit HEX where the last two digits are the opacity.
What contrast ratio do I need?: WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components. AAA requires 7:1 for normal text.

All design & colour tools (3)