CSS Color Guide

Copy and paste the CSS color code you need for your UI design or frontend code.

How it works

Browse palettes by hue, saturation, luminosity and mood (warm, cool, pastel, vibrant…). Each color shows its HEX, RGB, HSL and OKLCH code, and you can copy it to the clipboard with one click to paste in Tailwind, CSS, Figma or any design tool.

Supported formats

HEX (#ff5733), RGB (rgb 255 87 51), HSL (hsl 11 100% 60%) and OKLCH — the modern CSS Color Module Level 4 format that respects perceptual color.

Benefits

Fully local: nothing sent to servers. Instant copy-paste. HSL filters to narrow by tone, saturation or brightness. Mood categorization to find palettes aligned with your brand personality.

Frequently asked questions

What is OKLCH and why use it?

OKLCH is a perceptually uniform color space from CSS Color Module Level 4. Changing lightness keeps the perceived hue stable — something HSL fails at.

Can I use these colors commercially?

Yes. They are color values; there is no copyright on a HEX code.

Other tools