Color System
The UX4G color palette is rooted in India's national identity — Brand Purple, Saffron, and Green — extended with a functional gray scale and semantic tokens for consistent, accessible interfaces.
Brand Colors
The three brand families, each a full 50→950 ramp. Primary carries most interactive weight; Secondary and Tertiary provide warm and cool accents.
Primary
Core brand violet — headers, primary actions, focus.
50
#f2efff
100
#dcd4ff
200
#c0b3ff
300
#a391ff
400
#8670ff
500
#6a4eff
600
#4a2bc2
700
#3d239f
800
#301c7d
900
#24145c
950
#1a0e3d
Secondary
Warm amber — secondary accents and highlights.
50
#fff5ea
100
#ffebd6
200
#ffd9af
300
#ffbe6f
400
#e89c30
500
#c47d00
600
#a46800
700
#764a00
800
#4b2d00
900
#281600
950
#110700
Tertiary
Soft purple — supporting brand accent.
50
#f6effb
100
#e9daf3
200
#d9bfea
300
#c8a3e0
400
#b686d6
500
#a66acc
600
#8e55b3
700
#75419a
800
#5d2f80
900
#462166
950
#32174a
Semantic Colors
Semantic color families represent common interface states, such as Green for success, Red for error and danger, Orange for warning, and Cyan/Blue for information.
Green
Success — positive and completed states.
50
#f2fcef
100
#ddf8d8
200
#beefbb
300
#80da88
400
#44c265
500
#1aa64a
600
#128937
700
#006c35
800
#00522c
900
#00381f
950
#002110
Red
Error & danger — destructive actions and failures.
50
#fff8f8
100
#ffecee
200
#ffdadc
300
#ffb3ae
400
#ff8983
500
#f55e57
600
#db372d
700
#b3251e
800
#8a1a16
900
#60150f
950
#3a0907
Orange
Warning — caution and attention states.
50
#fff7e6
100
#ffe7bf
200
#ffd899
300
#ffc973
400
#ffba4d
500
#ffab27
600
#fa8c16
700
#d46b08
800
#ad4e00
900
#873800
950
#612500
Cyan
Information — informational and neutral notices.
50
#e6fffb
100
#c9f7f2
200
#adf0e9
300
#91e8e0
400
#75e0d7
500
#59d8ce
600
#13c2c2
700
#08979c
800
#006d75
900
#00474f
950
#002329
Blue
Accent blue — links and secondary information.
50
#f5faff
100
#e7f2ff
200
#d0e4ff
300
#a1c9ff
400
#76acff
500
#4e8ff8
600
#3271ea
700
#1157ce
800
#04409f
900
#012c6f
950
#001944
Neutral Colors
The Neutral Colors from pure white to pure black — the backbone of surfaces, text, and borders across both light and dark themes.
0 · White
#ffffff
50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d9d9d9
400
#a1a1a1
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0a0a0a
1000 · Black
#000000
Semantic Tokens
Purpose-driven color assignments that adapt between light and dark themes.
Text Colors - Neutral
Text Colors - Brand
Text Colors - Status
Text Colors - Links
Icon Colors
Background Colors - Neutral
Background Colors - Brand
Background Colors - Status
Border Widths
Border Colors - Neutral
Border Colors - Status
Border Colors - Brand
Color Accessibility
All color combinations must meet WCAG 2.1 AA contrast requirements.
Do
- • Use Purple (#4a2bc2) on white for body text — 16.75:1 ratio
- • Use semantic tokens instead of raw hex values
- • Test with color blindness simulators
- • Ensure 4.5:1 minimum for normal text, 3:1 for large text
Don't
- • Don't use color alone to convey meaning
- • Don't use light gray text on white backgrounds
- • Don't override semantic tokens with hardcoded values
- • Don't use Saffron for body text (insufficient contrast)