Rose#FF0054
Orange Red#FF5400
Amber#FFBD00
Medium Spring Green#00FFB3
Amethyst#9B5DE5
Color Palette
#FF0054 · #FF5400 · #FFBD00 · #00FFB3 · #9B5DE5
triadic0 likes
Share
Export for Developers
:root {
--color-1: #FF0054;
--color-1-rgb: 255, 0, 84;
--color-1-hsl: 340, 100%, 50%;
--color-2: #FF5400;
--color-2-rgb: 255, 84, 0;
--color-2-hsl: 20, 100%, 50%;
--color-3: #FFBD00;
--color-3-rgb: 255, 189, 0;
--color-3-hsl: 44, 100%, 50%;
--color-4: #00FFB3;
--color-4-rgb: 0, 255, 179;
--color-4-hsl: 162, 100%, 50%;
--color-5: #9B5DE5;
--color-5-rgb: 155, 93, 229;
--color-5-hsl: 267, 72%, 63%;
}Real World Preview
Get Started
Accessibility
WCAG Accessibility Report
Excellent#FF0054
On White
3.9:1Fail
On Black
5.38:1AA
Aa
Aa
#FF5400
On White
3.22:1Fail
On Black
6.52:1AA
Aa
Aa
#FFBD00
On White
1.68:1Fail
On Black
12.53:1AAA
Aa
Aa
#00FFB3
On White
1.32:1Fail
On Black
15.95:1AAA
Aa
Aa
#9B5DE5
On White
4.13:1Fail
On Black
5.09:1AA
Aa
Aa
Contrast ratios calculated per WCAG 2.1. AA requires ≥4.5:1, AAA requires ≥7:1 for normal text.
Palette Variations
Palette Variations
Original
☀️
lighter
· Increased lightness, reduced saturation
#F76E9C
#F79C6E
#F7D36E
#6EF7CE
#D1B9EF
🌑
darker
· Reduced lightness, increased saturation
#990033
#993300
#997000
#00996B
#6519C2
🌫️
muted
· Desaturated for a calm, muted look
#D92662
#D96226
#D9A926
#26D9A3
#9D79C8
⚡
vibrant
· Boosted saturation for maximum impact
#FF0055
#FF5500
#FFBB00
#00FFB3
#8F33FF