Color
Set foreground or background colors
Overview #
Use the color utilities to set an element’s foreground or background color.
Usage #
| CSS classes | Hex code | Foreground color | Background color |
|---|---|---|---|
.rvt-color-white |
#ffffff |
Example text | |
.rvt-color-black |
#243142 |
Example text | |
.rvt-color-black-000 |
#f8f9fa |
Example text | |
.rvt-color-black-100 |
#e2e7e9 |
Example text | |
.rvt-color-black-200 |
#a0abb4 |
Example text | |
.rvt-color-black-300 |
#75838f |
Example text | |
.rvt-color-black-400 |
#4c5a69 |
Example text | |
.rvt-color-black-500 |
#243142 |
Example text | |
.rvt-color-black-600 |
#182534 |
Example text | |
.rvt-color-black-700 |
#0e1825 |
Example text | |
.rvt-color-crimson |
#990000 |
Example text | |
.rvt-color-crimson-000 |
#fff7f8 |
Example text | |
.rvt-color-crimson-100 |
#ffd6db |
Example text | |
.rvt-color-crimson-200 |
#ff636a |
Example text | |
.rvt-color-crimson-300 |
#f23a3f |
Example text | |
.rvt-color-crimson-400 |
#dc231e |
Example text | |
.rvt-color-crimson-500 |
#990000 |
Example text | |
.rvt-color-crimson-600 |
#800000 |
Example text | |
.rvt-color-crimson-700 |
#5a0c0c |
Example text | |
.rvt-color-blue |
#006298 |
Example text | |
.rvt-color-blue-000 |
#edfafd |
Example text | |
.rvt-color-blue-100 |
#c6ecf6 |
Example text | |
.rvt-color-blue-200 |
#94d2e7 |
Example text | |
.rvt-color-blue-300 |
#63b1d3 |
Example text | |
.rvt-color-blue-400 |
#328bb8 |
Example text | |
.rvt-color-blue-500 |
#006298 |
Example text | |
.rvt-color-blue-600 |
#004f80 |
Example text | |
.rvt-color-blue-700 |
#00385f |
Example text | |
.rvt-color-green |
#056e41 |
Example text | |
.rvt-color-green-000 |
#f9f9f0 |
Example text | |
.rvt-color-green-100 |
#dee8c6 |
Example text | |
.rvt-color-green-200 |
#a7d094 |
Example text | |
.rvt-color-green-300 |
#63b363 |
Example text | |
.rvt-color-green-400 |
#329345 |
Example text | |
.rvt-color-green-500 |
#056e41 |
Example text | |
.rvt-color-green-600 |
#005c31 |
Example text | |
.rvt-color-green-700 |
#004421 |
Example text | |
.rvt-color-gold |
#ffaa00 |
Example text | |
.rvt-color-gold-000 |
#fffceb |
Example text | |
.rvt-color-gold-100 |
#fff4c6 |
Example text | |
.rvt-color-gold-200 |
#ffe694 |
Example text | |
.rvt-color-gold-300 |
#ffd563 |
Example text | |
.rvt-color-gold-400 |
#ffc132 |
Example text | |
.rvt-color-gold-500 |
#ffaa00 |
Example text | |
.rvt-color-gold-600 |
#a36b00 |
Example text | |
.rvt-color-gold-700 |
#613d00 |
Example text | |
.rvt-color-orange |
#df3603 |
Example text | |
.rvt-color-orange-000 |
#fff3f0 |
Example text | |
.rvt-color-orange-100 |
#ffcdc0 |
Example text | |
.rvt-color-orange-200 |
#ffa690 |
Example text | |
.rvt-color-orange-300 |
#ff7e60 |
Example text | |
.rvt-color-orange-400 |
#f75930 |
Example text | |
.rvt-color-orange-500 |
#df3603 |
Example text | |
.rvt-color-orange-600 |
#b11c00 |
Example text | |
.rvt-color-orange-700 |
#690a00 |
Example text | |
.rvt-color-purple |
#59264d |
Example text | |
.rvt-color-purple-000 |
#fbf8fb |
Example text | |
.rvt-color-purple-100 |
#decadc |
Example text | |
.rvt-color-purple-200 |
#c09ebb |
Example text | |
.rvt-color-purple-300 |
#a07498 |
Example text | |
.rvt-color-purple-400 |
#7d4c73 |
Example text | |
.rvt-color-purple-500 |
#59264d |
Example text | |
.rvt-color-purple-600 |
#48183d |
Example text | |
.rvt-color-purple-700 |
#330d2b |
Example text |