Skip to main content

Color

Set foreground or background colors

Overview #

Use the color utilities to set an element’s foreground or background color.

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