Free toolRuns in your browser
Theme generator
Choose a brand colour and get a complete Aback UI theme: an 11-step ramp and contrast-checked link, focus, and fill roles for light and dark, previewed on real components and ready to paste as CSS.
HEX, rgb(), hsl(), or oklch().
Ramp
- 50#f7f5ff
- 100#ebe8ff
- 200#dad2ff
- 300#c3b4ff
- 400#aa8eff
- 500#9569ff
- 600 · your colour#7c3aed
- 700#652fc3
- 800#4f219c
- 900#3d187a
- 950#280f53
Preview with real components
The preview applies the generated roles live. Utilities that read ramp steps directly, such as bg-primary-500, change once the CSS is compiled into your project.
Roles and contrast
Each text role takes the shade nearest the middle of the ramp that still reaches WCAG AA (4.5:1) on its background; focus rings and icons need 3:1. A failing row means no shade of this hue gets there, so pick a different colour.
| Light role | Value | Contrast |
|---|---|---|
| --link | #7c3aed | 5.69:1on #ffffff, needs 4.5:1, passes |
| --link-hover | #652fc3 | 7.60:1on #ffffff, needs 4.5:1, passes |
| --focus-ring | #9569ff | 3.66:1on #ffffff, needs 3:1, passes |
| --brand-icon | #9569ff | 3.66:1on #ffffff, needs 3:1, passes |
| --brand-chip | #ebe8ff | Decorative |
| --brand-wash | #f7f5ff | Decorative |
| --brand-fill | #7c3aed | 5.69:1on #ffffff text, needs 4.5:1, passes |
| --on-brand-fill | #ffffff | Decorative |
| --info | #7c3aed | Decorative |
| --info-soft | #f7f5ff | Decorative |
| Dark role | Value | Contrast |
|---|---|---|
| --link | #c3b4ff | 10.67:1on #0a0a0a, needs 4.5:1, passes |
| --link-hover | #dad2ff | 13.82:1on #0a0a0a, needs 4.5:1, passes |
| --focus-ring | #aa8eff | 7.58:1on #0a0a0a, needs 3:1, passes |
| --brand-icon | #aa8eff | 7.58:1on #0a0a0a, needs 3:1, passes |
| --brand-chip | #3d187a | Decorative |
| --brand-wash | rgb(61 24 122 / 0.3) | Decorative |
| --brand-fill | #c3b4ff | 8.82:1on #280f53 text, needs 4.5:1, passes |
| --on-brand-fill | #280f53 | Decorative |
| --info | #dad2ff | Decorative |
| --info-soft | rgb(61 24 122 / 0.3) | Decorative |
CSS
Paste this into your global stylesheet after the Aback theme import (styles/aback.css from aback-ui init, or @aback-ui/tokens). It replaces the Aback Blue ramp and brand roles; neutrals and status colours stay as they are.
/* Generated at https://abackui.com/themes. Paste after the Aback theme import. */
@theme inline {
--color-primary-50: #f7f5ff;
--color-primary-100: #ebe8ff;
--color-primary-200: #dad2ff;
--color-primary-300: #c3b4ff;
--color-primary-400: #aa8eff;
--color-primary-500: #9569ff;
--color-primary-600: #7c3aed;
--color-primary-700: #652fc3;
--color-primary-800: #4f219c;
--color-primary-900: #3d187a;
--color-primary-950: #280f53;
}
:root {
--link: #7c3aed;
--link-hover: #652fc3;
--focus-ring: #9569ff;
--brand-icon: #9569ff;
--brand-chip: #ebe8ff;
--brand-wash: #f7f5ff;
--brand-fill: #7c3aed;
--on-brand-fill: #ffffff;
--info: #7c3aed;
--info-soft: #f7f5ff;
}
.dark {
--link: #c3b4ff;
--link-hover: #dad2ff;
--focus-ring: #aa8eff;
--brand-icon: #aa8eff;
--brand-chip: #3d187a;
--brand-wash: rgb(61 24 122 / 0.3);
--brand-fill: #c3b4ff;
--on-brand-fill: #280f53;
--info: #dad2ff;
--info-soft: rgb(61 24 122 / 0.3);
}
How the theme is generated
The generator builds a 50 to 950 ramp from your colour in OKLCH, the same way the Tailwind colour scale generator does. It then fills the brand roles Aback UI components read. For each text role it walks the ramp from the middle outward and takes the first shade that reaches 4.5:1 on the theme's background, white in light and #0a0a0a in dark. Focus rings and icons need 3:1. The filled brand button checks its label colour against the fill instead.
What each role controls
- --link and --link-hover: inline links and link buttons.
- --focus-ring: the keyboard focus outline on every interactive component.
- --brand-icon: icons that carry the brand, such as feature icons.
- --brand-chip and --brand-wash: tinted backgrounds for badges, selected rows, and callouts.
- --brand-fill and --on-brand-fill: the brand button and its label.
- --info and --info-soft: informational alerts and badges.
Neutral roles such as background, foreground, border, and the ink primary button are not changed, and neither are the success, warning, and danger colours. Theming explains every role and the rules that keep overrides working.
After you paste it
Check the theme in both modes on your real pages, not only in this preview: long text, small text, and disabled states are where problems show. The contrast checker is there for any pair you add yourself, and dark mode covers switching themes without a flash on load.
Frequently asked questions
Where do I paste the generated CSS?
In your global stylesheet, after the line that imports the Aback theme (styles/aback.css from aback-ui init, or @aback-ui/tokens/tokens.css for the npm package). Later declarations win, so your roles and ramp replace the Aback Blue defaults.
Why are buttons not filled with my brand colour?
In Aback UI the default action is neutral ink and the brand colour is a signal: links, focus, selection, and the brand button variant. That keeps the brand colour meaningful. Use variant="brand" on Button where you want a filled brand action.
What if a role fails its contrast check?
The generator picks the best shade it can, but some hues, such as bright yellows, cannot reach 4.5:1 on white at any shade that still looks like the hue. If a row fails, choose a deeper brand colour or keep the brand colour for decoration and use ink for text.
Does this work without Aback UI?
The ramp works in any Tailwind CSS v4 project as --color-primary-* theme variables. The role names (--link, --focus-ring, --brand-fill, and the rest) are the ones Aback UI components read, so they only take effect with Aback UI or a theme that uses the same names.