Quickstart

Open the app

Color Palette runs entirely in your browser — no install, no sign-up. Visit karan-gera.github.io/color-palette to open the live app.

The app works offline after the first load. All data stays in your browser’s localStorage.

Run locally

If you want to run a local copy or contribute to the project:

Clone the repository

git clone https://github.com/karan-gera/color-palette.git
cd color-palette

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:5173 in your browser.

Generate your first palette

Open the app

Visit the live app or your local dev server. You’ll see a palette of five colors on screen.

Reroll the palette

Press R to generate a new set of colors. Each press replaces all unlocked colors with new ones derived from the active color relationship.You can also click the Reroll button in the toolbar.

Choose a color relationship

Press Q to cycle through the seven color theory modes:

Mode	Description
Random	Any random color
Complementary	Opposite on the color wheel (180°)
Analogous	Adjacent colors (±30°)
Triadic	Evenly spaced 120° apart
Tetradic	Four colors spaced 90° apart (square)
Split-complementary	The complement plus its two neighbors (±30°)
Monochromatic	Same hue, varied saturation and lightness

The current relationship is shown in the toolbar. Switching relationships and pressing R gives you palettes that follow the new structure.

Try a preset

Press P to cycle through palette presets. Presets constrain the HSL ranges to a specific mood:

Pastel — soft, light tones (saturation 25–45%, lightness 75–88%)
Neon — vivid, electric colors (saturation 85–100%, lightness 50–60%)
Earth Tones — warm, natural hues (hue 15–50°, saturation 25–55%)
Jewel Tones — rich, deeply saturated (saturation 55–80%, lightness 30–50%)
Monochrome — grayscale spread (saturation 0–5%)
Warm — reds, oranges, yellows (hue 330–60°)
Cool — blues, teals, purples (hue 180–280°)
Muted — low saturation, subtle (saturation 10–30%)

Press Shift+P to reroll the current preset without switching to a different one.

Lock colors and reroll

Locking a color keeps it in place while you reroll the rest. Locked colors also become the reference for generating new ones — so if you lock a deep teal, the relationship engine builds new colors around that anchor.

Lock a color by position

Press the number key matching the color’s position. 1 locks the first color, 2 locks the second, and so on. 0 locks the tenth.A lock icon appears on the color when it’s locked.

Reroll the unlocked colors

Press R. Locked colors stay in place; unlocked colors are replaced with new ones derived from the locked ones.

Unlock a color

Press the same number key again to toggle the lock off.

You can also reroll a single color without unlocking it: press Alt+[number] to reroll just that color. This is useful when one color in an otherwise good palette isn’t working.

Copy a color

Click the hex label displayed below any color swatch. A dropdown menu appears — select the format you want and it is copied to your clipboard immediately. Six formats are supported (a seventh, CSS Name, appears only when the color closely matches a CSS named color):

Format	Example
HEX	`#3b82f6`
RGB	`rgb(59, 130, 246)`
HSL	`hsl(217, 91%, 60%)`
CSS Variable	`--color-primary: #3b82f6;`
Tailwind	`'primary': '#3b82f6'`
SCSS	`$color-primary: #3b82f6;`

A confirmation indicator appears briefly after copying.

Export your palette

Press E to open the export dialog.

Code formats
Art app formats

Code formats copy to your clipboard or download as a file:

CSS Variables — generates a :root { } block with --color-1 through --color-N
JSON — a { "colors": [...] } array of hex values
Tailwind Config — a ready-to-paste tailwind.config.js colors block with color-1 through color-N keys
SCSS Variables — $color-1 through $color-N variable declarations

Example CSS output for a 3-color palette:

:root {
  --color-1: #3b82f6;
  --color-2: #f59e0b;
  --color-3: #10b981;
}

Example Tailwind output:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'color-1': '#3b82f6',
        'color-2': '#f59e0b',
        'color-3': '#10b981',
      }
    }
  }
}

Art app formats download a binary or text file you import directly into your design application:

Format	File	Compatible apps
Adobe ASE	`.ase`	Photoshop, Illustrator, Clip Studio Paint
Adobe ACO	`.aco`	Photoshop
Procreate Swatches	`.swatches`	Procreate
GIMP Palette	`.gpl`	GIMP, Krita
Paint.NET Palette	`.txt`	Paint.NET

Photoshop / Illustrator import:

Download the .ase file
Open the Swatches panel (Window > Swatches)
Click the menu and choose Import Swatches (or Open Swatch Library > Other Library)
Select the .ase file

Procreate import:

Save the .swatches file to the Files app
In Procreate, tap Colors > Palettes > + > New from file
Select the .swatches file

GIMP / Krita import:

Download the .gpl file
Place it in ~/.config/GIMP/palettes/ (Linux/macOS) or the equivalent Windows path
Restart GIMP and find the palette under Windows > Dockable Dialogs > Palettes

See the export formats reference for complete import instructions.

Save to your browser

Press S to save the current palette to localStorage. Saved palettes are stored on your device and never leave your browser.

Open a saved palette

Press O to open the saved palette browser and load a previously saved palette.

Copy a share link

Press C to copy a share link. The palette data is encoded directly in the URL — no server is involved. Anyone with the link can open your exact palette.

Browse palette history

Press H to open the palette history panel, which shows previously generated palettes from your session.

Keyboard shortcuts overview

Press / at any time to see all shortcuts in the app. Here are the most useful ones to know:

Key	Action
`A` / `Space`	Add a color
`R`	Reroll all unlocked colors
`1`–`9`, `0`	Lock / unlock color by position
`Shift+[number]`	Delete color by position
`Alt+[number]`	Reroll a single color
`Shift+Alt+[number]`	Edit a color by position
`Q`	Cycle color relationship
`P`	Cycle palette preset
`Shift+P`	Reroll current preset
`I`	Open eyedropper / color picker
`E`	Export palette
`S`	Save palette
`O`	Open saved palette
`C`	Copy share link
`Z`	Undo
`Shift+Z`	Redo
`F`	Toggle preview mode
`G`	Cycle views (palette / gradient / extract)
`K`	Toggle contrast checker
`Y`	Toggle harmony score
`T`	Cycle theme
`Shift+T`	Cycle color blindness simulation
`H`	Toggle palette history
`M`	Toggle rearrange mode
`/`	Show all shortcuts
`Shift+/`	Open docs

The V key followed by a number (e.g., V 1) opens the color variations panel for that color, showing its tints, shades, and tones.

Next steps

Color relationships

Learn how each color theory mode generates colors and when to use each one.

Presets

Understand the HSL constraints behind each preset and how to combine them with relationships.

Accessibility tools

Check WCAG contrast ratios and preview color blindness simulations.

Export formats

Full reference for all 9 export formats and app import instructions.

Get Started

Palette Tools

Color Tools

Views

Accessibility

Save & Export

Reference

Open the app

Run locally

Generate your first palette

Lock colors and reroll

Copy a color

Export your palette

Keyboard shortcuts overview

Next steps

Color relationships

Presets

Accessibility tools

Export formats

Build docs developers (and LLMs) love

Get Started

Palette Tools

Color Tools

Views

Accessibility

Save & Export

Reference

​Open the app

​Run locally

​Generate your first palette

​Lock colors and reroll

​Copy a color

​Export your palette

​Save and share your palette

​Keyboard shortcuts overview

​Next steps

Color relationships

Presets

Accessibility tools

Export formats

Build docs developers (and LLMs) love

Open the app

Run locally

Generate your first palette

Lock colors and reroll

Copy a color

Export your palette

Save and share your palette

Keyboard shortcuts overview

Next steps