Accessible Traffic Light
Split-Complementary • 5 colors • ⚖️ Neutral
Colors
Vibrant Crimson
#C62828RGB(198, 40, 40) • HSL(0°, 66%, 47%)
CMYK(0%, 80%, 80%, 22%)
Passion, energy, urgency, power, love
Electric Amber
#F9A825RGB(249, 168, 37) • HSL(37°, 95%, 56%)
CMYK(0%, 33%, 85%, 2%)
Creativity, enthusiasm, adventure, confidence
Vivid Emerald
#2E7D32RGB(46, 125, 50) • HSL(123°, 46%, 34%)
CMYK(63%, 0%, 60%, 51%)
Nature, health, growth, harmony, money
Vivid Indigo
#1565C0RGB(21, 101, 192) • HSL(212°, 80%, 42%)
CMYK(89%, 47%, 0%, 25%)
Trust, professionalism, calm, security, loyalty
Purity White
#FFFFFFRGB(255, 255, 255) • HSL(0°, 0%, 100%)
CMYK(0%, 0%, 0%, 0%)
Purity, simplicity, cleanliness, minimalism, peace
Harmony
Custom
A unique combination tailored to your needs.
Temperature
Neutral
Contrast
AA: 4.5:1 · AAA: 7:1
Palette Health Score
Accessibility
Harmony
Total
= Palette Health
Accessibility Matrix (WCAG)
Contrast ratio between all color pairs. AA requires 4.5:1 for text, AAA requires 7:1.
| - | 2.85:1Fail | 1.1:1Fail | 1.02:1Fail | 5.62:1AA | |
2.85:1Fail | - | 2.6:1Fail | 2.92:1Fail | 1.97:1Fail | |
1.1:1Fail | 2.6:1Fail | - | 1.12:1Fail | 5.13:1AA | |
1.02:1Fail | 2.92:1Fail | 1.12:1Fail | - | 5.75:1AA | |
5.62:1AA | 1.97:1Fail | 5.13:1AA | 5.75:1AA | - |
Color Blindness Simulation
How this palette appears to people with different types of color vision deficiency.
Original
Protanopia (red-blind)
~1.3%Deuteranopia (green-blind)
~1.2%Tritanopia (blue-blind)
~0.01%Achromatopsia (total)
~0.003%Psychology & Meaning
Recommended Uses
Mobile Apps
Works well for mobile interfaces
Web Design
Suitable for modern websites
Palette Statistics
Type
Balanced
Temperature
⚖️ Neutral
Light / Dark
2 / 3
Avg Contrast
3.0:1
Hue Distribution
Color Properties
Contrast Analysis
Minimum
1.0:1
Average
3.0:1
Maximum
5.8:1
WCAG AA requires 4.5:1 for text, 3:1 for large text
Suggestions
Well balanced palette! Good variety and contrast.
Harmony Analysis
Detected Harmony
Custom
A unique combination tailored to your needs.
Harmony Score
Accessibility Report
Accessibility
/100
WCAG AA
PASS
Text contrast with white/black
Colorblind
WARNING
Color distinction for CVD users
Quality Criteria
Issues Found (7)
Colores 1 y 2 difíciles de distinguir (2.85:1) en modo normal
Colores 1 y 3 difíciles de distinguir (1.10:1) en modo normal
Colores 1 y 4 difíciles de distinguir (1.02:1) en modo normal
Colores 2 y 3 difíciles de distinguir (2.60:1) en modo normal
Colores 2 y 4 difíciles de distinguir (2.92:1) en modo normal
Colores 2 y 5 difíciles de distinguir (1.97:1) en modo normal
Colores 3 y 4 difíciles de distinguir (1.12:1) en modo normal
Gradients
Full linear gradient
background: linear-gradient(90deg, #C62828, #F9A825, #2E7D32, #1565C0, #FFFFFF);#C62828 → #F9A825
#F9A825 → #2E7D32
#2E7D32 → #1565C0
#1565C0 → #FFFFFF
Tints & Shades
Lighter (tints) and darker (shades) variations of each color
#C62828
#F9A825
#2E7D32
#1565C0
#FFFFFF
Export Code
:root {
--color-1: #C62828;
--color-2: #F9A825;
--color-3: #2E7D32;
--color-4: #1565C0;
--color-5: #FFFFFF;
}Related Palettes
Explore variations and alternatives generated from this palette
Complementary
Opposite colors on the wheel
Analogous Shift
Shifted 30° on the wheel
Lighter Version
15% lighter
Darker Version
15% darker
Muted
30% less saturation
Vibrant
30% more saturation
Triadic Shift
Shifted 120° on the wheel
Split Complementary
Shifted 150° on the wheel
Monochromatic
Based on first color
Preview
See how your palette looks in a real landing page context
Welcome to Our Platform
Discover amazing features and boost your productivity with our innovative solutions.
Feature One
Feature Two
Feature Three
© 2026 Your Brand. All rights reserved.