Theme Builder
Paste your brand hex. Get a complete shade scale, accessibility audit, and live component preview.
Theme Builder
Paste your brand hex color. Get a full shade scale, accent palette, and live component preview.
Brand Score
100%
Primary#3b82f6
50
100
200
300
400
500
600
700
800
900
950
Accent#ce6620
50
100
200
300
400
500
600
700
800
900
950
Accessibility
Aa700 on light8.0:1AA
Aa600 on light5.7:1AA
Aa500 on light3.7:1AA Large
Aa300 on dark10.8:1AA
Aa400 on dark7.3:1AA
Aa200 on dark13.1:1AA
Live Component Preview
Navigation active state
Active Link
Inactive LinkButtons
Solid BrandSoft BrandPlain Brand
Callout
Note Title
This callout uses your brand primary palette for the note variant.
Prose links
Documentation text with a brand-colored link that adapts to your palette.
Heading gradient
Brand Heading Gradient
CSS Output
:root {
/* Brand Primary */
--brand-primary-50: #e0f7ff;
--brand-primary-100: #d6edff;
--brand-primary-200: #c4dcff;
--brand-primary-300: #aac9fa;
--brand-primary-400: #72a5f6;
--brand-primary-500: #387bea;
--brand-primary-600: #175cc7;
--brand-primary-700: #0145a6;
--brand-primary-800: #002e7b;
--brand-primary-900: #00205e;
--brand-primary-950: #001041;
--brand-primary: #387bea;
/* Brand Accent */
--brand-accent-50: #ffeddc;
--brand-accent-100: #ffe3d1;
--brand-accent-200: #fcd0b9;
--brand-accent-300: #fbb58f;
--brand-accent-400: #e68a55;
--brand-accent-500: #c3601e;
--brand-accent-600: #9c4703;
--brand-accent-700: #7b3602;
--brand-accent-800: #592300;
--brand-accent-900: #401a01;
--brand-accent-950: #2a0b00;
--brand-accent: #c3601e;
/* Brand Gradient */
--brand-gradient-from: #c4dcff;
--brand-gradient-via: #fcd0b9;
--brand-gradient-to: #c4dcff;
}
/* Dark mode — adjust surfaces and gradients */
/* Add inside your dark variant or @media (prefers-color-scheme: dark) */
/* html.dark { */
/* --brand-gradient-from: #72a5f6; */
/* --brand-gradient-via: #fbb58f; */
/* --brand-gradient-to: #72a5f6; */
/* } */
