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