Color converter

Convert between HEX, RGB, HSL, and OKLCH, with a tint scale.

Colour

HEX

#2f6fed

RGB

rgb(47, 111, 237)

HSL

hsl(219.8, 84.1%, 55.7%)

OKLCH

oklch(57.41% 0.2015 262)

Tint and shade scale

Eleven steps at fixed OKLCH lightness. Click a swatch to copy it.

Scale values

HEXOKLCH

Variable name

CSS custom properties

--color-brand-50: #f0f5ff; --color-brand-100: #deeaff; --color-brand-200: #c3d8ff; --color-brand-300: #9fc1ff; --color-brand-400: #76a6ff; --color-brand-500: #4c89ff; --color-brand-600: #2f6fed; --color-brand-700: #1855cd; --color-brand-800: #033dac; --color-brand-900: #002b82; --color-brand-950: #001a58;

What it does

Type any CSS colour and get HEX, RGB, HSL, and OKLCH.
Generates an 11-step tint and shade scale.
Copies the scale as CSS custom properties.

All tools