1. Choose a base color
Pick a color that matches the mood of your project. It can be a brand color, a photograph-inspired color or a rough direction you want to explore.
2. Select a harmony style
Analogous palettes feel calm and related. Complementary palettes add contrast. Triadic palettes are lively. Monochrome palettes are clean and controlled.
3. Copy and test
Copy the HEX or CSS custom property values and test them in real layouts. A palette only becomes useful when it works with type, spacing and contrast.
4. Check readability
Use a contrast checker before publishing. Beautiful colors still need accessible contrast for buttons, body text and important interface elements.