$ convert --color

color converter.

Convert colors between HEX, RGB, HSL, OKLCH, and named colors in real time.

input

enter a color

1
2
3
4
5

formats

HEX#a78bfa

RGBrgb(167, 139, 250)

RGBArgba(167, 139, 250, 1)

HSLhsl(259, 92%, 76%)

HSLAhsla(259, 92%, 76%, 1)

OKLCHoklch(0.55 0.24 265)

Name—

click any format row to copy.

What color formats does the tool support?

HEX (#ff6600), RGB (rgb(255,102,0)), HSL (hsl(24,100%,50%)), OKLCH (oklch(0.62,0.13,45)), and named colors (orange).

What is OKLCH?

OKLCH is a perceptually uniform color space that better matches human vision. It separates lightness, chroma (saturation), and hue for more intuitive color manipulation.

Why do my colors look different between formats?

Different color spaces have different gamuts. RGB has a wider gamut than HSL. OKLCH is designed to be perceptually uniform.

Color Format Overview

Format	Example	Components	Best For
HEX	`#3B82F6`	Red, Green, Blue (2 digits each)	Web design, CSS
RGB	`rgb(59, 130, 246)`	Red, Green, Blue (0-255)	CSS, JavaScript
RGBA	`rgba(59, 130, 246, 0.8)`	RGB + Alpha (opacity)	Transparency in CSS
HSL	`hsl(217, 91%, 60%)`	Hue, Saturation, Lightness	Color manipulation, themes
HSLA	`hsla(217, 91%, 60%, 0.8)`	HSL + Alpha	Transparency + easy tweaking

Why HSL Is Developer-Friendly

/* Change only lightness to darken */
--primary: hsl(217, 91%, 60%);
--primary-dark: hsl(217, 91%, 40%);
--primary-light: hsl(217, 91%, 80%);

/* Create complementary color */
--complement: hsl(calc(217 + 180), 91%, 60%);

CSS tip: Modern CSS supports hsl(217 91% 60%) without commas. This makes color manipulation with calc() much cleaner in design systems.

learn more in our detailed guide.

→ read the guide