Smart Website Color Scheme — Semantic CSS Tokens

Generate a smart website color scheme in your browser. Steps: pick a brand HEX (sample teal #0F6E8C), get shared neutrals, action/hover/soft/focus, neutral links, fixed status colors, a chrome preview, AA self-checks, then copy :root CSS or JSON. Example loads on open. Rule-based — not cloud AI; nothing uploads.

Brand themes

Shared neutrals + status colors; each theme only overrides brand-derived tokens. Max 4 themes.

Light UI preview

Contrast self-check (active theme)

Primitives (active theme + shared neutrals)

Token	Value

Semantics (active theme)

Token	Value	Role

How it works

Enter one or more brand themes (id + HEX, up to four). The tool keeps a shared neutral ladder, derives action tokens from each brand, maps semantic roles (including neutral links and fixed status colors), paints a light chrome preview, runs AA self-checks, and lets you copy CSS variables or JSON — all locally.

Rules you should expect

Layered tokens, link vs action, status independence, contrast hints, and privacy.

Primitives hold raw neutrals and brand derivatives. Semantics name purpose (bg, surface, link, action…). Components should only reference semantics.
Brand → --action; hover darkens about 22%; soft ≈ 10% alpha; focus-ring ≈ 40% alpha; --bg is a lightly tinted neutral.
Links map to text / text-strong (neutral). Do not bind default --link to --action.
Danger / success / warning / info stay fixed across themes so brand never replaces error semantics.
Privacy: generation, preview, and clipboard copy run in this tab. No upload of brand colors.

Example

Load the sample (theme id teal, #0F6E8C). Preview shows a white surface, teal soft highlight on the active sidebar item (no left accent bar), neutral body links, and a red danger line. Semantics map --link to text color (not --action). Copy CSS yields :root neutrals plus html[data-theme="teal"] overrides.

Good fits

Tooling or SaaS chrome: ship a readable light shell with brand accents on selection and focus, not on every link.
Landing rebrands: swap html[data-theme] brands while keeping the same neutral skeleton and status colors.
Design-to-dev handoff: paste :root CSS variables instead of screenshot HEX lists.

Frequently asked questions

Is “smart” the same as AI color generation?

Here “smart” means deterministic rules: neutrals stay fixed, brand derives action/hover/soft/focus, links stay neutral, and status colors never follow the brand. No model call and no upload — math runs in this tab.

Why are links not the brand color?

Default links use text colors so the page does not turn into a brand-colored hyperlink wall. Brand color is reserved for actions, selection, focus rings, and light soft fills.

Why don’t status colors change with the theme?

Danger, success, warning, and info stay fixed across themes. An amber brand must not become the error color, or the whole UI looks like an alert.

When should I use Generate Brand Color Scale instead?

Use Generate Brand Color Scale when you need a 50–950 ramp or HEX/HSL/OKLCH listings. Use this page for a full light-site semantic scheme (bg/surface/link/action/status) ready to paste.

How complete is the contrast self-check?

Self-checks cover a few key pairs on the active theme. For arbitrary foreground/background pairs or AAA, open the WCAG contrast checker and paste any token HEX.

Questions or feedback

Something unclear, broken, or missing? Draft a message below — we read every note about these tools.