Skip to content
RGBHex

Real-Time UI Visualizer

Pick one brand color and see a full UI repaint live — light and dark, derived in OKLCH so neutrals stay tied to your hue and text stays readable. Your color lives in the URL, so any theme is shareable.

Lightness0.550
Chroma0.190
Hue264.0°
Preview mode
Live preview of the generated theme across navigation, buttons, cards, inputs, and notices.

Theme tokens — light

Background#fafcff
Foreground#181d27
Card#fefefe
Card Foreground#181d27
Muted#edf2fc
Muted Foreground#555e6f
Primary#3567de
Primary Foreground#ffffff
Secondary#e6efff
Secondary Foreground#242933
Border#d9dee8
Ring#3567de
Destructive#cc2827
Destructive Foreground#ffffff

Copy as CSS variables

globals.css
:root {
  --background: #fafcff;
  --foreground: #181d27;
  --card: #fefefe;
  --card-foreground: #181d27;
  --muted: #edf2fc;
  --muted-foreground: #555e6f;
  --primary: #3567de;
  --primary-foreground: #ffffff;
  --secondary: #e6efff;
  --secondary-foreground: #242933;
  --border: #d9dee8;
  --ring: #3567de;
  --destructive: #cc2827;
  --destructive-foreground: #ffffff;
}

.dark {
  --background: #0d0f15;
  --foreground: #eef2f9;
  --card: #15181f;
  --card-foreground: #eef2f9;
  --muted: #212630;
  --muted-foreground: #959fb2;
  --primary: #3567de;
  --primary-foreground: #ffffff;
  --secondary: #1e2d4c;
  --secondary-foreground: #dee5f2;
  --border: #292e38;
  --ring: #3567de;
  --destructive: #cc2827;
  --destructive-foreground: #ffffff;
}

Drop into your stylesheet; the .dark block applies under a .dark class (matching shadcn/ui and next-themes class-based dark mode).

How to use the visualizer

Set your brand color with the input or the sliders, then toggle light and dark to see the full interface repaint in real time. When it looks right, copy the CSS variables and drop them into your project — or share the URL, which encodes the exact color.

Why OKLCH-derived themes

A theme built by nudging lightness and chroma in OKLCH stays perceptually consistent: dark mode is a true lightness inversion, neutrals share your brand hue without looking muddy, and the guaranteed-contrast foreground tokens hold across the whole hue circle. It is the same engine philosophy as the theme builder, aimed at a live full-page preview rather than a single scale.

Frequently asked questions

How does one color become a whole theme?

Your color sets the brand: `primary` starts from your color's chroma (clamped only as needed for sRGB), while the neutrals (background, card, muted, border) carry a faint trace of the same hue at very low chroma, so the whole UI feels cohesive. Light and dark mode are an OKLCH-lightness inversion of that neutral ramp — not a separate palette. The destructive red stays fixed so danger actions remain recognizable.

Is the generated theme accessible?

Primary and destructive button text is chosen black or white at the WCAG luminance crossover, so it always clears AA (4.5:1) on those colors; the neutral foreground/surface pairs are derived in OKLCH and contrast-tested to AA. Note that if you pick a very light or very dark brand color, primary buttons can still be low-contrast against the page itself — the live preview shows you exactly when that happens.

Does this work with Tailwind or shadcn/ui?

Yes. The exported CSS uses the same token names shadcn/ui expects (`--background`, `--primary`, `--muted-foreground`, etc.), with a `:root` block for light and a `.dark` block for dark. Paste it into your global stylesheet and your components inherit the theme.

Why derive it in OKLCH instead of HSL?

OKLCH is perceptually uniform, so a fixed lightness reads as the same brightness across hues — which is what makes the dark-mode inversion and the readable-text guarantee actually hold. HSL lightness does not behave that way (yellow at 50% looks far brighter than blue at 50%).

Is my color sent anywhere?

No. The whole theme is derived in your browser. Your brand color is encoded in the URL so you can share or bookmark a theme, but nothing is uploaded.

Related tools

References

This tool’s color math is grounded in the following standards and primary sources.

Reviewed by Jimmy Raymond, Engineer
B.S. Environmental Engineering · B.S. Computer Science · Last reviewed June 2, 2026

Spotted an error? Let us know — reader corrections are the best review this site gets.