Colour Converter
Convert a colour between HEX, RGB, RGBA, HSL and HSLA, and generate a tint and shade scale from it.
Convert a colour between HEX, RGB, HSL and CSS variables - with tints and shades.
Colour
- HEX
- #6d5efc
- RGB
- 109, 94, 252
- HSL
- 246, 96%, 68%
Tints & shades
hex: #6d5efc
rgb: rgb(109, 94, 252)
rgba: rgba(109, 94, 252, 1)
hsl: hsl(246, 96%, 68%)
hsla: hsla(246, 96%, 68%, 1)About the colour converter
HSL is the format worth learning. Because hue, saturation and lightness are separate, you can generate a whole tonal scale by changing lightness alone, which is exactly how design system colour ramps are built.
Modern CSS also lets you store a colour as space-separated channels in a variable, so one value can be reused at any opacity.
How to use it
- 1Pick a colour with the picker or paste a hex value.
- 2Read every format at once.
- 3Look at the tint and shade strip for the tonal scale.
- 4Copy the CSS variable block, which includes the channel form for opacity.
Questions
Why is HSL useful?
Because lightness is its own channel. Changing only lightness gives you a consistent tonal ramp, which is far harder to do by hand in hex.
What is the space-separated variable form for?
Storing channels without the function wrapper lets you write rgb(var(--brand) / 0.5), so one variable works at any opacity.
How do I build a colour scale?
Keep hue and saturation fixed and step lightness. The tint and shade strip here shows that scale for your colour.