Colors

Read all color variables

Overview

Ravenbright provide color palettes in CSS variables with this property --rbrh-{name}-{value}. All design colors are the cornerstone of Ravenbright utility classes.

These palettes have broad color scale from 50-900 value.

• 50 means the lightest shade
• 900 is the darkest shade

Basic Usage

With Utility CSS

<button class="bg-green-700 white">
  dark green background with white text
</button>
<p class="blue">blue text</p>
<article class="border-orange-300 bg-gray-50">
  orange border with light gray background
</article>

With CSS variables

button {
  /*Apply the color variables*/
  background-color: var(--rbrh-green-700);
}

Customize colors

To modify the color value, you can edit the variables in design-token:

/* palette - violet */
--rbrh-violet-50: #eee9fd;
--rbrh-violet-100: #cbbbf8;
--rbrh-violet-200: #b29af4;
--rbrh-violet-300: #8f6cf0;
--rbrh-violet-400: #7950ed;

tip

Checkout this complete tutorial on how to customize & add new design token in design-token

Color Palettes

Gray

Gray 50

#fafbfd--rbrh-gray-50

Gray 100

#edf1f7--rbrh-gray-100

Gray 200

#e5e8ec--rbrh-gray-200

Gray 300

#ced5db--rbrh-gray-300

Gray 400

#acb7c2--rbrh-gray-400

Gray 500

#748699--rbrh-gray-500

Gray 600

#404d59--rbrh-gray-600

Gray 700

#1d232e--rbrh-gray-700

Gray 800

#121821--rbrh-gray-800

Gray 900

#0a0e14--rbrh-gray-900

Green

green 50

#f0fdf5--rbrh-green-50

green 100

#e0faea--rbrh-green-100

green 200

#cff7df--rbrh-green-200

green 300

#bef4d4--rbrh-green-300

green 400

#45c97a--rbrh-green-400

green 500

#1bce63--rbrh-green-500

green 600

#048839--rbrh-green-600

green 700

#007c32--rbrh-green-700

green 800

#023c19--rbrh-green-800

green 900

#012911--rbrh-green-900

Lime

lime 50

#f8fcf7--rbrh-lime-50

lime 100

#ebf7e9--rbrh-lime-100

lime 200

#dbebe1--rbrh-lime-200

lime 300

#c4edbb--rbrh-lime-300

lime 400

#9bd991--rbrh-lime-400

lime 500

#59bf49--rbrh-lime-500

lime 600

#248514--rbrh-lime-600

lime 700

#1d310e--rbrh-lime-700

lime 800

#0e1c04--rbrh-lime-800

lime 900

#0b0f06--rbrh-lime-900

Cyan

cyan 50

#f4fafa--rbrh-cyan-50

cyan 100

#e1fafa--rbrh-cyan-100

cyan 200

#c7f6f6--rbrh-cyan-200

cyan 300

#94efef--rbrh-cyan-300

cyan 400

#50e4e4--rbrh-cyan-400

cyan 500

#1cb6b6--rbrh-cyan-500

cyan 600

#0f6161--rbrh-cyan-600

cyan 700

#0c5050--rbrh-cyan-700

cyan 800

#0a3f3f--rbrh-cyan-800

cyan 900

#072e2e--rbrh-cyan-900

Teal

teal 50

#e7f5f2--rbrh-teal-50

teal 100

#d6f5ed--rbrh-teal-100

teal 200

#acebdc--rbrh-teal-200

teal 300

#7ae5cc--rbrh-teal-300

teal 400

#42e0ba--rbrh-teal-400

teal 500

#14cc9f--rbrh-teal-500

teal 600

#048464--rbrh-teal-600

teal 700

#077156--rbrh-teal-700

teal 800

#053f31--rbrh-teal-800

teal 900

#022019--rbrh-teal-900

Red

red 50

#fee7e7--rbrh-red-50

red 100

#fdd5d5--rbrh-red-100

red 200

#faafaf--rbrh-red-200

red 300

#ec757b--rbrh-red-300

red 400

#e85a61--rbrh-red-400

red 500

#e2313a--rbrh-red-500

red 600

#ce2d35--rbrh-red-600

red 700

#a02329--rbrh-red-700

red 800

#7c1b20--rbrh-red-800

red 900

#5f1518--rbrh-red-900

Magenta

magenta 50

#ffedf4--rbrh-magenta-50

magenta 100

#ffc6dc--rbrh-magenta-100

magenta 200

#ff99c0--rbrh-magenta-200

magenta 300

#ff72a8--rbrh-magenta-300

magenta 400

#ff297a--rbrh-magenta-400

magenta 500

#ff0262--rbrh-magenta-500

magenta 600

#d90052--rbrh-magenta-600

magenta 700

#9f003c--rbrh-magenta-700

magenta 800

#77002d--rbrh-magenta-800

magenta 900

#3d0017--rbrh-magenta-900

Orange

orange 50

#ffebd8--rbrh-orange-50

orange 100

#ffe1c5--rbrh-orange-100

orange 200

#ffc28a--rbrh-orange-200

orange 300

#fea654--rbrh-orange-300

orange 400

#fe9533--rbrh-orange-400

orange 500

#fe7a00--rbrh-orange-500

orange 600

#e76f00--rbrh-orange-600

orange 700

#d63d00--rbrh-orange-700

orange 800

#8c4300--rbrh-orange-800

orange 900

#6b3300--rbrh-orange-900

Yellow

yellow 50

#f6f4f0--rbrh-yellow-50

yellow 100

#f5f2e7--rbrh-yellow-100

yellow 200

#f3e8c0--rbrh-yellow-200

yellow 300

#ebd277--rbrh-yellow-300

yellow 400

#eed371--rbrh-yellow-400

yellow 500

#ddaf0a--rbrh-yellow-500

yellow 600

#9e7e0c--rbrh-yellow-600

yellow 700

#7e6405--rbrh-yellow-700

yellow 800

#5a4806--rbrh-yellow-800

yellow 900

#292103--rbrh-yellow-900

Blue

blue 50

#f0f5fd--rbrh-blue-50

blue 100

#dee9fc--rbrh-blue-100

blue 200

#bcd6ff--rbrh-blue-200

blue 300

#98bbf4--rbrh-blue-300

blue 400

#74a3f0--rbrh-blue-400

blue 500

#3f80eb--rbrh-blue-500

blue 600

#1760d8--rbrh-blue-600

blue 700

#283f5f--rbrh-blue-700

blue 800

#121c2b--rbrh-blue-800

blue 900

#040e1b--rbrh-blue-900

Sky

sky 50

#e6f7fe--rbrh-sky-50

sky 100

#d8f5ff--rbrh-sky-100

sky 200

#a5e7ff--rbrh-sky-200

sky 300

#78dbff--rbrh-sky-300

sky 400

#5ad0fb--rbrh-sky-400

sky 500

#00b2f1--rbrh-sky-500

sky 600

#0c78a0--rbrh-sky-600

sky 700

#086385--rbrh-sky-700

sky 800

#08485f--rbrh-sky-800

sky 900

#063b4c--rbrh-sky-900

Indigo

indigo 50

#eeedfe--rbrh-indigo-50

indigo 100

#cac6fc--rbrh-indigo-100

indigo 200

#b0abfa--rbrh-indigo-200

indigo 300

#8c84f8--rbrh-indigo-300

indigo 400

#756df7--rbrh-indigo-400

indigo 500

#5348f5--rbrh-indigo-500

indigo 600

#4c42df--rbrh-indigo-600

indigo 700

#3b33ae--rbrh-indigo-700

indigo 800

#2e2887--rbrh-indigo-800

indigo 900

#231e67--rbrh-indigo-900

Purple

purple 50

#f5f2ff--rbrh-purple-50

purple 100

#eae4ff--rbrh-purple-100

purple 200

#d7cdff--rbrh-purple-200

purple 300

#b19dff--rbrh-purple-300

purple 400

#9176ff--rbrh-purple-400

purple 500

#623bff--rbrh-purple-500

purple 600

#3300ff--rbrh-purple-600

purple 700

#2b00d8--rbrh-purple-700

purple 800

#1f009d--rbrh-purple-800

purple 900

#140062--rbrh-purple-900

Violet

violet 50

#eee9fd--rbrh-violet-50

violet 100

#cbbbf8--rbrh-violet-100

violet 200

#b29af4--rbrh-violet-200

violet 300

#8f6cf0--rbrh-violet-300

violet 400

#7950ed--rbrh-violet-400

violet 500

#5824e8--rbrh-violet-500

violet 600

#5021d3--rbrh-violet-600

violet 700

#3e1aa5--rbrh-violet-700

violet 800

#301480--rbrh-violet-800

violet 900

#250f61--rbrh-violet-900