Skip to main content

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
Meets WCAG AAA

Usage #

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