What snippets does it give me?

The common ones: color, background-color and border declarations, a CSS custom property (variable), and the rgb() and hsl() forms of the same colour. Each has its own copy button.

Defining a colour once as a custom property like --brand and reusing it keeps a design consistent and makes theme changes a one-line edit. The generator gives you that line ready to paste.

Is anything uploaded?

No. Everything is generated in your browser.

CSS Color Generator

Pick a colour and copy it as CSS — colour, background, border and variables. Runs entirely in your browser.

Colour#15803d

colorcolor: #15803d;

backgroundbackground-color: #15803d;

borderborder: 1px solid #15803d;

variable--brand: #15803d;

rgbrgb(21, 128, 61)

hslhsl(142, 72%, 29%)

Processed on your device. This file is never uploaded.

1Pick a colour.
2Choose the snippet you need.
3Copy it into your stylesheet.

From a colour to usable CSS

Once you have a colour, you still have to write it into CSS in the right property. This tool takes a colour and hands you each common form — as text colour, background, border, and a reusable custom property — plus its rgb() and hsl() equivalents, all ready to paste.

Generated locally

The snippets are produced in your browser with nothing uploaded, so it is a fast, private way to grab exactly the CSS you need for a colour.

Frequently asked questions

CSS Color Generator

From a colour to usable CSS

Generated locally

Frequently asked questions

What next?