v147 · CSS · contrast-color()

Theme Generator

Pick one brand color. Every UI component — header, cards, buttons, badges, tabs — automatically gets readable text via contrast-color(). One CSS custom property drives the whole kit.

Brand color

#1a6cff

Presets

UI Kit preview

App header

Acme App

Tabs

Cards

Revenue
$142,500 this quarter
Users
24,891 active accounts
Uptime
99.97% last 30 days

Buttons

Badges

new beta v2.4 pending

Search

Progress

65% complete

CSS pattern

:root {
  --brand: #1a6cff; /* one custom property drives everything */
}

.header, .card-header, .btn-primary, .badge {
  background: var(--brand);
  color: contrast-color(var(--brand)); /* auto black or white */
}

.btn-outline, .badge-outline {
  color: var(--brand); /* no contrast-color needed here — it's on white bg */
  border-color: var(--brand);
}

.tab.active {
  background: var(--brand);
  color: contrast-color(var(--brand));
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗