Command Palette

Search for a command to run...

Custom palette tool

Generate Tamil DS-compatible color scales

Pick a base color, tune chroma and hue, then export 12-step OKLCH tokens for light and dark themes. The tool checks contrast and previews real surfaces before you ship a palette.

Generated light scale

Step 9 is the solid action color · Step 12 is high-emphasis text

9
1
#fbf8ff
2
#f5f0ff
3
#ede5ff
4
#e1d6ff
5
#cfc0fd
6
#b7a2f0
7
#a084e5
8
#8d69da
9
#8056d0
10
#6e47b7
11
#563790
12
#23173c

Approval checks

All passing

Action contrast 5.05:1

Solid action color must support readable foreground text (WCAG AA ≥ 4.5).

Primary text 15.86:1

Step 12 should be strong enough for body copy and headings (AAA ≥ 7).

Secondary text 8.52:1

Step 11 should remain readable for helper text and labels (AA ≥ 4.5).

Text on tint 13.70:1

Tamil labels must remain crisp on softly tinted surfaces (AAA ≥ 7).

Component preview

Real surfaces using your generated scale

Brand scale

Service status preview

சேவை நிலை முன்னோட்டம்

This preview checks whether headings, Tamil helper text, borders, and primary actions remain clear together.

Step 1–5 should feel like a soft state, not a full-page color wash.

CSS tokens

:root {
  --brand-1: oklch(0.985 0.022 296);
  --brand-2: oklch(0.965 0.033 296);
  --brand-3: oklch(0.940 0.047 296);
  --brand-4: oklch(0.900 0.065 296);
  --brand-5: oklch(0.840 0.087 296);
  --brand-6: oklch(0.760 0.112 296);
  --brand-7: oklch(0.680 0.141 296);
  --brand-8: oklch(0.610 0.166 296);
  --brand-9: oklch(0.560 0.181 296);
  --brand-10: oklch(0.500 0.170 296);
  --brand-11: oklch(0.420 0.141 296);
  --brand-12: oklch(0.240 0.069 296);

  --brand: var(--brand-9);
  --brand-hover: var(--brand-10);
  --brand-foreground: oklch(0.99 0 0);
}

.dark {
  --brand-1: oklch(0.190 0.022 296);
  --brand-2: oklch(0.230 0.033 296);
  --brand-3: oklch(0.280 0.047 296);
  --brand-4: oklch(0.340 0.065 296);
  --brand-5: oklch(0.410 0.087 296);
  --brand-6: oklch(0.500 0.112 296);
  --brand-7: oklch(0.580 0.141 296);
  --brand-8: oklch(0.660 0.166 296);
  --brand-9: oklch(0.720 0.181 296);
  --brand-10: oklch(0.780 0.170 296);
  --brand-11: oklch(0.840 0.141 296);
  --brand-12: oklch(0.920 0.069 296);

  --brand: var(--brand-9);
  --brand-hover: var(--brand-10);
  --brand-foreground: oklch(0.10 0 0);
}

Approval guidance

Custom palettes should still behave like Tamil DS.

Do

Approve the palette only after checking buttons, focus rings, Tamil helper text, and semantic states.

Don't

Do not ship a single attractive swatch as a system color. It needs surfaces, borders, text, and states.