About Radix Colors
Radix Colors provides a balanced 12-step scale per hue, designed for accessible, well-separated UI. Step 9 serves as the accent, while steps 1 and 2 are near-white backgrounds.
How to use
Import CSS variables like --blue-9 and pair light and dark themes. The scale guarantees readable contrast between adjacent steps.
Official documentation ↗
Red
#E5484D
Shades
1 #FFF 2 #FFF 3 #FEE 4 #FFD 5 #FFC 6 #FDB 7 #F4A 8 #EB8 9 #E54 10 #DC3 11 #CE2 12 #641
Tomato
#E54D2E
Shades
1 #FFF 2 #FFF 3 #FEE 4 #FFD 5 #FFC 6 #FDB 7 #F5A 8 #EC8 9 #E54 10 #DD4 11 #D13 12 #5C2
Orange
#F76B15
Shades
1 #FEF 2 #FFF 3 #FFE 4 #FFD 5 #FFD 6 #FFC 7 #F5A 8 #EC9 9 #F76 10 #EF5 11 #CC4 12 #582
Amber
#FFC53D
Shades
1 #FEF 2 #FEF 3 #FFF 4 #FFE 5 #FBE 6 #F3D 7 #E9C 8 #E2A 9 #FFC 10 #FFB 11 #AB6 12 #4F3
Yellow
#FFE629
Shades
1 #FDF 2 #FEF 3 #FFF 4 #FFF 5 #FFE 6 #F3D 7 #E4C 8 #D5A 9 #FFE 10 #FFD 11 #9E6 12 #473
Lime
#BDEE63
Shades
1 #FCF 2 #F8F 3 #EEF 4 #E2F 5 #D3E 6 #C2D 7 #ABC 8 #8DB 9 #BDE 10 #B0E 11 #5C7 12 #374
Green
#30A46C
Shades
1 #FBF 2 #F4F 3 #E6F 4 #D6F 5 #C4E 6 #ADD 7 #8EC 8 #5BB 9 #30A 10 #2B9 11 #218 12 #193
Teal
#12A594
Shades
1 #FAF 2 #F3F 3 #E0F 4 #CCF 5 #B8E 6 #A1D 7 #83C 8 #53B 9 #12A 10 #0D9 11 #008 12 #0D3
Cyan
#00A2C7
Shades
1 #FAF 2 #F2F 3 #DEF 4 #CAF 5 #B5E 6 #9DD 7 #7DC 8 #3DB 9 #00A 10 #079 11 #107 12 #0D3
Sky
#7CE2FE
Shades
1 #F9F 2 #F1F 3 #E1F 4 #D1F 5 #BEE 6 #A9D 7 #8DC 8 #60B 9 #7CE 10 #74D 11 #007 12 #1D3
Blue
#0090FF
Shades
1 #FBF 2 #F4F 3 #E6F 4 #D5E 5 #C2E 6 #ACD 7 #8EC 8 #5EB 9 #009 10 #058 11 #0D7 12 #113
Indigo
#3E63DD
Shades
1 #FDF 2 #F7F 3 #EDF 4 #E1E 5 #D2D 6 #C1D 7 #ABB 8 #8DA 9 #3E6 10 #335 11 #3A5 12 #1F2
Violet
#6E56CF
Shades
1 #FDF 2 #FAF 3 #F4F 4 #EBE 5 #E1D 6 #D4C 7 #C2B 8 #AA9 9 #6E5 10 #654 11 #655 12 #2F2
Purple
#8E4EC6
Shades
1 #FEF 2 #FBF 3 #F7E 4 #F2E 5 #EAD 6 #E0C 7 #D1A 8 #BE9 9 #8E4 10 #834 11 #814 12 #402
Pink
#D6409F
Shades
1 #FFF 2 #FEF 3 #FEE 4 #FBD 5 #F6C 6 #EFB 7 #E7A 8 #DD9 9 #D64 10 #CF3 11 #C22 12 #651
Crimson
#E93D82
Shades
1 #FFF 2 #FEF 3 #FFE 4 #FED 5 #FAC 6 #F3B 7 #EAA 8 #E09 9 #E93 10 #DF3 11 #CB1 12 #621
Ruby
#E54666
Shades
1 #FFF 2 #FFF 3 #FEE 4 #FFD 5 #FFC 6 #F8B 7 #EFA 8 #E59 9 #E54 10 #DC3 11 #CA2 12 #641
Grass
#46A758
Shades
1 #FBF 2 #F5F 3 #E9F 4 #DAF 5 #C9E 6 #B2D 7 #94C 8 #65B 9 #46A 10 #3E9 11 #2A7 12 #203
Mint
#86EAD4
Shades
1 #F9F 2 #F2F 3 #DDF 4 #C8F 5 #B3E 6 #9CE 7 #7EC 8 #4CB 9 #86E 10 #7DE 11 #027 12 #164
Jade
#29A383
Shades
1 #FBF 2 #F4F 3 #E6F 4 #D6F 5 #C3E 6 #ACD 7 #8BC 8 #56B 9 #29A 10 #269 11 #208 12 #1D3
Gold
#978365
Shades
1 #FDF 2 #FAF 3 #F2F 4 #EAE 5 #E1D 6 #D8D 7 #CBC 8 #B9A 9 #978 10 #8C7 11 #716 12 #3B3
Bronze
#A18072
Shades
1 #FDF 2 #FDF 3 #F6E 4 #EFE 5 #E7D 6 #DFC 7 #D3B 8 #C2A 9 #A18 10 #957 11 #7D5 12 #433
Brown
#AD7F58
Shades
1 #FEF 2 #FCF 3 #F6E 4 #F0E 5 #EBD 6 #E4C 7 #DCB 8 #CEA 9 #AD7 10 #A07 11 #815 12 #3E3
Plum
#AB4ABA
Shades
1 #FEF 2 #FDF 3 #FBE 4 #F7D 5 #F2D 6 #E9C 7 #DEA 8 #CF9 9 #AB4 10 #A14 11 #953 12 #531
Mauve
#8E8C99
Shades
1 #FDF 2 #FAF 3 #F2E 4 #EAE 5 #E3D 6 #DBD 7 #D0C 8 #BCB 9 #8E8 10 #848 11 #656 12 #211
Sage
#868E8B
Shades
1 #FBF 2 #F7F 3 #EEF 4 #E6E 5 #DFE 6 #D7D 7 #CBC 8 #B8B 9 #868 10 #7C8 11 #5F6 12 #1A2
Olive
#898E87
Shades
1 #FCF 2 #F8F 3 #EFF 4 #E7E 5 #DFE 6 #D7D 7 #CCC 8 #B9B 9 #898 10 #7F8 11 #606 12 #1D2
Sand
#8D8D86
Shades
1 #FDF 2 #F9F 3 #F1F 4 #E9E 5 #E2E 6 #DAD 7 #CFC 8 #BCB 9 #8D8 10 #828 11 #636 12 #212
Slate
#8B8D98
Shades
1 #FCF 2 #F9F 3 #F0F 4 #E8E 5 #E0E 6 #D9D 7 #CDC 8 #B9B 9 #8B8 10 #808 11 #606 12 #1C2
Gray
#8D8D8D
Shades
1 #FCF 2 #F9F 3 #F0F 4 #E8E 5 #E0E 6 #D9D 7 #CEC 8 #BBB 9 #8D8 10 #838 11 #646 12 #202
No matching colors
Source: Radix Colors 3.0.0 · light scales
