How do I export my palette for use in CSS?

Click Copy as CSS vars to get a :root {} block with CSS variables. Click Copy as Tailwind to get the colors object for tailwind.config.js.

What is the difference between a tint and a shade?

A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker). The monochromatic generator creates tints and shades of your base color.

Can I check contrast ratios for accessibility?

Yes. The converter tab shows contrast ratios against white and black backgrounds. WCAG AA requires 4.5:1 for normal text.

general

Color Palette Generator

Generate beautiful color palettes from a base color. Converts between HEX, RGB, HSL and OKLCH. Export as CSS variables or Tailwind config. Saves your favorite palettes locally.

Built & maintained by Shakeel Ahmed · Full-Stack Developer & Privacy Tools Builder

Generate beautiful color palettes from a base color. Converts between HEX, RGB, HSL and OKLCH. Export as CSS variables or Tailwind config. Saves your favorite palettes locally.

Base color

Palette type

Palettes saved locally

Palette generated? Pick a color directly from an image, or convert the image format.Color Picker from Image

Color Palette Generator

Generate color palettes with chroma.js

Other Tools