Colors

Rapid visual prototyping

Last updated 10 months ago

Was this helpful?

Colors

Rapid visual prototyping

Pollen includes a default color palette for rapid prototyping as a better alternative to browser defaults. It's designed to be a robust base that you can either replace or adapt from as your project evolves.

The Palette

Property group

Applies to

--color-*

color , background-color

Pollen borrows from and lightly adapts Tailwind's excellent .

Each color has a family of shades ranging from 50 (very light) to 950 (very dark). 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);
}

Grey

Variable

Value

--grey-50

#f9fafb

--grey-100

#f3f4f6

--grey-200

#e5e7eb

--grey-300

#d1d5db

--grey-400

#9ca3af

--grey-500

#6b7280

--grey-600

#4b5563

--grey-700

#374151

--grey-800

#1f2937

--grey-900

#111827

--grey-950

#030712

--grey

var(--color-grey-500)

Slate

Variable

Value

--slate-50

#f8fafc

--slate-100

#f1f5f9

--slate-200

#e2e8f0

--slate-300

#cbd5e1

--slate-400

#94a3b8

--slate-500

#64748b

--slate-600

#475569

--slate-700

#334155

--slate-800

#1e293b

--slate-900

#0f172a

--slate-950

#020617

--slate

var(--color-slate-500)

Zinc

Variable

Value

--zinc-50

#fafafa

--zinc-100

#f4f4f5

--zinc-200

#e4e4e7

--zinc-300

#d4d4d8

--zinc-400

#a1a1aa

--zinc-500

#71717a

--zinc-600

#52525b

--zinc-700

#3f3f46

--zinc-800

#27272a

--zinc-900

#18181b

--zinc-950

#09090b

--zinc

var(--color-zinc-500)

Stone

Variable

Value

--stone-50

#fafaf9

--stone-100

#f5f5f4

--stone-200

#e7e5e4

--stone-300

#d6d3d1

--stone-400

#a8a29e

--stone-500

#78716c

--stone-600

#57534e

--stone-700

#44403c

--stone-800

#292524

--stone-900

#1c1917

--stone-950

#0c0a09

--stone

var(--color-stone-500)

Red

Variable

Value

--red-50

#fef2f2

--red-100

#fee2e2

--red-200

#fecaca

--red-300

#fca5a5

--red-400

#f87171

--red-500

#ef4444

--red-600

#dc2626

--red-700

#b91c1c

--red-800

#991b1b

--red-900

#7f1d1d

--red-950

#450a0a

--red

var(--color-red-500)

Orange

Variable

Value

--orange-50

#fff7ed

--orange-100

#ffedd5

--orange-200

#fed7aa

--orange-300

#fdba74

--orange-400

#fb923c

--orange-500

#f97316

--orange-600

#ea580c

--orange-700

#c2410c

--orange-800

#9a3412

--orange-900

#7c2d12

--orange-950

#431407

--orange

var(--color-orange-500)

Amber

Variable

Value

--amber-50

#fffbeb

--amber-100

#fef3c7

--amber-200

#fde68a

--amber-300

#fcd34d

--amber-400

#fbbf24

--amber-500

#f59e0b

--amber-600

#d97706

--amber-700

#b45309

--amber-800

#92400e

--amber-900

#78350f

--amber-950

#451a03

--amber

var(--color-amber-500)

Yellow

Variable

Value

--yellow-50

#fefce8

--yellow-100

#fef9c3

--yellow-200

#fef08a

--yellow-300

#fde047

--yellow-400

#facc15

--yellow-500

#eab308

--yellow-600

#ca8a04

--yellow-700

#a16207

--yellow-800

#854d0e

--yellow-900

#713f12

--yellow-950

#422006

--yellow

var(--color-yellow-500)

Lime

Variable

Value

--lime-50

#f7fee7

--lime-100

#ecfccb

--lime-200

#d9f99d

--lime-300

#bef264

--lime-400

#a3e635

--lime-500

#84cc16

--lime-600

#65a30d

--lime-700

#4d7c0f

--lime-800

#3f6212

--lime-900

#365314

--lime-950

#1a2e05

--lime

var(--color-lime-500)

Green

Variable

Value

--green-50

#f0fdf4

--green-100

#dcfce7

--green-200

#bbf7d0

--green-300

#86efac

--green-400

#4ade80

--green-500

#22c55e

--green-600

#16a34a

--green-700

#15803d

--green-800

#166534

--green-900

#14532d

--green-950

#052e16

--green

var(--color-green-500)

Emerald

Variable

Value

--emerald-50

#ecfdf5

--emerald-100

#d1fae5

--emerald-200

#a7f3d0

--emerald-300

#6ee7b7

--emerald-400

#34d399

--emerald-500

#10b981

--emerald-600

#059669

--emerald-700

#047857

--emerald-800

#065f46

--emerald-900

#064e3b

--emerald-950

#022c22

--emerald

var(--color-emerald-500)

Teal

Variable

Value

--teal-50

#f0fdfa

--teal-100

#ccfbf1

--teal-200

#99f6e4

--teal-300

#5eead4

--teal-400

#2dd4bf

--teal-500

#14b8a6

--teal-600

#0d9488

--teal-700

#0f766e

--teal-800

#115e59

--teal-900

#134e4a

--teal-950

#042f2e

--teal

var(--color-teal-500)

Cyan

Variable

Value

--cyan-50

#ecfeff

--cyan-100

#cffafe

--cyan-200

#a5f3fc

--cyan-300

#67e8f9

--cyan-400

#22d3ee

--cyan-500

#06b6d4

--cyan-600

#0891b2

--cyan-700

#0e7490

--cyan-800

#155e75

--cyan-900

#164e63

--cyan-950

#083344

--cyan

var(--color-cyan-500)

Sky

Variable

Value

--sky-50

#f0f9ff

--sky-100

#e0f2fe

--sky-200

#bae6fd

--sky-300

#7dd3fc

--sky-400

#38bdf8

--sky-500

#0ea5e9

--sky-600

#0284c7

--sky-700

#0369a1

--sky-800

#075985

--sky-900

#0c4a6e

--sky-950

#082f49

--sky

var(--color-sky-500)

Blue

Variable

Value

--blue-50

#eff6ff

--blue-100

#dbeafe

--blue-200

#bfdbfe

--blue-300

#93c5fd

--blue-400

#60a5fa

--blue-500

#3b82f6

--blue-600

#2563eb

--blue-700

#1d4ed8

--blue-800

#1e40af

--blue-900

#1e3a8a

--blue-950

#172554

--blue

var(--color-blue-500)

Indigo

Variable

Value

--indigo-50

#eef2ff

--indigo-100

#e0e7ff

--indigo-200

#c7d2fe

--indigo-300

#a5b4fc

--indigo-400

#818cf8

--indigo-500

#6366f1

--indigo-600

#4f46e5

--indigo-700

#4338ca

--indigo-800

#3730a3

--indigo-900

#312e81

--indigo-950

#1e1b4b

--indigo

var(--color-indigo-500)

Violet

Variable

Value

--violet-50

#f5f3ff

--violet-100

#ede9fe

--violet-200

#ddd6fe

--violet-300

#c4b5fd

--violet-400

#a78bfa

--violet-500

#8b5cf6

--violet-600

#7c3aed

--violet-700

#6d28d9

--violet-800

#5b21b6

--violet-900

#4c1d95

--violet-950

#2e1065

--violet

var(--color-violet-500)

Purple

Variable

Value

--purple-50

#faf5ff

--purple-100

#f3e8ff

--purple-200

#e9d5ff

--purple-300

#d8b4fe

--purple-400

#c084fc

--purple-500

#a855f7

--purple-600

#9333ea

--purple-700

#7e22ce

--purple-800

#6b21a8

--purple-900

#581c87

--purple-950

#3b0764

--purple

var(--color-purple-500)

Fuchsia

Variable

Value

--fuchsia-50

#fdf4ff

--fuchsia-100

#fae8ff

--fuchsia-200

#f5d0fe

--fuchsia-300

#f0abfc

--fuchsia-400

#e879f9

--fuchsia-500

#d946ef

--fuchsia-600

#c026d3

--fuchsia-700

#a21caf

--fuchsia-800

#86198f

--fuchsia-900

#701a75

--fuchsia-950

#4a044e

--fuchsia

var(--color-fuchsia-500)

Pink

Variable

Value

--pink-50

#fdf2f8

--pink-100

#fce7f3

--pink-200

#fbcfe8

--pink-300

#f9a8d4

--pink-400

#f472b6

--pink-500

#ec4899

--pink-600

#db2777

--pink-700

#be185d

--pink-800

#9d174d

--pink-900

#831843

--pink-950

#500724

--pink

var(--color-pink-500)

Rose

Variable

Value

--rose-50

#fff1f2

--rose-100

#ffe4e6

--rose-200

#fecdd3

--rose-300

#fda4af

--rose-400

#fb7185

--rose-500

#f43f5e

--rose-600

#e11d48

--rose-700

#be123c

--rose-800

#9f1239

--rose-900

#881337

--rose-950

#4c0519

--rose

var(--color-rose-500)

PreviousGrid NextdefineConfig

Last updated 10 months ago

Was this helpful?

The Palette

Property group

Applies to

--color-*

color , background-color

Pollen borrows from and lightly adapts Tailwind's excellent .

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

Grey

Variable

Value

--grey-50

#f9fafb

--grey-100

#f3f4f6

--grey-200

#e5e7eb

--grey-300

#d1d5db

--grey-400

#9ca3af

--grey-500

#6b7280

--grey-600

#4b5563

--grey-700

#374151

--grey-800

#1f2937

--grey-900

#111827

--grey-950

#030712

--grey

var(--color-grey-500)

Slate

Variable

Value

--slate-50

#f8fafc

--slate-100

#f1f5f9

--slate-200

#e2e8f0

--slate-300

#cbd5e1

--slate-400

#94a3b8

--slate-500

#64748b

--slate-600

#475569

--slate-700

#334155

--slate-800

#1e293b

--slate-900

#0f172a

--slate-950

#020617

--slate

var(--color-slate-500)

Zinc

Variable

Value

--zinc-50

#fafafa

--zinc-100

#f4f4f5

--zinc-200

#e4e4e7

--zinc-300

#d4d4d8

--zinc-400

#a1a1aa

--zinc-500

#71717a

--zinc-600

#52525b

--zinc-700

#3f3f46

--zinc-800

#27272a

--zinc-900

#18181b

--zinc-950

#09090b

--zinc

var(--color-zinc-500)

Stone

Variable

Value

--stone-50

#fafaf9

--stone-100

#f5f5f4

--stone-200

#e7e5e4

--stone-300

#d6d3d1

--stone-400

#a8a29e

--stone-500

#78716c

--stone-600

#57534e

--stone-700

#44403c

--stone-800

#292524

--stone-900

#1c1917

--stone-950

#0c0a09

--stone

var(--color-stone-500)

Red

Variable

Value

--red-50

#fef2f2

--red-100

#fee2e2

--red-200

#fecaca

--red-300

#fca5a5

--red-400

#f87171

--red-500

#ef4444

--red-600

#dc2626

--red-700

#b91c1c

--red-800

#991b1b

--red-900

#7f1d1d

--red-950

#450a0a

--red

var(--color-red-500)

Orange

Variable

Value

--orange-50

#fff7ed

--orange-100

#ffedd5

--orange-200

#fed7aa

--orange-300

#fdba74

--orange-400

#fb923c

--orange-500

#f97316

--orange-600

#ea580c

--orange-700

#c2410c

--orange-800

#9a3412

--orange-900

#7c2d12

--orange-950

#431407

--orange

var(--color-orange-500)

Amber

Variable

Value

--amber-50

#fffbeb

--amber-100

#fef3c7

--amber-200

#fde68a

--amber-300

#fcd34d

--amber-400

#fbbf24

--amber-500

#f59e0b

--amber-600

#d97706

--amber-700

#b45309

--amber-800

#92400e

--amber-900

#78350f

--amber-950

#451a03

--amber

var(--color-amber-500)

Yellow

Variable

Value

--yellow-50

#fefce8

--yellow-100

#fef9c3

--yellow-200

#fef08a

--yellow-300

#fde047

--yellow-400

#facc15

--yellow-500

#eab308

--yellow-600

#ca8a04

--yellow-700

#a16207

--yellow-800

#854d0e

--yellow-900

#713f12

--yellow-950

#422006

--yellow

var(--color-yellow-500)

Lime

Variable

Value

--lime-50

#f7fee7

--lime-100

#ecfccb

--lime-200

#d9f99d

--lime-300

#bef264

--lime-400

#a3e635

--lime-500

#84cc16

--lime-600

#65a30d

--lime-700

#4d7c0f

--lime-800

#3f6212

--lime-900

#365314

--lime-950

#1a2e05

--lime

var(--color-lime-500)

Green

Variable

Value

--green-50

#f0fdf4

--green-100

#dcfce7

--green-200

#bbf7d0

--green-300

#86efac

--green-400

#4ade80

--green-500

#22c55e

--green-600

#16a34a

--green-700

#15803d

--green-800

#166534

--green-900

#14532d

--green-950

#052e16

--green

var(--color-green-500)

Emerald

Variable

Value

--emerald-50

#ecfdf5

--emerald-100

#d1fae5

--emerald-200

#a7f3d0

--emerald-300

#6ee7b7

--emerald-400

#34d399

--emerald-500

#10b981

--emerald-600

#059669

--emerald-700

#047857

--emerald-800

#065f46

--emerald-900

#064e3b

--emerald-950

#022c22

--emerald

var(--color-emerald-500)

Teal

Variable

Value

--teal-50

#f0fdfa

--teal-100

#ccfbf1

--teal-200

#99f6e4

--teal-300

#5eead4

--teal-400

#2dd4bf

--teal-500

#14b8a6

--teal-600

#0d9488

--teal-700

#0f766e

--teal-800

#115e59

--teal-900

#134e4a

--teal-950

#042f2e

--teal

var(--color-teal-500)

Cyan

Variable

Value

--cyan-50

#ecfeff

--cyan-100

#cffafe

--cyan-200

#a5f3fc

--cyan-300

#67e8f9

--cyan-400

#22d3ee

--cyan-500

#06b6d4

--cyan-600

#0891b2

--cyan-700

#0e7490

--cyan-800

#155e75

--cyan-900

#164e63

--cyan-950

#083344

--cyan

var(--color-cyan-500)

Sky

Variable

Value

--sky-50

#f0f9ff

--sky-100

#e0f2fe

--sky-200

#bae6fd

--sky-300

#7dd3fc

--sky-400

#38bdf8

--sky-500

#0ea5e9

--sky-600

#0284c7

--sky-700

#0369a1

--sky-800

#075985

--sky-900

#0c4a6e

--sky-950

#082f49

--sky

var(--color-sky-500)

Blue

Variable

Value

--blue-50

#eff6ff

--blue-100

#dbeafe

--blue-200

#bfdbfe

--blue-300

#93c5fd

--blue-400

#60a5fa

--blue-500

#3b82f6

--blue-600

#2563eb

--blue-700

#1d4ed8

--blue-800

#1e40af

--blue-900

#1e3a8a

--blue-950

#172554

--blue

var(--color-blue-500)

Indigo

Variable

Value

--indigo-50

#eef2ff

--indigo-100

#e0e7ff

--indigo-200

#c7d2fe

--indigo-300

#a5b4fc

--indigo-400

#818cf8

--indigo-500

#6366f1

--indigo-600

#4f46e5

--indigo-700

#4338ca

--indigo-800

#3730a3

--indigo-900

#312e81

--indigo-950

#1e1b4b

--indigo

var(--color-indigo-500)

Violet

Variable

Value

--violet-50

#f5f3ff

--violet-100

#ede9fe

--violet-200

#ddd6fe

--violet-300

#c4b5fd

--violet-400

#a78bfa

--violet-500

#8b5cf6

--violet-600

#7c3aed

--violet-700

#6d28d9

--violet-800

#5b21b6

--violet-900

#4c1d95

--violet-950

#2e1065

--violet

var(--color-violet-500)

Purple

Variable

Value

--purple-50

#faf5ff

--purple-100

#f3e8ff

--purple-200

#e9d5ff

--purple-300

#d8b4fe

--purple-400

#c084fc

--purple-500

#a855f7

--purple-600

#9333ea

--purple-700

#7e22ce

--purple-800

#6b21a8

--purple-900

#581c87

--purple-950

#3b0764

--purple

var(--color-purple-500)

Fuchsia

Variable

Value

--fuchsia-50

#fdf4ff

--fuchsia-100

#fae8ff

--fuchsia-200

#f5d0fe

--fuchsia-300

#f0abfc

--fuchsia-400

#e879f9

--fuchsia-500

#d946ef

--fuchsia-600

#c026d3

--fuchsia-700

#a21caf

--fuchsia-800

#86198f

--fuchsia-900

#701a75

--fuchsia-950

#4a044e

--fuchsia

var(--color-fuchsia-500)

Pink

Variable

Value

--pink-50

#fdf2f8

--pink-100

#fce7f3

--pink-200

#fbcfe8

--pink-300

#f9a8d4

--pink-400

#f472b6

--pink-500

#ec4899

--pink-600

#db2777

--pink-700

#be185d

--pink-800

#9d174d

--pink-900

#831843

--pink-950

#500724

--pink

var(--color-pink-500)

Rose

Variable

Value

--rose-50

#fff1f2

--rose-100

#ffe4e6

--rose-200

#fecdd3

--rose-300

#fda4af

--rose-400

#fb7185

--rose-500

#f43f5e

--rose-600

#e11d48

--rose-700

#be123c

--rose-800

#9f1239

--rose-900

#881337

--rose-950

#4c0519

--rose

var(--color-rose-500)