Build a complete design system palette from one colour
Start with your brand's primary colour. Enter it in the picker, then use the shades row to generate 9 lightness levels. Your lightest shade (10% lightness) works as a background tint, mid-range shades work for borders and secondary elements, and dark shades work for text. This is the same technique used by Tailwind CSS, Material Design, and Radix UI.
Always check contrast before finalising text colours
The contrast ratio panel updates instantly as you change colours. Before committing to any text/background combination, paste the background colour into the picker and check the contrast ratio. WCAG AA (4.5:1) is the minimum for body text; aim for AAA (7:1) for small text on important UI elements.
Use HSL to create hover states automatically
Switch to HSL view and note your primary colour's values. A hover state that darkens by 10% lightness is always harmonious: if your button is HSL(240, 80%, 55%), its hover state is HSL(240, 80%, 45%). No guesswork, no colour wheel spinning.
Generate CSS custom properties from the all-formats panel
The "All formats" panel shows your colour in every format simultaneously. Copy the HSL value and use it as a CSS custom property: --color-primary-hsl: 239, 84%, 67%; — then use it in components as hsl(var(--color-primary-hsl)). This pattern lets you adjust opacity easily: hsla(var(--color-primary-hsl), 0.5).
The 60-30-10 rule with the shade generator
A classic design composition rule: 60% of the UI uses a dominant (neutral) colour, 30% uses a secondary colour, and 10% uses an accent. Use the shade generator to find compatible lightness values across your palette that maintain this ratio naturally.