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