Skip to content

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 
#fef5f5

254 245 245

var(--dsdl-red-10)
red 20 
#fbd6d6

251 214 214

var(--dsdl-red-20)
red 30 
#f9b7b7

249 183 183

var(--dsdl-red-30)
red 40 
#f37a7b

243 122 123

var(--dsdl-red-40)
red 50 
#ee4142

238  65  66

var(--dsdl-red-50)
red 60 
#de0e10

222  14  16

var(--dsdl-red-60)
red 70 
#980a0b

152  10  11

var(--dsdl-red-70)
red 80 
#750809

117   8   9

var(--dsdl-red-80)
red 90 
#540506

 84   5   6

var(--dsdl-red-90)
red 100 
#300304

 48   3   4

var(--dsdl-red-100)
Swatch Name Hex RGB CSS Variable
orange 10 
#fff4ef

255 244 239

var(--dsdl-orange-10)
orange 20 
#fed6c4

254 214 196

var(--dsdl-orange-20)
orange 30 
#fcb89a

252 184 154

var(--dsdl-orange-30)
orange 40 
#fa7941

250 121  65

var(--dsdl-orange-40)
orange 50 
#e54f0e

229  79  14

var(--dsdl-orange-50)
orange 60 
#c3440c

195  68  12

var(--dsdl-orange-60)
orange 70 
#852e08

133  46   8

var(--dsdl-orange-70)
orange 80 
#662306

102  35   6

var(--dsdl-orange-80)
orange 90 
#471804

 71  24   4

var(--dsdl-orange-90)
orange 100 
#260d02

 38  13   2

var(--dsdl-orange-100)
Swatch Name Hex RGB CSS Variable
yellow 10 
#fff6de

255 246 222

var(--dsdl-yellow-10)
yellow 20 
#ffda84

255 218 132

var(--dsdl-yellow-20)
yellow 30 
#febd28

254 189  40

var(--dsdl-yellow-30)
yellow 40 
#ce9411

206 148  17

var(--dsdl-yellow-40)
yellow 50 
#a97a0e

169 122  14

var(--dsdl-yellow-50)
yellow 60 
#90680c

144 104  12

var(--dsdl-yellow-60)
yellow 70 
#614608

 97  70   8

var(--dsdl-yellow-70)
yellow 80 
#4a3506

 74  53   6

var(--dsdl-yellow-80)
yellow 90 
#332404

 51  36   4

var(--dsdl-yellow-90)
yellow 100 
#1b1402

 27  20   2

var(--dsdl-yellow-100)
Swatch Name Hex RGB CSS Variable
green 10 
#f1f7f5

241 247 245

var(--dsdl-green-10)
green 20 
#cde3da

205 227 218

var(--dsdl-green-20)
green 30 
#abd0c0

171 208 192

var(--dsdl-green-30)
green 40 
#6bab90

107 171 144

var(--dsdl-green-40)
green 50 
#3b916c

 59 145 108

var(--dsdl-green-50)
green 60 
#1b7e54

 27 126  84

var(--dsdl-green-60)
green 70 
#105538

 16  85  56

var(--dsdl-green-70)
green 80 
#0c412a

 12  65  42

var(--dsdl-green-80)
green 90 
#092c1d

  9  44  29

var(--dsdl-green-90)
green 100 
#05170f

  5  23  15

var(--dsdl-green-100)
Swatch Name Hex RGB CSS Variable
cyan 10 
#dff3fe

223 243 254

var(--dsdl-cyan-10)
cyan 20 
#bfe4f0

191 228 240

var(--dsdl-cyan-20)
cyan 30 
#91d1e5

145 209 229

var(--dsdl-cyan-30)
cyan 40 
#38abd0

 56 171 208

var(--dsdl-cyan-40)
cyan 50 
#258cad

 37 140 173

var(--dsdl-cyan-50)
cyan 60 
#207894

 32 120 148

var(--dsdl-cyan-60)
cyan 70 
#155163

 21  81  99

var(--dsdl-cyan-70)
cyan 80 
#103d4c

 16  61  76

var(--dsdl-cyan-80)
cyan 90 
#0b2b34

 11  43  52

var(--dsdl-cyan-90)
cyan 100 
#06161c

  6  22  28

var(--dsdl-cyan-100)
Swatch Name Hex RGB CSS Variable
blue 10 
#f2f8f9

242 248 249

var(--dsdl-blue-10)
blue 20 
#cbe2e7

203 226 231

var(--dsdl-blue-20)
blue 30 
#82b9c6

130 185 198

var(--dsdl-blue-30)
blue 40 
#6ca7b8

108 167 184

var(--dsdl-blue-40)
blue 50 
#488aa2

 72 138 162

var(--dsdl-blue-50)
blue 60 
#307693

 48 118 147

var(--dsdl-blue-60)
blue 70 
#045b86

  4  91 134

var(--dsdl-blue-70)
blue 80 
#044869

  4  72 105

var(--dsdl-blue-80)
blue 90 
#022a3d

  2  42  61

var(--dsdl-blue-90)
blue 100 
#011621

  1  22  33

var(--dsdl-blue-100)
Swatch Name Hex RGB CSS Variable
purple 10 
#f7f7fa

247 247 250

var(--dsdl-purple-10)
purple 20 
#deddea

222 221 234

var(--dsdl-purple-20)
purple 30 
#c7c5db

199 197 219

var(--dsdl-purple-30)
purple 40 
#9e9ac2

158 154 194

var(--dsdl-purple-40)
purple 50 
#817caf

129 124 175

var(--dsdl-purple-50)
purple 60 
#6d68a3

109 104 163

var(--dsdl-purple-60)
purple 70 
#47418b

 71  65 139

var(--dsdl-purple-70)
purple 80 
#332d7e

 51  45 126

var(--dsdl-purple-80)
purple 90 
#211b61

 33  27  97

var(--dsdl-purple-90)
purple 100 
#120f33

 18  15  51

var(--dsdl-purple-100)
Swatch Name Hex RGB CSS Variable
indigo 10 
#f7f7ff

247 247 255

var(--dsdl-indigo-10)
indigo 20 
#dddbff

221 219 255

var(--dsdl-indigo-20)
indigo 30 
#c4c1ff

196 193 255

var(--dsdl-indigo-30)
indigo 40 
#9792ff

151 146 255

var(--dsdl-indigo-40)
indigo 50 
#756fff

117 111 255

var(--dsdl-indigo-50)
indigo 60 
#645ddf

100  93 223

var(--dsdl-indigo-60)
indigo 70 
#433f96

 67  63 150

var(--dsdl-indigo-70)
indigo 80 
#333072

 51  48 114

var(--dsdl-indigo-80)
indigo 90 
#23214f

 35  33  79

var(--dsdl-indigo-90)
indigo 100 
#13112a

 19  17  42

var(--dsdl-indigo-100)
Swatch Name Hex RGB CSS Variable
pink 10 
#fcf4f8

252 244 248

var(--dsdl-pink-10)
pink 20 
#f3d7e5

243 215 229

var(--dsdl-pink-20)
pink 30 
#ebb9d2

235 185 210

var(--dsdl-pink-30)
pink 40 
#db83b0

219 131 176

var(--dsdl-pink-40)
pink 50 
#ce5894

206  88 148

var(--dsdl-pink-50)
pink 60 
#c4367e

196  54 126

var(--dsdl-pink-60)
pink 70 
#901052

144  16  82

var(--dsdl-pink-70)
pink 80 
#6f0c3f

111  12  63

var(--dsdl-pink-80)
pink 90 
#4e082c

 78   8  44

var(--dsdl-pink-90)
pink 100 
#2c0519

 44   5  25

var(--dsdl-pink-100)
Swatch Name Hex RGB CSS Variable
gray 10 
#f7f7f7

247 247 247

var(--dsdl-gray-10)
gray 20 
#dedede

222 222 222

var(--dsdl-gray-20)
gray 30 
#c7c7c7

199 199 199

var(--dsdl-gray-30)
gray 40 
#9e9e9e

158 158 158

var(--dsdl-gray-40)
gray 50 
#828282

130 130 130

var(--dsdl-gray-50)
gray 60 
#6e6e6e

110 110 110

var(--dsdl-gray-60)
gray 70 
#4a4a4a

 74  74  74

var(--dsdl-gray-70)
gray 80 
#383838

 56  56  56

var(--dsdl-gray-80)
gray 90 
#262626

 38  38  38

var(--dsdl-gray-90)
gray 100 
#141414

 20  20  20

var(--dsdl-gray-100)
Swatch Name Hex RGB CSS Variable
slate 10 
#edf0f4

237 240 244

var(--dsdl-slate-10)
slate 20 
#dadee1

218 222 225

var(--dsdl-slate-20)
slate 30 
#c1c8cc

193 200 204

var(--dsdl-slate-30)
slate 40 
#94a0a8

148 160 168

var(--dsdl-slate-40)
slate 50 
#75848e

117 132 142

var(--dsdl-slate-50)
slate 60 
#62717b

 98 113 123

var(--dsdl-slate-60)
slate 70 
#424c53

 66  76  83

var(--dsdl-slate-70)
slate 80 
#313a3e

 49  58  62

var(--dsdl-slate-80)
slate 90 
#22272b

 34  39  43

var(--dsdl-slate-90)
slate 100
(DSDL Black) 
#121416

 18  20  22

var(--dsdl-slate-100)