Color Palette Generator

Create a custom palette, arrange its colors and copy it as CSS variables.

Select a color to edit it, or drag colors in the preview to reorder them. Add up to 20 colors.

Selected color

#FF4D6D

Hue Opacity 100%

RGB: 255, 77, 109
CMYK: 0%, 70%, 57%, 0%
OKLCH: 67.0% 0.220 18.6°
HSL: 349°, 100%, 65%

Colors 5 / 20

CSS

Color format

CSS variables

Create a color palette online

Build a custom color palette with up to 20 colors. Select any color in the preview or color list, then adjust its saturation, brightness, hue and opacity while seeing the whole palette update instantly.

Add colors as your palette grows, drag them directly in the preview or use the up and down arrow buttons to arrange them, and remove colors you no longer need. You can also enter an exact HEX value for any color.

Copy your palette as CSS variables

The generated CSS keeps the order of your palette and updates after every change. Choose HEX, RGB, OKLCH or HSL, then copy the complete set of custom properties into your stylesheet.

Opacity is included automatically. Transparent HEX values use an alpha channel, while RGB, OKLCH and HSL values use modern CSS alpha syntax.