# 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 active_h = if(use_picker, hue(brand_color), hue) active_s = if(use_picker, saturation(brand_color), saturation) active_l = if(use_picker, lightness(brand_color), lightness) secondary = hsl(mod(active_h + 150, 360), active_s * 0.9, active_l) accent = hsl(mod(active_h + 210, 360), min(100, active_s * 1.1), max(20, active_l * 1.05)) surface_dark = hsl(active_h, 28, 9) surface_light = hsl(active_h, 25, 97) surface_card = hsl(active_h, 24, 15) surface_card_border = hsl(active_h, 20, 24) text_on_brand = if(contrast(brand_color, "#ffffff") >= 4.5, "#ffffff", "#0f172a") text_on_sec = if(contrast(secondary, "#ffffff") >= 4.5, "#ffffff", "#0f172a") text_on_acc = if(contrast(accent, "#ffffff") >= 4.5, "#ffffff", "#0f172a") contrast_dark = contrast(brand_color, surface_dark) contrast_light = contrast(brand_color, surface_light) contrast_text_brand = contrast(brand_color, text_on_brand) wcag_on_dark = if(contrast_dark >= 7.0, "AAA Pass", if(contrast_dark >= 4.5, "AA Pass", "Low (<4.5)")) wcag_on_light = if(contrast_light >= 7.0, "AAA Pass", if(contrast_light >= 4.5, "AA Pass", "Low (<4.5)")) cursor_x = round(40 + (active_h / 360) * 760) shade_50 = lighten(brand_color, 42) shade_100 = lighten(brand_color, 32) shade_200 = lighten(brand_color, 22) shade_300 = lighten(brand_color, 12) shade_400 = lighten(brand_color, 6) shade_500 = brand_color shade_600 = darken(brand_color, 6) shade_700 = darken(brand_color, 16) shade_800 = darken(brand_color, 26) shade_900 = darken(brand_color, 36) # 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) shade 50 = shade_50 shade 100 = shade_100 shade 200 = shade_200 shade 300 = shade_300 shade 400 = shade_400 shade 500 = shade_500 shade 600 = shade_600 shade 700 = shade_700 shade 800 = shade_800 shade 900 = shade_900 # WCAG Audit @tab @density(compact) @icon(shield-check) contrast dark = contrast_dark contrast light = contrast_light contrast text brand = contrast_text_brand wcag on dark = wcag_on_dark wcag on light = wcag_on_light