CURATED COLOR STUDY · Soft studio
Pastel Website Color Palette with HEX Codes
Keep the softness in the large areas and the strength in the text. This five-color scheme pairs three pale accents with a warm near-white surface and a deliberately dark ink, so a pastel identity can still carry readable product information.
HEX codes and intended roles
| Color | HEX | Role |
|---|---|---|
| Lavender | Primary | |
| Mint | Secondary | |
| Peach | Accent | |
| Warm paper | Surface | |
| Plum ink | Ink |
How to use this combination
Use lavender for feature panels, mint for supporting sections and peach for small decorative highlights. Give body copy the plum ink rather than placing white text on the pastel fills. The dark ink also makes a useful button fill when the action needs more visual weight.
A SMALL WEBSITE STUDY
Soft studio
Thoughtful details. A little room to breathe.
Explore the collection →Body text: 13.72:1 · CTA text: 12.86:1
Measured contrast pairs
Ratios use the WCAG 2.2 opaque sRGB formula. Normal text AA needs 4.5:1; large text AA needs 3:1. Labels use the full unrounded result. This table checks pairs, not full accessibility conformance.
| Pair | Ratio | Normal AA | Inspect |
|---|---|---|---|
| Body text on page | 13.72:1 | Pass | #292738 on #FAF8F2 |
| Ink on primary | 7.89:1 | Pass | #292738 on #C4B5FD |
| Ink on secondary | 10.58:1 | Pass | #292738 on #BFE4D3 |
| Ink on accent | 8.92:1 | Pass | #292738 on #F4BFA8 |
| Primary as text on page | 1.74:1 | Fail | #C4B5FD on #FAF8F2 |
| White on accent | 1.63:1 | Fail | #FFFFFF on #F4BFA8 |
What to avoid
Lavender on warm paper is a decorative pairing, not a body-text pairing. A low-contrast pastel border cannot be the only way to identify an input or selected tab. Add a darker boundary, a label or a shape cue.
A project example
For a creative portfolio, put project titles in plum ink, place thumbnails on lavender cards and use peach for small category markers. Reserve mint for the contact section so it signals a change of task without introducing a sixth color.
Take the colors into your project
Download CSS variables, DTCG color tokens or a Palunio JSON backup. CSS and tokens use the five roles above. The backup imports into Saved palettes. For print, convert through your printer’s color-managed workflow; these are screen colors.
Next: read the related practical guide, build a primary scale, or compare the other curated palettes.