Curated color combinations
Color Palettes with HEX Codes
Explore twelve curated color combinations across pastel, earth tone, neutral and dark mode palettes. Each example includes five HEX codes, suggested surface, text and accent roles, and calculated contrast for the reading pair and accent label.
Pastel Color Palettes
Three pastel palettes with HEX codes and a worked newsletter form: soft fills, readable labels, a corrected input border, and checked CSS roles.
Explore 3 palettes and their rolesEarth Tone Color Palettes
Earth tone palettes with terracotta, olive, sand and brown HEX codes, plus a worked product card with a corrected action color and checked CSS.
Explore 3 palettes and their rolesNeutral Color Palettes
Warm, cool and monochrome neutral palettes with HEX codes, plus a catalog example that fixes faint secondary text and provides checked CSS roles.
Explore 3 palettes and their rolesDark Mode Color Palettes
Dark mode palettes with navy, charcoal and plum HEX codes, plus a dashboard example with checked text, action labels, and both sides of a card edge.
Explore 3 palettes and their rolesHow to choose a color palette
Start with the page surface and reading text, then choose an accent for the main action. Pastels provide light background options; earth tones pair muted greens with clay and sand; neutrals emphasize warm or cool grays; dark mode examples begin with dark surfaces and light text. Open a collection to see each choice applied to a small working preview.
Use a palette as a starting set of roles, then test the combinations in your own layout. The displayed checks use opaque sRGB colors and the WCAG AA threshold of 4.5:1 for normal text. They do not validate every possible pair or every state of a component. Read the W3C text contrast guidance.
Already have a brand color? Generate color palettes, browse individual colors, or check a text and background pair.