algorithmic-color-palettelisted

# Algorithmic Colour Palette A brand palette of 2–3 colours is not enough for a UI. You need shades for states (hover, active, disabled), neutrals for backgrounds and borders, and semantic colours for status. Deriving these algorithmically from the brand colours produces a palette that feels coherent — everything is visually related to the brand rather than pulled from a generic grey or a stock colour library. ## Deriving Interactive State Colours From each brand colour, generate at minimum three variants: base, darker (hover/active), lighter (tint/background). ### Method: HSL adjustment ``` base: hsl(H, S%, L%) hover: hsl(H, S%, L% - 8%) ← darken by reducing lightness active: hsl(H, S%, L% - 14%) ← darken further tint: hsl(H, S%, L% + 40%) ← lighten significantly for backgrounds subtle: hsl(H, S% * 0.3, L% + 45%) ← heavily desaturated, near-white ``` ### Example: brand primary `#133174` (hsl 224, 70%, 27%) ```css --color-primary-subtle: hsl(224, 21%, 94%); /* background tint */ --color-primary-tint: hsl(224, 70%, 67%); /* light variant */ --color-primary: hsl(224, 70%, 27%); /* base */ --color-primary-hover: hsl(224, 70%, 19%); /* hover: -8% lightness */ --color-primary-active: hsl(224, 70%, 13%); /* active: -14% lightness */ ``` ### Example: success green derived from a teal brand colour If the brand has a green or teal, shift it toward a clearer success green: ```css --color-success-subtle: hsl(142, 20%, 94%); --color-suc