Skip to main content
Urbicon UI

Theme Builder

Pick your brand color and instantly generate a complete, perceptually-uniform palette — accent plus a matched neutral chassis so surfaces, text and borders share its temperature. Uses OKLCH for consistent contrast across all shades.

Brand Color

240°
0.15
0.58

Secondary Color

280°
0.12

Secondary Palette

50
100
200
300
400
500
600
700
800
900
950

Chassis (Neutral)

The tint behind surfaces, text and borders. Match it to your accent so the whole UI shares one temperature instead of a fixed cool grey.

240°
1.00×

Chassis Palette

25
50
100
200
300
400
500
600
650
700
750
800
850
900
950
Border Radius

Generated Palette

50
100
200
300
400
500
600
700
800
900
950

Presets

Live Preview

Buttons

Badges

Primary Secondary Soft Soft

Form Elements

Composition

TB

Your Custom Theme

Hue 240° · Chroma 0.15

CSS Output

@theme {
  /* Generated by Urbicon UI Theme Builder */
  /* Primary Hue: 240 | Secondary Hue: 280 | Chassis: hue 240 */

  --color-primary-50: oklch(0.95 0.03 240);
  --color-primary-100: oklch(0.9 0.0495 240);
  --color-primary-200: oklch(0.82 0.0795 240);
  --color-primary-300: oklch(0.74 0.1095 240);
  --color-primary-400: oklch(0.66 0.1305 240);
  --color-primary-500: oklch(0.58 0.15 240);
  --color-primary-600: oklch(0.52 0.15 240);
  --color-primary-700: oklch(0.44 0.1305 240);
  --color-primary-800: oklch(0.36 0.1095 240);
  --color-primary-900: oklch(0.28 0.0795 240);
  --color-primary-950: oklch(0.18 0.0495 240);

  --color-secondary-50: oklch(0.95 0.024 280);
  --color-secondary-100: oklch(0.9 0.0396 280);
  --color-secondary-200: oklch(0.82 0.0636 280);
  --color-secondary-300: oklch(0.74 0.0876 280);
  --color-secondary-400: oklch(0.66 0.10439999999999999 280);
  --color-secondary-500: oklch(0.55 0.12 280);
  --color-secondary-600: oklch(0.52 0.12 280);
  --color-secondary-700: oklch(0.44 0.10439999999999999 280);
  --color-secondary-800: oklch(0.36 0.0876 280);
  --color-secondary-900: oklch(0.28 0.0636 280);
  --color-secondary-950: oklch(0.18 0.0396 280);
}

How to Use

  1. 1

    Adjust the sliders

    Pick a hue, chroma, and lightness that match your brand identity.

  2. 2

    Copy the CSS output

    Click "Copy CSS" and paste the @theme block into your stylesheet.

  3. 3

    Overrides are applied automatically

    Tailwind 4's @theme directive merges with the default tokens. All components pick up your custom colors.