Skip to main content

Tailwind Extended Colors

Color test page

This page renders every token from theme.extend.colors in apps/nuxt/tailwind.config.ts.

main

main

bg-main

rgba(0, 0, 0, 1)

Sample text preview
a1

a1

bg-a1

rgba(235, 245, 255, 1)

Sample text preview
a2

a2

bg-a2

rgba(170, 214, 255, 1)

Sample text preview
a3

a3

bg-a3

rgba(121, 188, 231, 1)

Sample text preview
a4

a4

bg-a4

rgba(80, 143, 204, 1)

Sample text preview
a5

a5

bg-a5

rgba(18, 47, 120, 1)

Sample text preview
b1

b1

bg-b1

rgba(240, 242, 217, 1)

Sample text preview
b2

b2

bg-b2

rgba(209, 214, 154, 1)

Sample text preview
b3

b3

bg-b3

rgba(145, 156, 28, 1)

Sample text preview
b4

b4

bg-b4

rgba(116, 125, 22, 1)

Sample text preview
b5

b5

bg-b5

rgba(58, 63, 11, 1)

Sample text preview
n1

n1

bg-n1

rgba(255, 255, 255, 1)

Sample text preview
n2

n2

bg-n2

rgba(248, 248, 248, 1)

Sample text preview
n3

n3

bg-n3

rgba(225, 225, 225, 1)

Sample text preview
n4

n4

bg-n4

rgba(82, 82, 82, 1)

Sample text preview
n5

n5

bg-n5

rgba(23, 23, 23, 1)

Sample text preview
ov1

ov1

bg-ov1

rgba(0, 0, 0, 0.2)

Sample text preview
ov2

ov2

bg-ov2

rgba(255, 255, 255, 0.2)

Sample text preview
z6

z6

bg-z6

rgba(229, 244, 234, 1)

Sample text preview
z7

z7

bg-z7

rgba(149, 202, 163, 1)

Sample text preview
z8

z8

bg-z8

rgba(0, 123, 34, 1)

Sample text preview
z9

z9

bg-z9

rgba(0, 69, 20, 1)

Sample text preview
z10

z10

bg-z10

rgba(0, 21, 6, 1)

Sample text preview
z11

z11

bg-z11

rgba(254, 236, 236, 1)

Sample text preview
z12

z12

bg-z12

rgba(254, 179, 179, 1)

Sample text preview
z13

z13

bg-z13

rgba(214, 0, 0, 1)

Sample text preview
z14

z14

bg-z14

rgba(125, 0, 0, 1)

Sample text preview
z15

z15

bg-z15

rgba(45, 0, 0, 1)

Sample text preview
n1b

n1b

bg-n1b

rgba(255, 255, 255, 0.25)

Sample text preview
overlay

overlay

bg-overlay

rgba(23, 23, 23, 0.25)

Sample text preview