Tool reference

Color Palette Studio

beta

Design color palettes, extract dominant colors from image uploads, inspect HEX/HSL/RGB conversions, and export code variables.

Open tool Back to docs

Quickstart

Use this when you want the shortest path from input to a useful result.

Select or input a HEX base color code.

Inspect the auto-generated palette schemes.

Or upload a local image to extract dominant hex keys.

Best for

Common situations where this tool fits naturally into the workflow.

Build matching color harmonies (complementary, triadic) for UI designs.
Extract brand color hex codes from an uploaded logo image.
Generate ready-to-copy Tailwind configuration code for accent colors.

Common tasks

Concrete ways this tool is typically used in day-to-day workflows.

Generate Monochromatic variants

Enter your primary color hex code. The monochromatic scheme generates 5 sequential lighter/darker shades suitable for hover styles and borders.

Extract colors from image

Upload an image. The canvas pixel-sampler isolates the 5 most frequent non-gray colors and renders them as clickable swatches.

Get Tailwind theme configurations

Select your color, scroll down to see the generated Tailwind JSON config object, and copy it into your tailwind.config.js.

Examples

Real inputs and outputs that show how the tool behaves.

Color Conversion

Translate HEX to RGB and HSL.

HEX input

#6366f1

Conversions

RGB: rgb(99, 102, 241)
HSL: hsl(239, 84%, 67%)

Features

What this tool includes and what each capability is for.

Color picker

Standard HSL/HEX picker with interactive swatch panels.

Image extraction

Sample dominant colors from local images via Canvas APIs.

Tailwind export

Ready-to-copy theme config structures.

Harmonies

Generates complementary, triadic, and monochromatic schemes.

Workflow

Follow this path to get from input to output quickly.

Use the color picker or upload an image to select a color.

Browse the generated schemes in the palette grid.

Copy your desired color or copy the Tailwind configuration block.

Caveats and tips

Things to keep in mind before relying on the output in a larger workflow.

Caveats

Image extraction uses local downsampling and filters out pure grayscale/monochrome pixels to avoid returning only white or black values.
Large image files are downsampled to a 50x50 canvas for fast rendering and to avoid page performance lag.

Tips

Clicking on any color tile in a scheme copies its HEX value directly to your clipboard.
Move the color selector around to see HSL and RGB conversions update instantly.