Global color tokens
On this page
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffffff
|
Lightest surface (light theme) or primary text (dark theme) |
|
|
|
|
#000000
|
Brand black (avoid using) |
|
|
|
|
0 0% 100%
|
|
||
|
|
255 255 255
|
|
||
|
|
0 0% 0%
|
|
||
|
|
0 0 0
|
|
Accent
Theme Tokens
Base
Responsive accent-base color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-accent-base-on-light on a themable container with a light color palette and --rh-color-accent-base-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9))
|
Responsive |
|
|
|
|
#0066cc
|
Inline link (light theme) |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
Brand
Responsive accent-brand color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-accent-brand-on-light on a themable container with a light color palette and --rh-color-accent-brand-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-accent-brand-on-light, #ee0000), var(--rh-color-accent-brand-on-dark, #ee0000))
|
Responsive |
|
|
|
|
#ee0000
|
Brand red (light theme) |
|
|
|
|
#ee0000
|
Brand red (dark theme) |
|
Brand
Theme Tokens
Red
Responsive brand-red color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-brand-red-on-light on a themable container with a light color palette and --rh-color-brand-red-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000))
|
Responsive |
|
|
|
|
#ee0000
|
Brand red on light background |
|
|
|
|
#ee0000
|
Brand red on dark background |
|
|
|
|
#fbc5c5
|
Lightest brand red |
|
|
|
|
#f9a8a8
|
Lighter brand red |
|
|
|
|
#f56e6e
|
Light brand red |
|
|
|
|
#a60000
|
Dark brand red/Brand red hover |
|
|
|
|
#5f0000
|
Darker brand red |
|
|
|
|
#3f0000
|
Darkest brand red |
|
Green
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#e9f7df
|
Alert - success background |
|
|
|
|
#d1f1bb
|
Label - Filled (Green) border color |
|
|
|
|
#afdc8f
|
|
||
|
|
#87bb62
|
|
||
|
|
#63993d
|
|
||
|
|
#3d7317
|
Alert - Success accent |
|
|
|
|
#204d00
|
Alert - Success title text |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
95.00000000000003 60.00000000000004% 92.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-10) h s l / 10%) |
|
|
|
|
233 247 223
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-10) r g b / 10%) |
|
|
|
|
95.55555555555556 65.85365853658536% 83.92156862745097%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-20) h s l / 10%) |
|
|
|
|
209 241 187
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-20) r g b / 10%) |
|
|
|
|
95.06493506493506 52.380952380952394% 71.17647058823529%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-30) h s l / 10%) |
|
|
|
|
175 220 143
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-30) r g b / 10%) |
|
|
|
|
95.05617977528091 39.55555555555555% 55.88235294117647%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-40) h s l / 10%) |
|
|
|
|
135 187 98
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-40) r g b / 10%) |
|
|
|
|
95.21739130434783 42.99065420560747% 41.96078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-50) h s l / 10%) |
|
|
|
|
99 153 61
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-50) r g b / 10%) |
|
|
|
|
95.21739130434783 66.66666666666667% 27.058823529411764%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-60) h s l / 10%) |
|
|
|
|
61 115 23
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-60) r g b / 10%) |
|
|
|
|
95.06493506493506 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-70) h s l / 10%) |
|
|
|
|
32 77 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-70) r g b / 10%) |
|
Orange
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffe8cc
|
Label - Filled (Orange) background color |
|
|
|
|
#fccb8f
|
|
||
|
|
#f8ae54
|
Label - Filled (Orange) border color |
|
|
|
|
#f5921b
|
Label - Filled (Orange) accent color |
|
|
|
|
#ca6c0f
|
Label - Filled (Orange) accent color |
|
|
|
|
#9e4a06
|
|
||
|
|
#732e00
|
Label - Filled (Orange) text color |
|
|
|
|
#4d1f00
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
32.941176470588225 100% 90%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-10) h s l / 10%) |
|
|
|
|
255 232 204
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-10) r g b / 10%) |
|
|
|
|
33.02752293577981 94.78260869565219% 77.45098039215686%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-20) h s l / 10%) |
|
|
|
|
252 203 143
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-20) r g b / 10%) |
|
|
|
|
32.926829268292686 92.13483146067415% 65.09803921568627%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-30) h s l / 10%) |
|
|
|
|
248 174 84
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-30) r g b / 10%) |
|
|
|
|
32.752293577981646 91.5966386554622% 53.333333333333336%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-40) h s l / 10%) |
|
|
|
|
245 146 27
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-40) r g b / 10%) |
|
|
|
|
29.83957219251337 86.17511520737327% 42.549019607843135%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-50) h s l / 10%) |
|
|
|
|
202 108 15
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-50) r g b / 10%) |
|
|
|
|
26.842105263157904 92.68292682926828% 32.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-60) h s l / 10%) |
|
|
|
|
158 74 6
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-60) r g b / 10%) |
|
|
|
|
24 100% 22.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-70) h s l / 10%) |
|
|
|
|
115 46 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-70) r g b / 10%) |
|
|
|
|
24.155844155844157 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-80) h s l / 10%) |
|
|
|
|
77 31 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-80) r g b / 10%) |
|
Canvas
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffffff
|
Primary canvas (light theme) |
|
|
|
|
#151515
|
Primary canvas (dark theme) |
|
|
|
|
0 0% 100%
|
|
||
|
|
255 255 255
|
|
||
|
|
0 0% 0%
|
|
||
|
|
0 0 0
|
|
Blue
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#e0f0ff
|
Alert - Info background |
|
|
|
|
#b9dafc
|
Label - Filled (Blue) border color |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
|
|
|
#4394e5
|
Alert - Info accent |
|
|
|
|
#0066cc
|
Label - Filled (Blue) accent color |
|
|
|
|
#004d99
|
Inline link hover (light theme) |
|
|
|
|
#003366
|
Alert - Info title text |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
209.03225806451616 100% 93.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-10) h s l / 10%) |
|
|
|
|
224 240 255
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-10) r g b / 10%) |
|
|
|
|
210.44776119402988 91.78082191780825% 85.68627450980392%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-20) h s l / 10%) |
|
|
|
|
185 218 252
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-20) r g b / 10%) |
|
|
|
|
210.29126213592232 89.56521739130436% 77.45098039215685%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-30) h s l / 10%) |
|
|
|
|
146 197 249
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-30) r g b / 10%) |
|
|
|
|
210 75.70093457943923% 58.03921568627452%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-40) h s l / 10%) |
|
|
|
|
67 148 229
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-40) r g b / 10%) |
|
|
|
|
210 100% 40%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-50) h s l / 10%) |
|
|
|
|
0 102 204
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-50) r g b / 10%) |
|
|
|
|
209.80392156862746 100% 30%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-60) h s l / 10%) |
|
|
|
|
0 77 153
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-60) r g b / 10%) |
|
|
|
|
210 100% 20%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-70) h s l / 10%) |
|
|
|
|
0 51 102
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-70) r g b / 10%) |
|
Gray
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#f2f2f2
|
Tertiary surface (light theme) |
|
|
|
|
#e0e0e0
|
Secondary surface (light theme) |
|
|
|
|
#c7c7c7
|
Subtle borders (light theme) |
|
|
|
|
#a3a3a3
|
Subtle icon (hover state) |
|
|
|
|
#707070
|
Subtle icon |
|
|
|
|
#4d4d4d
|
Secondary text (light theme) |
|
|
|
|
#383838
|
Tertiary surface (dark theme) |
|
|
|
|
#292929
|
Alternative tertiary surface (not available for use with context provider) |
|
|
|
|
#1f1f1f
|
Secondary surface (dark theme) |
|
|
|
|
#151515
|
Primary surface (dark theme) or primary text (light theme) |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
0 0% 94.90196078431372%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-10) h s l / 10%) |
|
|
|
|
242 242 242
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-10) r g b / 10%) |
|
|
|
|
0 0% 87.84313725490196%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-20) h s l / 10%) |
|
|
|
|
224 224 224
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-20) r g b / 10%) |
|
|
|
|
0 0% 78.03921568627452%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-30) h s l / 10%) |
|
|
|
|
199 199 199
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-30) r g b / 10%) |
|
|
|
|
0 0% 63.921568627450974%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-40) h s l / 10%) |
|
|
|
|
163 163 163
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-40) r g b / 10%) |
|
|
|
|
0 0% 43.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-50) h s l / 10%) |
|
|
|
|
112 112 112
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-50) r g b / 10%) |
|
|
|
|
0 0% 30.19607843137255%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-60) h s l / 10%) |
|
|
|
|
77 77 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-60) r g b / 10%) |
|
|
|
|
0 0% 21.96078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-70) h s l / 10%) |
|
|
|
|
56 56 56
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-70) r g b / 10%) |
|
|
|
|
0 0% 16.07843137254902%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-80) h s l / 10%) |
|
|
|
|
41 41 41
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-80) r g b / 10%) |
|
|
|
|
0 0% 12.156862745098039%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-90) h s l / 10%) |
|
|
|
|
31 31 31
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-90) r g b / 10%) |
|
|
|
|
0 0% 8.235294117647058%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-95) h s l / 10%) |
|
|
|
|
21 21 21
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-95) r g b / 10%) |
|
Purple
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ece6ff
|
Label - Filled (Purple) background color |
|
|
|
|
#d0c5f4
|
Inline link visited hover (dark theme) |
|
|
|
|
#b6a6e9
|
|
||
|
|
#876fd4
|
Inline link visited (dark theme) |
|
|
|
|
#5e40be
|
|
||
|
|
#3d2785
|
Inline link visited (light theme) |
|
|
|
|
#21134d
|
Inline link visited hover (light theme) |
|
|
|
|
#1b0d33
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
254.4 100% 95.09803921568627%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-10) h s l / 10%) |
|
|
|
|
236 230 255
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-10) r g b / 10%) |
|
|
|
|
254.0425531914893 68.11594202898556% 86.47058823529412%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-20) h s l / 10%) |
|
|
|
|
208 197 244
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-20) r g b / 10%) |
|
|
|
|
254.32835820895522 60.36036036036033% 78.23529411764706%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-30) h s l / 10%) |
|
|
|
|
182 166 233
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-30) r g b / 10%) |
|
|
|
|
254.25742574257427 54.010695187165794% 63.33333333333333%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-40) h s l / 10%) |
|
|
|
|
135 111 212
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-40) r g b / 10%) |
|
|
|
|
254.2857142857143 49.60629921259843% 49.80392156862745%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-50) h s l / 10%) |
|
|
|
|
94 64 190
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-50) r g b / 10%) |
|
|
|
|
254.0425531914894 54.65116279069767% 33.72549019607843%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-60) h s l / 10%) |
|
|
|
|
61 39 133
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-60) r g b / 10%) |
|
|
|
|
254.48275862068965 60.416666666666664% 18.823529411764707%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-70) h s l / 10%) |
|
|
|
|
33 19 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-70) r g b / 10%) |
|
|
|
|
262.10526315789474 59.375000000000014% 12.549019607843137%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-80) h s l / 10%) |
|
|
|
|
27 13 51
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-80) r g b / 10%) |
|
Red orange
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffe3d9
|
|
||
|
|
#fbbea8
|
|
||
|
|
#f89b78
|
|
||
|
|
#f4784a
|
|
||
|
|
#f0561d
|
|
||
|
|
#b1380b
|
|
||
|
|
#731f00
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
15.789473684210513 100% 92.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-10) h s l / 10%) |
|
|
|
|
255 227 217
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-10) r g b / 10%) |
|
|
|
|
15.903614457831333 91.20879120879121% 82.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-20) h s l / 10%) |
|
|
|
|
251 190 168
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-20) r g b / 10%) |
|
|
|
|
16.406249999999996 90.14084507042254% 72.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-30) h s l / 10%) |
|
|
|
|
248 155 120
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-30) r g b / 10%) |
|
|
|
|
16.235294117647054 88.54166666666671% 62.35294117647059%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-40) h s l / 10%) |
|
|
|
|
244 120 74
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-40) r g b / 10%) |
|
|
|
|
16.208530805687207 87.55186721991701% 52.74509803921569%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-50) h s l / 10%) |
|
|
|
|
240 86 29
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-50) r g b / 10%) |
|
|
|
|
16.265060240963855 88.29787234042554% 36.86274509803921%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-60) h s l / 10%) |
|
|
|
|
177 56 11
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-60) r g b / 10%) |
|
|
|
|
16.17391304347826 100% 22.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-70) h s l / 10%) |
|
|
|
|
115 31 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-70) r g b / 10%) |
|
Red
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#fce3e3
|
|
||
|
|
#fbc5c5
|
Lightest brand red |
|
|
|
|
#f9a8a8
|
Lighter brand red |
|
|
|
|
#f56e6e
|
Light brand red |
|
|
|
|
#ee0000
|
Brand red (light and dark theme) |
|
|
|
|
#a60000
|
Dark brand red |
|
|
|
|
#5f0000
|
Darker brand red |
|
|
|
|
#3f0000
|
Darkest brand red |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
0 80.64516129032265% 93.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-10) h s l / 10%) |
|
|
|
|
252 227 227
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-10) r g b / 10%) |
|
|
|
|
0 87.09677419354838% 87.84313725490196%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-20) h s l / 10%) |
|
|
|
|
251 197 197
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-20) r g b / 10%) |
|
|
|
|
0 87.0967741935484% 81.76470588235294%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-30) h s l / 10%) |
|
|
|
|
249 168 168
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-30) r g b / 10%) |
|
|
|
|
0 87.09677419354841% 69.6078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-40) h s l / 10%) |
|
|
|
|
245 110 110
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-40) r g b / 10%) |
|
|
|
|
0 100% 46.666666666666664%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-50) h s l / 10%) |
|
|
|
|
238 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-50) r g b / 10%) |
|
|
|
|
0 100% 32.549019607843135%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-60) h s l / 10%) |
|
|
|
|
166 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-60) r g b / 10%) |
|
|
|
|
0 100% 18.627450980392158%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-70) h s l / 10%) |
|
|
|
|
95 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-70) r g b / 10%) |
|
|
|
|
0 100% 12.352941176470589%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-80) h s l / 10%) |
|
|
|
|
63 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-80) r g b / 10%) |
|
Teal
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#daf2f2
|
Alert - Default background |
|
|
|
|
#b9e5e5
|
|
||
|
|
#9ad8d8
|
Label (Cyan) border color |
|
|
|
|
#63bdbd
|
|
||
|
|
#37a3a3
|
Alert - Default accent |
|
|
|
|
#147878
|
|
||
|
|
#004d4d
|
Alert - Default title text |
|
|
|
|
#003333
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
180 47.99999999999998% 90.19607843137254%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-10) h s l / 10%) |
|
|
|
|
218 242 242
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-10) r g b / 10%) |
|
|
|
|
180 45.833333333333336% 81.17647058823529%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-20) h s l / 10%) |
|
|
|
|
185 229 229
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-20) r g b / 10%) |
|
|
|
|
180 44.28571428571429% 72.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-30) h s l / 10%) |
|
|
|
|
154 216 216
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-30) r g b / 10%) |
|
|
|
|
180 40.54054054054054% 56.470588235294116%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-40) h s l / 10%) |
|
|
|
|
99 189 189
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-40) r g b / 10%) |
|
|
|
|
180 49.54128440366972% 42.745098039215684%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-50) h s l / 10%) |
|
|
|
|
55 163 163
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-50) r g b / 10%) |
|
|
|
|
180 71.42857142857142% 27.450980392156865%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-60) h s l / 10%) |
|
|
|
|
20 120 120
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-60) r g b / 10%) |
|
|
|
|
180 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-70) h s l / 10%) |
|
|
|
|
0 77 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-70) r g b / 10%) |
|
|
|
|
180 100% 10%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-80) h s l / 10%) |
|
|
|
|