dragoon0x Color Palette Generation
From One Color to Full System
Step 1: Choose your primary
One color that carries the brand's emotional weight.
Step 2: Generate the scale
50: Almost white with a hint of hue
100: Very light tint
200: Light tint
300: Light-medium
400: Medium-light
500: Your primary color ← start here
600: Medium-dark
700: Dark
800: Very dark
900: Near-black with hue
950: Darkest
Step 3: Add neutrals
Warm gray if brand is warm, cool gray if cool, true gray if neutral. Same 50-950 scale.
Step 4: Add semantic colors
- Success: Green that doesn't clash with primary
- Warning: Amber/yellow
- Error: Red distinct from any brand red
- Info: Blue distinct from any brand blue
Step 5: Verify
- All text colors pass WCAG AA on their intended backgrounds
- Status colors are distinguishable from each other
- Dark mode versions work with adjusted lightness