Edit page
Home
Getting Started
Components
Forms
Typography
Utilities
Visualization Components

Color Utilities

Convey meaning through color with a handful of color utility classes.

Colors

How to use:

import { colors } from 'real-react`
...
<div style={{color: colors.darkRed}} />

Note: click on color name or color value to copy to clipboard.

Color NameColor Value

kellerRed

#ce011f

kelleBlue

#3ec5d3

darkBlue

#01707b

blue

#0099a7

blue80

#33adb9

blue60

#66c2ca

blue40

#99d6dc

blue20

#ccebed

blue10

#e5f4f6

darkRed

#ce011f

red

#ee0033

red80

#f1335c

red60

#f56685

red40

#f899ad

red20

#fcccd6

red10

#fde5ea

darkCoral

#fa3720

coral

#fc6a59

coral80

#fd887a

coral60

#fda69b

coral40

#fec3bd

coral20

#fee1de

coral10

#fef0ee

darkOrange

#ec7618

orange

#ee9146

orange80

#f1a76b

orange60

#f5bd90

orange40

#f8d3b5

orange20

#fce9da

orange10

#fdf4ec

darkGold

#f3be04

gold

#ffce24

gold80

#ffd850

gold60

#ffe27c

gold40

#ffeba7

gold20

#fff5d3

gold10

#fffae9

darkGreen

#00c392

green

#00dda6

green80

#33e4b8

green60

#66ebca

green40

#99f1db

green20

#ccf8ed

green10

#e5fbf6

darkPurple

#6662ce

purple

#7774cf

purple80

#9290d9

purple60

#adace2

purple40

#c9c7ec

purple20

#e4e3f5

purple10

#f1f1fa

black

#000000

neutral01

#373f51

neutral02

#5f6574

neutral03

#737885

neutral04

#878c97

neutral05

#afb2b9

neutral06

#cacfd3

neutral07

#d7d9dc

neutral08

#f5f5f6

neutral09

#fafafa

white

#ffffff

Text Color

Blue

Coral

Gold

Green

Orange

Purple

Red

White

Text Color on Hover

Blue

Coral

Gold

Green

Orange

Purple

Red

White

Background Colors

Blue

Coral

Gold

Green

Orange

Purple

Red

White