Generate complete light/dark theme color palettes from brand colors using Rampensau algorithm. Use when building design systems with brand-driven colors, creating semantic color scales (success/error/warning/info), generating accessible color contrasts (WCAG AA/AAA), implementing dark mode, or integrating colors into UnoCSS presets. Triggers on palette generation, theme color setup, brand color system, or accessibility-first color design.
Convert a brand color into a complete 12-step color scale with light/dark modes, semantic colors, and WCAG validation:
import { createGuidedPalette } from 'slurpyb-unocss/color'
import { definePreset } from 'unocss'
export const preset = definePreset(async (options) => {
const palette = await createGuidedPalette({
brandColor: '#003DA5', // American Blue
tags: ['professional', 'high-contrast'],
accessibility: 'AA', // Ensure WCAG AA compliance
formats: ['hex', 'oklch'],
})
// palette.output has 6 color families × 12 steps × 2 modes (light/dark)
// Smart-named: "Blue Jay", "Aurora Green" (semantic), "Grisaille" (neutral), etc.
return {
theme: {
colors: palette.output, // UnoCSS-ready theme colors
},
}
})
Result:
Every palette has 6 color families:
Each family: 12 steps from very light (1) to very dark (12).
Style tags adjust how colors are generated. Combine multiple tags: