# Color Palette Generator & Dynamic Theme Studio @icon(palette) @category(design) @theme(night) @skin(spec-sheet) @layout(split) > Design system color theme generator with interactive HSL sliders, live @color picker, automated WCAG 2.1 accessibility contrast audits, and a dynamic SVG theme studio with clickable spectrum and randomizer. #design #color #theme #palette #svg #wcag #contrast # Color Selection & Controls @controls @density(compact) @icon(sliders-horizontal) use_picker = false // @toggle(off) @label(Use Color Picker) picker_color = "#4f46e5" // @color @label(Hex Color Picker) @disabled(!use_picker) hue = 238 // @slider(0, 360, 1) @label(Hue) @disabled(use_picker) saturation = 85 // @slider(10, 100, 1) @label(Saturation %) @disabled(use_picker) lightness = 58 // @slider(15, 85, 1) @label(Lightness %) @disabled(use_picker) brand_color = if(use_picker, picker_color, hsl(hue, saturation, lightness)) // @hero @label(Brand Color) presets = "" // buttons({Ocean: {hue: 212, saturation: 88, lightness: 52, picker_color: "#1d4ed8", use_picker: false}, Sunset: {hue: 22, saturation: 94, lightness: 58, picker_color: "#ea580c", use_picker: false}, Cyber: {hue: 290, saturation: 95, lightness: 62, picker_color: "#c026d3", use_picker: false}, Emerald: {hue: 155, saturation: 75, lightness: 42, picker_color: "#059669", use_picker: false}, Berry: {hue: 338, saturation: 88, lightness: 58, picker_color: "#e11d48", use_picker: false}}) @label(Presets) # Engine @hidden [h, s, l] = [hue(brand_color), saturation(brand_color), lightness(brand_color)] secondary = hsl(mod(h + 150, 360), s * 0.9, l) accent = hsl(mod(h + 210, 360), min(100, s * 1.1), max(20, l * 1.05)) surfaces = { dark: hsl(h, 28, 9), light: hsl(h, 25, 97), card: hsl(h, 24, 15), border: hsl(h, 20, 24) } text_color(bg) = contrast(bg, "#ffffff") >= 4.5 ? "#ffffff" : "#0f172a" text = { brand: text_color(brand_color), sec: text_color(secondary), acc: text_color(accent) } wcag(r) = r >= 7.0 ? "AAA Pass" : (r >= 4.5 ? "AA Pass" : "Low (<4.5)") cursor_x = round(40 + (h / 360) * 760) shades = map([42, 32, 22, 12, 6, 0, -6, -16, -26, -36], d => d > 0 ? lighten(brand_color, d) : (d < 0 ? darken(brand_color, -d) : brand_color)) # Theme Studio @tab @icon(palette) palette_studio = svg(``) // @label(Interactive Palette Studio) @wide # Component UI @tab @icon(layout) component_mockup = svg(``) // @label(Live Component Mockup) @wide # Shade Ramp @tab @density(compact) @icon(layers) tints_and_shades = shades // @label(50-900 Tints & Shades) # WCAG Audit @tab @density(compact) @icon(shield-check) contrast_dark = contrast(brand_color, surfaces.dark) // @label(Contrast Dark Surface) wcag_on_dark = wcag(contrast_dark) // @label(WCAG Dark Rating) contrast_light = contrast(brand_color, surfaces.light) // @label(Contrast Light Surface) wcag_on_light = wcag(contrast_light) // @label(WCAG Light Rating) contrast_text_brand = contrast(brand_color, text.brand) // @label(Contrast Text on Brand)