sapienkit
Files never leave your browser

Generate Color Palettes for Design Projects

100% browser-basedFiles never leave your deviceFree & unlimited

Create harmonious color palettes using color theory rules — complementary, analogous, triadic, split-complementary, and more. Start from any base color.

Great for kickstarting a design project when you have one brand color and need a full palette. Export colors as hex, RGB, or HSL and use them directly in your CSS or design tool.

Palette

Analogous Palette

Tints (lighter)

Shades (darker)

CSS Variables

:root {
  --palette-1: #3bdff6;
  --palette-2: #3b82f6;
  --palette-3: #513bf6;
}

Tailwind Config

// tailwind.config.js
colors: {
  custom: {
        100: '#3bdff6',
        200: '#3b82f6',
        300: '#513bf6',
  }
}
Base: #3b82f6 | Analogous | 3 colorsClick any swatch to copy its hex value

Frequently Asked Questions — Color Palette Generator

Complementary, analogous, triadic, split-complementary, and monochromatic. Each produces a different feel.

Pick a base color. The generator creates a harmonious palette based on color theory rules.

Yes. Copy individual HEX codes or the full palette. Use the values directly in your design tools or CSS.

More Design & Color

Color Picker

Pick colors and convert between HEX, RGB, HSL, and HSB.

Open tool

Image Color Picker

Pick colors from any image — get HEX, RGB, and HSL values.

Open tool

Color Palette Extractor

Extract dominant colors from any image using k-means clustering.

Open tool

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor.

Open tool

CSS Box Shadow Generator

Design box shadows visually with live preview.

Open tool