Which color format should I use?

All are equivalent. HEX is compact, RGB/RGBA is familiar, and HSL is easiest for creating lighter or darker variations.

How do I use CSS variables?

Declare them in :root, then reference them anywhere with var(--color-primary).

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Color Picker

Choose a color and opacity and get every common CSS notation at once, formatted as CSS variables you can paste into :root.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Color

Opacity100%

Live preview

Generated CSS

:root {
  --color-hex: #00ff66;
  --color-rgb: rgb(0, 255, 102);
  --color-rgba: rgba(0, 255, 102, 1);
  --color-hsl: hsl(144, 100%, 50%);
  --color-hsla: hsla(144, 100%, 50%, 1);
}

// Example output

:root {
  --color-hex: #00ff66;
  --color-rgb: rgb(0, 255, 102);
  --color-rgba: rgba(0, 255, 102, 1);
  --color-hsl: hsl(144, 100%, 50%);
  --color-hsla: hsla(144, 100%, 50%, 1);
}

// Features

▸HEX, RGB, RGBA and HSL output
▸Opacity control
▸CSS custom properties
▸Large live swatch
▸Randomize colors

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Color Picker.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Color Converter

Convert colors between HEX, RGB and HSL instantly — paste any CSS color value and get the others.

CSS Gradient Palette Generator

Generate harmonious color palettes — analogous, complementary, triadic or monochrome — with matching gradients.

WCAG Contrast Checker

Check text and background color contrast against WCAG 2.2 AA and AAA for normal and large text.