Theme Customizer
Preview AIToo theme tokens and export CSS colors in HSL, HEX, RGB, OKLCH, and more
Note: This tool previews AIToo's 5-token theme system and exports CSS in HSL channel, HSL, HEX, RGB, HWB, LAB, LCH, OKLAB, OKLCH, and color(srgb) formats. The site uses the Monochrome theme by default; theme selection here only affects the preview area below.
Choose Theme to Preview
Theme Preview
Typography Hierarchy
This is a large paragraph of text
This is a regular paragraph of text
This is small muted text
Card Component
This is how cards look with the selected theme.
Generated CSS
For hsl(var(--token))
/* HSL channel tokens. Use them with hsl(var(--primary)). */
:root {
--primary: 0 0% 98%;
--pre-primary: 0 0% 99.5%;
--secondary: 0 0% 10%;
--tertiary: 0 0% 40%;
--accent: 0 0% 20%;
}
.dark {
--primary: 0 0% 8%;
--pre-primary: 0 0% 12%;
--secondary: 0 0% 85%;
--tertiary: 0 0% 40%;
--accent: 0 0% 20%;
}Color Palette
5-Color Theme System
Color Roles
- primary - Main background color
- pre-primary - Light background for cards
- secondary - Text color
- tertiary - Highlights and emphasis
- accent - Actions and links
Output Formats
- HSL Channel: hsl(var(--primary))
- Complete colors: var(--primary)
- HEX / RGB: broad tooling support
- OKLCH / OKLAB: modern perceptual color
- LAB / LCH / HWB / color(srgb)
About Theme Customizer
Preview AIToo's 5-color theme system with primary, pre-primary, secondary, tertiary, and accent tokens, then export matching CSS in multiple color syntaxes. The generator supports HSL channel tokens for hsl(var(--token)) workflows plus complete CSS values in HSL, HEX, RGB, HWB, LAB, LCH, OKLAB, OKLCH, and color(srgb). Use the live preview to test light and dark mode across buttons, cards, forms, typography, and interactive elements before copying the CSS into a design system or prototype.
Frequently Asked Questions
What colors can I customize in the theme system?
The tool focuses on AIToo's 5-color theme system: primary, pre-primary, secondary, tertiary, and accent. These map to page backgrounds, panel backgrounds, text, highlights, and interactive states.
Which CSS color formats can I export?
You can export HSL channel tokens, complete HSL values, HEX, RGB, HWB, LAB, LCH, OKLAB, OKLCH, and color(srgb) values. HSL channel output is best for hsl(var(--token)) systems like AIToo.
Can I preview light and dark mode before using a theme?
Yes, the live preview lets you test theme colors across common UI elements and switch between light and dark mode so you can catch contrast or readability issues early.
Is the generated theme useful outside AIToo?
Yes. Use HSL channel output for token systems that wrap variables in hsl(), or choose complete color values such as HEX, RGB, or OKLCH for standard CSS variables and external design systems.
Try Our Browser Extension
Access essential tools instantly from your browser sidebar. Available for Chrome and Microsoft Edge.