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.

Foreground color

.rvt-color-white

Background color

.rvt-bg-black

Example text

Meets WCAG AAA

Usage #

Rivet color utilities
CSS classes	Hex code	Foreground 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-black-500 .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