Lavender Ledge
A complete five-role scheme. creative and fresh in character — tagged for tech, beauty.
primary
#7161ef secondary
#a99ff5 accent
#f4a261 background
#f9f8ff text
#241f45 AcmeSign up
Ship your next idea faster
Everything you need to launch, in one place.
Get started Learn moreOpen this scheme in the Studio →
Color values
| Role | Hex | RGB | HSL |
|---|---|---|---|
| primary | #7161ef | 113, 97, 239 | 247°, 82%, 66% |
| secondary | #a99ff5 | 169, 159, 245 | 247°, 81%, 79% |
| accent | #f4a261 | 244, 162, 97 | 27°, 87%, 67% |
| background | #f9f8ff | 249, 248, 255 | 249°, 100%, 99% |
| text | #241f45 | 36, 31, 69 | 248°, 38%, 20% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.66 | AAA |
| primary on background | 4.27 | AA-large |
| secondary on background | 2.22 | fail |
| accent on background | 1.95 | fail |
| background on primary | 4.27 | AA-large |
| background on accent | 1.95 | fail |
CSS variables
:root {
--color-primary: #7161ef;
--color-secondary: #a99ff5;
--color-accent: #f4a261;
--color-bg: #f9f8ff;
--color-text: #241f45;
}Tailwind
colors: {
primary: '#7161ef',
secondary: '#a99ff5',
accent: '#f4a261',
background: '#f9f8ff',
text: '#241f45',
}