Skip to main content

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