E-Commerce Coral Cart
Engaging retail checkout palette using high-conversion coral accents alongside neutral gray structural scaffolding.
#App UI#Vibrant#UI#Modern#Warm
COLOR 1
#1F2937
Black Opal
COLOR 2
#4B5563
Slate 600
COLOR 3
#F43F5E
Rose 500
COLOR 4
#FB7185
Watermelon Red
COLOR 5
#FFF1F2
Lavender Blush
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #1F2937;
--color-2: #4B5563;
--color-3: #F43F5E;
--color-4: #FB7185;
--color-5: #FFF1F2;
}Role-Based WCAG Contrast Audit
Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:
Sample Text
#1F2937 on #FB71855.45:1
Normal Text AA Pass
Sample Text
#1F2937 on #FFF1F213.36:1
Normal Text AA Pass
Sample Text
#4B5563 on #FB71852.81:1
Large Text Only (Fail)
Sample Text
#4B5563 on #FFF1F26.88:1
Normal Text AA Pass
Sample Text
#F43F5E on #FB71851.36:1
Large Text Only (Fail)
Sample Text
#F43F5E on #FFF1F23.34:1
Large Text Only (Pass)