Brand Colors
Select your primary and secondary brand colors to generate a complete color palette.
Primary Color Scale
Text
hsba(217, 76%, 96%, 1.00)Contrast: 4.5:1
Stroke strong
hsba(217, 76%, 96%, 0.80)Contrast: 3:1
Stroke weak
hsba(217, 76%, 96%, 0.20)Contrast: N/A
Fill
hsba(217, 76%, 96%, 0.05)Contrast: N/A
Monochromatic Scale
Fixed grey scale for neutral UI elements
Text strong
hsba(230, 100%, 15%, 0.90)Contrast: 4.5:1
Text weak
hsba(230, 100%, 20%, 0.65)Contrast: 4.5:1
Stroke strong
hsba(230, 100%, 30%, 0.45)Contrast: 3:1
Stroke weak
hsba(230, 100%, 40%, 0.10)Contrast: N/A
Fill weak
hsba(230, 100%, 50%, 0.04)Contrast: N/A
Fill weaker
hsba(230, 100%, 50%, 0.02)Contrast: N/A
Status Colors
System colors used to indicate different statuses in your application.
Error
Color Scale
Text
hsba(0, 83%, 86%, 1.00)Contrast: 4.5:1
Stroke strong
hsba(0, 83%, 86%, 0.80)Contrast: 3:1
Stroke weak
hsba(0, 83%, 86%, 0.20)Contrast: N/A
Fill
hsba(0, 83%, 86%, 0.05)Contrast: N/A
Warning
Color Scale
Text
hsba(38, 96%, 96%, 1.00)Contrast: 4.5:1
Stroke strong
hsba(38, 96%, 96%, 0.80)Contrast: 3:1
Stroke weak
hsba(38, 96%, 96%, 0.20)Contrast: N/A
Fill
hsba(38, 96%, 96%, 0.05)Contrast: N/A
Success
Color Scale
Text
hsba(142, 87%, 64%, 1.00)Contrast: 4.5:1
Stroke strong
hsba(142, 87%, 64%, 0.80)Contrast: 3:1
Stroke weak
hsba(142, 87%, 64%, 0.20)Contrast: N/A
Fill
hsba(142, 87%, 64%, 0.05)Contrast: N/A
Contrast Checker
Check the contrast ratio between foreground and background colors in HSBA format.
Foreground Color
hsba(0, 0%, 0%, 1.00)
Background Color
hsba(0, 0%, 100%, 1.00)
Contrast Results
Contrast Ratio21.00:1
WCAG AA Normal Text (4.5:1)✓ Pass
WCAG AA Large Text (3:1)✓ Pass
WCAG AAA Normal Text (7:1)✓ Pass
WCAG AAA Large Text (4.5:1)✓ Pass
Sample Text