Radix UI - Accessible Color System
A comprehensive color system designed for accessibility and visual harmony in modern interfaces. Radix UI’s Color System is a thoughtfully crafted palette designed for visual harmony in modern interfaces. Explore vibrant hues like #3B82F6 (blue) and #10B981 (green), copy values, and build stunning, accessible UIs with ease.
Accessible Color Palette with WCAG Compliance
Blue 1
#FBFDFF
--blue1
Blue 2
#F5FAFF
--blue2
Blue 3
#EDF6FF
--blue3
Blue 4
#E1F0FF
--blue4
Blue 5
#CEE7FE
--blue5
Blue 6
#B7D9F8
--blue6
Blue 7
#96C7F2
--blue7
Blue 8
#5EB0EF
--blue8
Blue 9
#0091FF
--blue9
Blue 10
#0081F1
--blue10
Blue 11
#006ADC
--blue11
Blue 12
#00254D
--blue12
Gray 1
#FCFCFC
--gray1
Gray 2
#F9F9F9
--gray2
Gray 3
#F0F0F0
--gray3
Gray 4
#E8E8E8
--gray4
Gray 5
#E0E0E0
--gray5
Gray 6
#D9D9D9
--gray6
Gray 7
#CECECE
--gray7
Gray 8
#BBBBBB
--gray8
Gray 9
#8D8D8D
--gray9
Gray 10
#838383
--gray10
Gray 11
#646464
--gray11
Gray 12
#202020
--gray12
Radix UI Color Generator
Generate and test colors from the Radix UI palette
Color Generator
Generate color variations and test them in real components
Real-world UI Examples
See how Radix UI colors look in practical applications
Track your expenses
Total Expenses
$12,543
Analytics
Revenue$15,989
Expenses$12,543
Gain control
Advanced settings
Categories
Groceries
9 transactions
$2,345
Household
12 transactions
$1,876
Financial Summary
Income
$15,989
$18,871 last period
Expenses
$12,543
$10,221 last period
All Set!
Your Radix UI configuration is complete.
Traditional Components
Buttons
Alerts
Information
This is an informational alert using default colors.
Success
This is a success alert with Radix UI styling.
Form Elements
Badges
Primary
Secondary
Accent
Outline