Color Palette Generator

Create harmonious color schemes using color theory.
Pick a base color and choose a harmony type.

Base Color

Harmony Type

Generated Palette

Brand

CSS Variables

:root {
  --color-1: #6366f1;
  --color-2: #f26467;
  --color-3: #67f264;
}

Tailwind Config

colors: {
  palette: {
    '1': '#6366f1',
    '2': '#f26467',
    '3': '#67f264',
  },
}

Hex Array

["#6366f1","#f26467","#67f264"]

See a color scheme you love? Frontend Hero's Color Palette Explorer extracts all colors from any website in one click. No more manual color picking.

Get Frontend Hero now →

Create grid layouts visually

Create flex layouts visually

Create custom gradients

Gradient text effects

275+ ready-to-use gradients

Design multi-layer shadows

Style text highlight colors

Style custom scrollbars

Mix colors with blend modes

Preview all cursor styles

Create loading animations

Design buttons with hover effects

Create neon glow effects

Scale text across screen sizes