Moss & Thistle Trail is a complementary color palette tagged modern, purple. Near-complementary hues (about 176° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Lavender | #EDE7F6 | rgb(237, 231, 246) | hsl(264, 45%, 94%) | oklch(93.7% 0.021 304) | |
| Thistle | #C9B8EA | rgb(201, 184, 234) | hsl(260, 54%, 82%) | oklch(81.3% 0.072 300) | |
| Moss | #889140 | rgb(136, 145, 64) | hsl(67, 39%, 41%) | oklch(63.2% 0.106 115) | |
| Space | #2F2A45 | rgb(47, 42, 69) | hsl(251, 24%, 22%) | oklch(30.3% 0.048 292) |
Why it works and how to use it
It works because the lightness range is wide (22% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Lavender (#EDE7F6) is the lightest color, so it belongs on large surfaces.
- Text: Space (#2F2A45) on #EDE7F6 gives 11.29:1, passing WCAG AAA.
- Primary: Thistle (#C9B8EA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Moss (#889140) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Space at 11.29:1.
Preview on a real UI see how the palette feels in context
Design faster with Moss & Thistle Trail
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryColor blindness simulation
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#EDE7F6 on #2F2A45 | Aa | 11.29:1 | AAA |
#C9B8EA on #2F2A45 | Aa | 7.5:1 | AAA |
#889140 on #2F2A45 | Aa | 4.01:1 | AA large only |
#EDE7F6 on #889140 | Aa | 2.81:1 | Fail |
#C9B8EA on #889140 | Aa | 1.87:1 | Fail |
#EDE7F6 on #C9B8EA | Aa | 1.51:1 | Fail |