Github Share on Twitter

Colors

Rapid visual prototyping

The Palette

Property groupApplies to

--color-*

color , background-color

Pollen's color palette is designed for rapid prototyping as a better alternative to browser defaults, and to be extended as your project evolves.

Each color has a family of shades ranging from 300 (light) to 700 (dark), as well as an extended greyscale. The unsuffixed color (eg: --color-red) in each family is an alias for median in that family (eg: --color-red-500).

.alert {
  color: var(--color-red);
}

Greyscale

PropertyValue

--color-grey

var(--color-grey-500)

--color-grey-50

#f9fafb

--color-grey-100

#f2f4f5

--color-grey-200

#e8eaed

--color-grey-300

#d4d7dd

--color-grey-400

#a5aab4

--color-grey-500

#767c89

--color-grey-600

#555d6e

--color-grey-700

#3f4754

--color-grey-800

#2c343f

--color-grey-900

#10181C

--color-black

#14141B

Red

PropertyValue

--color-red

var(--color-red-500)

--color-red-300

#fc8181

--color-red-500

#e53e3e

--color-red-700

#c53030

Green

VariableValue

--color-green

var(--color-green-500)

--color-green-300

#9ae6b4

--color-green-500

#48bb78

--color-green-700

#2f855a

Blue

VariableValue

--color-blue

var(--color-blue-500)

--color-blue-300

#63b3ed

--color-blue-500

#4299e1

--color-blue-700

#3182ce

Pink

PropertyValue

--color-pink

var(--color-pink-500)

--color-pink-300

#fbb6ce

--color-pink-500

#ed64a6

--color-pink-700

#d53f8c

Purple

PropertyValue

--color-purple

var(--color-purple-500)

--color-purple-300

#b794f4

--color-purple-500

#805ad5

--color-purple-700

#6b46c1

Teal

PropertyValue

--color-teal

var(--color-teal-500)

--color-teal-300

#81e6d9

--color-teal-500

#38b2ac

--color-teal-700

#2c7a7b

Yellow

PropertyValue

--color-yellow

var(--color-yellow-500)

--color-yellow-300

#faf089

--color-yellow-500

#ecc94b

--color-yellow-700

#d69e2e

Orange

PropertyValue

--color-orange

var(--color-orange-500)

--color-orange-300

#fbd38d

--color-orange-500

#ff9800

--color-orange-700

#dd6b20

Brown

PropertyValue

--color-brown

var(--color-brown-500)

--color-brown-300

#a1887f

--color-brown-500

#795548

--color-brown-700

#5d4037

PreviousGridNextdefineConfig

Last updated