Digital Services Design Language color reference ¶
Brand colors ¶
-
Cal-ITP Blue
(blue-70)var(--calitp-brand-blue) -
Cal-ITP Cyan
(cyan-40)var(--calitp-brand-cyan) -
Cal-ITP Yellow
(yellow-30)var(--calitp-brand-yellow)
Full palette ¶
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| red 10 |
|
|
|
|
| red 20 |
|
|
|
|
| red 30 |
|
|
|
|
| red 40 |
|
|
|
|
| red 50 |
|
|
|
|
| red 60 |
|
|
|
|
| red 70 |
|
|
|
|
| red 80 |
|
|
|
|
| red 90 |
|
|
|
|
| red 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| orange 10 |
|
|
|
|
| orange 20 |
|
|
|
|
| orange 30 |
|
|
|
|
| orange 40 |
|
|
|
|
| orange 50 |
|
|
|
|
| orange 60 |
|
|
|
|
| orange 70 |
|
|
|
|
| orange 80 |
|
|
|
|
| orange 90 |
|
|
|
|
| orange 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| yellow 10 |
|
|
|
|
| yellow 20 |
|
|
|
|
| yellow 30 |
|
|
|
|
| yellow 40 |
|
|
|
|
| yellow 50 |
|
|
|
|
| yellow 60 |
|
|
|
|
| yellow 70 |
|
|
|
|
| yellow 80 |
|
|
|
|
| yellow 90 |
|
|
|
|
| yellow 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| green 10 |
|
|
|
|
| green 20 |
|
|
|
|
| green 30 |
|
|
|
|
| green 40 |
|
|
|
|
| green 50 |
|
|
|
|
| green 60 |
|
|
|
|
| green 70 |
|
|
|
|
| green 80 |
|
|
|
|
| green 90 |
|
|
|
|
| green 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| cyan 10 |
|
|
|
|
| cyan 20 |
|
|
|
|
| cyan 30 |
|
|
|
|
| cyan 40 |
|
|
|
|
| cyan 50 |
|
|
|
|
| cyan 60 |
|
|
|
|
| cyan 70 |
|
|
|
|
| cyan 80 |
|
|
|
|
| cyan 90 |
|
|
|
|
| cyan 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| blue 10 |
|
|
|
|
| blue 20 |
|
|
|
|
| blue 30 |
|
|
|
|
| blue 40 |
|
|
|
|
| blue 50 |
|
|
|
|
| blue 60 |
|
|
|
|
| blue 70 |
|
|
|
|
| blue 80 |
|
|
|
|
| blue 90 |
|
|
|
|
| blue 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| purple 10 |
|
|
|
|
| purple 20 |
|
|
|
|
| purple 30 |
|
|
|
|
| purple 40 |
|
|
|
|
| purple 50 |
|
|
|
|
| purple 60 |
|
|
|
|
| purple 70 |
|
|
|
|
| purple 80 |
|
|
|
|
| purple 90 |
|
|
|
|
| purple 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| indigo 10 |
|
|
|
|
| indigo 20 |
|
|
|
|
| indigo 30 |
|
|
|
|
| indigo 40 |
|
|
|
|
| indigo 50 |
|
|
|
|
| indigo 60 |
|
|
|
|
| indigo 70 |
|
|
|
|
| indigo 80 |
|
|
|
|
| indigo 90 |
|
|
|
|
| indigo 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| pink 10 |
|
|
|
|
| pink 20 |
|
|
|
|
| pink 30 |
|
|
|
|
| pink 40 |
|
|
|
|
| pink 50 |
|
|
|
|
| pink 60 |
|
|
|
|
| pink 70 |
|
|
|
|
| pink 80 |
|
|
|
|
| pink 90 |
|
|
|
|
| pink 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| gray 10 |
|
|
|
|
| gray 20 |
|
|
|
|
| gray 30 |
|
|
|
|
| gray 40 |
|
|
|
|
| gray 50 |
|
|
|
|
| gray 60 |
|
|
|
|
| gray 70 |
|
|
|
|
| gray 80 |
|
|
|
|
| gray 90 |
|
|
|
|
| gray 100 |
|
|
|
| Swatch | Name | Hex | RGB | CSS Variable |
|---|---|---|---|---|
| slate 10 |
|
|
|
|
| slate 20 |
|
|
|
|
| slate 30 |
|
|
|
|
| slate 40 |
|
|
|
|
| slate 50 |
|
|
|
|
| slate 60 |
|
|
|
|
| slate 70 |
|
|
|
|
| slate 80 |
|
|
|
|
| slate 90 |
|
|
|
|
|
slate 100
(DSDL Black) |
|
|
|