Color Palette Generator

Generate color palettes from a base color with six harmony rules, lock colors, check contrast, and export CSS, SCSS, Tailwind or JSON.

Configuration

Base color

Harmony type

Generated palette

RGB(59, 223, 246)

RGB(59, 130, 246)

RGB(81, 59, 246)

Accessibility (WCAG contrast)

#3bdff6Best on black:13.07:1 ✓ AA

#3b82f6Best on black:5.71:1 ✓ AA

#513bf6Best on white:6.35:1 ✓ AA

Export palette

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

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use Color Palette Generator

1

Pick your primary color

Use the color picker or enter a HEX value to select a base color. This anchors your palette; all generated colors relate harmoniously to it.
2

Choose a harmony rule

Click a harmony button: Complementary (opposite), Analogous (adjacent), Triadic (three spaced), Tetradic (four-square), or Monochromatic. See colors regenerate instantly.
3

Customize individual colors and lock favorites

Click the color picker icon on each swatch to manually edit. Click the lock icon to freeze colors when regenerating. Click 'Show Shades' to see lightness variations.
4

Export palette in your format

Select export format (CSS, SCSS, Tailwind, JSON, array) and copy or download. Use directly in your stylesheet or design system.
5

Test accessibility

Check WCAG contrast ratios at the bottom. Green ✓ means AA-compliant text. Use the suggestions to ensure readable color pairs.

Questions and answers

What is Color Palette Generator?

A color palette is a small set of colors chosen to work together, often derived from a base color by its position on the color wheel. This generator builds complementary, analogous, triadic, tetradic, split-complementary or monochromatic palettes and exports CSS variables, SCSS, Tailwind config, JSON or an array.

What color harmony types are available?

It supports complementary, analogous, triadic, tetradic, split-complementary, and monochromatic harmonies. Each generates a mathematically balanced color scheme based on color wheel relationships.

REST API

Base URL

https://aidevhub.io/api/color-palette/

No authentication, fair use. Abusive traffic is throttled at the edge; responses carry no quota headers. CORS enabled. OpenAPI spec

Endpoints

GET /api/color-palette/generate/ Generate a color palette

GET /api/color-palette/convert/ Convert a color

Example

curl "https://aidevhub.io/api/color-palette/generate/?color=%233b82f6&scheme=analogous"

const res = await fetch("https://aidevhub.io/api/color-palette/generate/", {
  method: "GET",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
  "color": "#3b82f6",
  "scheme": "analogous"
}),
});
const data = await res.json();
console.log(data);

import requests

res = requests.post(
    "https://aidevhub.io/api/color-palette/generate/",
    json={"color":"#3b82f6","scheme":"analogous"},
)
print(res.json())

Example Response

{
  "colors": [
    {
      "hex": "#3b82f6",
      "name": "Dodger Blue"
    }
  ]
}

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Dedicated API endpoint

Deterministic outputs, machine-safe contracts, and production-ready examples.

Dedicated API

https://aidevhub.io/api/color-palette/generate/

OpenAPI: https://aidevhub.io/api/openapi.yaml

GET /api/color-palette/generate/ GET color-palette/generate

POST /api/color-palette/generate/ POST color-palette/generate

Color Palette Generator