Skip to main content
Urbicon UI

Theme Builder

Pick your brand color and generate a matched palette: accent plus a 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

This moves the base scale, which the modify, contain and bridge tiers read from — so fields, panels and the middle tier (Menu panels, chat bubbles) all follow. Pill-tier components (Button, Badge) keep their pill: --radius-commit is a literal, so set it yourself to square them. The radio dot has its own literal and stays a circle either way — see Radius Tiers.

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

Soft fills like this one read the 50/900 stops of your generated ramp.

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.1044 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.1044 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. Coming from a hex value? Start from the preset nearest your brand, then nudge the hue until the 500 swatch matches.

  2. 2

    Copy the CSS output

    Click "Copy CSS" and save it as my-theme.css, or paste it at the end of app.css, below the imports.

  3. 3

    Import it after the base styles

    In app.css: @import '@urbicon-ui/blocks/style/index.css'; then @import './my-theme.css';. The @theme block needs Tailwind 4; it merges into the library tokens. If the builder flagged an intent collision above, re-tune that ramp before shipping.