Semantic colors and contrast
Light
Contrast pairs in Light mode| Sample | Token | Against | Ratio | Minimum |
|---|
| Aa | background | foreground | 15.07:1 | 4.5:1 (passes) |
| Aa | card | card-foreground | 15.07:1 | 4.5:1 (passes) |
| Aa | popover | popover-foreground | 15.07:1 | 4.5:1 (passes) |
| Aa | primary | primary-foreground | 5.90:1 | 4.5:1 (passes) |
| Aa | primary-hover | primary-foreground | 7.06:1 | 4.5:1 (passes) |
| Aa | secondary | secondary-foreground | 8.75:1 | 4.5:1 (passes) |
| Aa | muted | muted-foreground | 4.81:1 | 4.5:1 (passes) |
| Aa | muted-foreground | background | 5.17:1 | 4.5:1 (passes) |
| Aa | accent | accent-foreground | 7.54:1 | 4.5:1 (passes) |
| Aa | destructive | destructive-foreground | 5.61:1 | 4.5:1 (passes) |
| Aa | destructive-hover | destructive-foreground | 6.79:1 | 4.5:1 (passes) |
| Aa | success | success-foreground | 4.67:1 | 4.5:1 (passes) |
| Aa | warning | warning-foreground | 5.27:1 | 4.5:1 (passes) |
| Aa | info | info-foreground | 5.03:1 | 4.5:1 (passes) |
| input | background | 3.60:1 | 3:1 (passes) |
| ring | background | 5.90:1 | 3:1 (passes) |
Dark
Contrast pairs in Dark mode| Sample | Token | Against | Ratio | Minimum |
|---|
| Aa | background | foreground | 18.19:1 | 4.5:1 (passes) |
| Aa | card | card-foreground | 16.31:1 | 4.5:1 (passes) |
| Aa | popover | popover-foreground | 16.31:1 | 4.5:1 (passes) |
| Aa | primary | primary-foreground | 7.05:1 | 4.5:1 (passes) |
| Aa | primary-hover | primary-foreground | 10.38:1 | 4.5:1 (passes) |
| Aa | secondary | secondary-foreground | 14.03:1 | 4.5:1 (passes) |
| Aa | muted | muted-foreground | 6.30:1 | 4.5:1 (passes) |
| Aa | muted-foreground | background | 8.16:1 | 4.5:1 (passes) |
| Aa | accent | accent-foreground | 8.43:1 | 4.5:1 (passes) |
| Aa | destructive | destructive-foreground | 6.61:1 | 4.5:1 (passes) |
| Aa | destructive-hover | destructive-foreground | 9.79:1 | 4.5:1 (passes) |
| Aa | success | success-foreground | 7.98:1 | 4.5:1 (passes) |
| Aa | warning | warning-foreground | 7.31:1 | 4.5:1 (passes) |
| Aa | info | info-foreground | 7.45:1 | 4.5:1 (passes) |
| input | background | 3.70:1 | 3:1 (passes) |
| ring | background | 7.05:1 | 3:1 (passes) |
High contrast light
Contrast pairs in High contrast light mode| Sample | Token | Against | Ratio | Minimum |
|---|
| Aa | background | foreground | 21.00:1 | 7:1 (passes) |
| Aa | card | card-foreground | 21.00:1 | 7:1 (passes) |
| Aa | popover | popover-foreground | 21.00:1 | 7:1 (passes) |
| Aa | primary | primary-foreground | 9.16:1 | 7:1 (passes) |
| Aa | primary-hover | primary-foreground | 11.20:1 | 7:1 (passes) |
| Aa | secondary | secondary-foreground | 17.61:1 | 7:1 (passes) |
| Aa | muted | muted-foreground | 8.75:1 | 7:1 (passes) |
| Aa | muted-foreground | background | 10.43:1 | 7:1 (passes) |
| Aa | accent | accent-foreground | 17.30:1 | 7:1 (passes) |
| Aa | destructive | destructive-foreground | 8.85:1 | 7:1 (passes) |
| Aa | destructive-hover | destructive-foreground | 11.19:1 | 7:1 (passes) |
| Aa | success | success-foreground | 7.64:1 | 7:1 (passes) |
| Aa | warning | warning-foreground | 8.44:1 | 7:1 (passes) |
| Aa | info | info-foreground | 8.12:1 | 7:1 (passes) |
| input | background | 8.32:1 | 3:1 (passes) |
| ring | background | 9.16:1 | 3:1 (passes) |
High contrast dark
Contrast pairs in High contrast dark mode| Sample | Token | Against | Ratio | Minimum |
|---|
| Aa | background | foreground | 21.00:1 | 7:1 (passes) |
| Aa | card | card-foreground | 17.54:1 | 7:1 (passes) |
| Aa | popover | popover-foreground | 17.54:1 | 7:1 (passes) |
| Aa | primary | primary-foreground | 11.15:1 | 7:1 (passes) |
| Aa | primary-hover | primary-foreground | 14.53:1 | 7:1 (passes) |
| Aa | secondary | secondary-foreground | 15.09:1 | 7:1 (passes) |
| Aa | muted | muted-foreground | 10.68:1 | 7:1 (passes) |
| Aa | muted-foreground | background | 14.86:1 | 7:1 (passes) |
| Aa | accent | accent-foreground | 9.16:1 | 7:1 (passes) |
| Aa | destructive | destructive-foreground | 10.51:1 | 7:1 (passes) |
| Aa | destructive-hover | destructive-foreground | 13.92:1 | 7:1 (passes) |
| Aa | success | success-foreground | 12.07:1 | 7:1 (passes) |
| Aa | warning | warning-foreground | 11.33:1 | 7:1 (passes) |
| Aa | info | info-foreground | 11.39:1 | 7:1 (passes) |
| input | background | 11.55:1 | 3:1 (passes) |
| ring | background | 11.15:1 | 3:1 (passes) |
Primitive ramps
OKLCH ramps with fixed lightness per step. Components never use these directly; they are shown for reference.
gray
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
brand
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
red
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
amber
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
green
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
blue
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950