New toolFree · No signup

Color Format Converter

Paste any CSS color — HEX, RGB, RGBA, HSL, HSLA — and instantly see every format side by side with a one-click copy per row. Includes the modern OKLCH perceptual color space supported in all browsers since 2023.

Share on X LinkedIn

Color picker

Paste any format

Alpha — 100%

Converted formats

HEX#3B82F66-digit

HEX8#3B82F6FFwith alpha

RGBrgb(59, 130, 246)

RGBArgba(59, 130, 246, 1)

HSLhsl(217, 91%, 60%)

HSLAhsla(217, 91%, 60%, 1)

HSBhsb(217, 76%, 96%)= HSV

OKLCHoklch(0.623 0.188 259.8)CSS4

OKLCHAoklch(0.623 0.188 259.8 / 1)CSS4 + α

OKLCH is the modern CSS Color Level 4 perceptual color space. Supported in all major browsers since 2023.

How to use

Pick or paste a color

Use the color picker or paste any format: #hex, rgb(), hsl(), etc.

Set alpha (optional)

Drag the alpha slider to add transparency. All RGBA, HSLA, and OKLCHA values update instantly.

Copy any format

Click the Copy button on any row to grab that specific format.

Use OKLCH for modern CSS

OKLCH is the most perceptually uniform CSS color space and supports the full P3 gamut on wide-color-gamut displays.

More utility tools

From our directory of 30+ CSS tools.

Browse all →

utilities

Flexbox Froggy

Learn CSS Flexbox through 24 interactive coding puzzles with frogs.

#flexbox#learning#interactive

utilities

Cubic Bezier

Drag control handles to create and compare custom CSS easing curves.

#easing#animation#timing-function

utilities

Easing Functions Cheat Sheet

Visual reference for every CSS easing function with live animation demos.

#easing#animation#reference

utilities

Tailwind CSS Cheat Sheet

Searchable, filterable reference for every Tailwind CSS utility class.

#tailwind#reference#cheatsheet

utilities

CSS Reference

Visual, illustrated reference for every CSS property with live examples.

#reference#documentation#properties

utilities

CSS-Tricks

The definitive CSS reference, almanac, and tutorial hub for developers.

#reference#tutorials#almanac

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →