Colors

A diverse color system for creating meaningful experiences


# Color system

Elements CSS comes with a diverse color system to craft meaningful experiences that are flexible and accessible.

Each color comes in 10 shades that share a similar perceptive brightness, meaning you can swap the background of a button that has white text from .bg-pink-300 to .bg-blue-300 with little effect on the text contrast.

When using color it’s important to consider contrast, a simple rule is that colors 400 and below should be used with dark text, whilst colors 500 and above should be used with light text. This is indicated by the ● symbol in each swatch.

Colors are accessible via .*-{color}-{tone} utility classes like .text-blue-300.

gray

0

#FDF8FF

20.05b / 1.05w

100

#F8F6F9

19.54b / 1.07w

200

#E9E7EA

17.08b / 1.23w

300

#CFCBCE

13.09b / 1.6w

400

#A8A3A7

8.46b / 2.48w

500

#7B7479

4.62b / 4.55w

600

#514B4F

2.47b / 8.5w

700

#342E32

1.58b / 13.27w

800

#231E21

1.28b / 16.42w

900

#1A1217

1.14b / 18.38w

violet

0

#F6F3FF

19.18b / 1.09w

100

#EFE4FF

17.21b / 1.22w

200

#DCC4FF

13.38b / 1.57w

300

#BD90FF

8.6b / 2.44w

400

#944EFA

4.73b / 4.44w

500

#680CE9

2.82b / 7.45w

600

#5900BE

2.17b / 9.68w

700

#49008F

1.68b / 12.5w

800

#350061

1.32b / 15.86w

900

#1E0033

1.1b / 19.04w

magenta

0

#FBF3FF

19.37b / 1.08w

100

#F7DDFF

16.74b / 1.25w

200

#EFB8FD

12.94b / 1.62w

300

#E583F7

8.92b / 2.35w

400

#D543ED

5.85b / 3.59w

500

#BF04DC

4.27b / 4.92w

600

#B400BA

3.65b / 5.75w

700

#92008A

2.59b / 8.11w

800

#630056

1.66b / 12.61w

900

#330029

1.17b / 17.91w

blue

0

#F4FDFF

20.34b / 1.03w

100

#C2EBFD

16.6b / 1.27w

200

#90C9F7

11.88b / 1.77w

300

#64A0EB

7.77b / 2.7w

400

#4177D8

4.86b / 4.33w

500

#2753BF

3.08b / 6.83w

600

#1637A1

2.1b / 10.02w

700

#0B2381

1.57b / 13.36w

800

#051560

1.28b / 16.37w

900

#020D40

1.13b / 18.52w

teal

0

#F4FFFC

20.56b / 1.02w

100

#BEF8EC

17.83b / 1.18w

200

#87E8DC

14.61b / 1.44w

300

#57CDC8

10.97b / 1.91w

400

#32A4A8

7.01b / 3w

500

#1A777F

3.99b / 5.26w

600

#0C515A

2.34b / 8.97w

700

#05363E

1.6b / 13.09w

800

#02272D

1.33b / 15.78w

900

#012026

1.24b / 16.99w

green

0

#F6FFF4

20.53b / 1.02w

100

#C0F8BE

17.41b / 1.21w

200

#87E891

13.98b / 1.5w

300

#57CD71

10.38b / 2.02w

400

#32A857

6.87b / 3.05w

500

#1A7F40

4.15b / 5.06w

600

#0C5A2D

2.52b / 8.35w

700

#053E20

1.72b / 12.24w

800

#022D17

1.39b / 15.1w

900

#012614

1.29b / 16.3w

yellow

0

#FFFCF4

20.48b / 1.03w

100

#F9F0BF

18.24b / 1.15w

200

#EAE388

15.84b / 1.33w

300

#CECF58

12.69b / 1.65w

400

#A2A933

8.26b / 2.54w

500

#727D19

4.66b / 4.5w

600

#4A550B

2.6b / 8.09w

700

#303805

1.69b / 12.4w

800

#212702

1.36b / 15.49w

900

#1B2101

1.26b / 16.61w

orange

0

#FFF7F4

19.86b / 1.06w

100

#FDD0BC

14.93b / 1.41w

200

#F6AB85

11.08b / 1.89w

300

#E98C55

8.35b / 2.52w

400

#D6722F

6.31b / 3.33w

500

#BB5B16

4.62b / 4.54w

600

#9B4606

3.27b / 6.42w

700

#793500

2.32b / 9.04w

800

#552600

1.66b / 12.62w

900

#331700

1.26b / 16.62w

red

0

#FFF4F4

19.5b / 1.08w

100

#FDC2C4

13.69b / 1.53w

200

#F79092

9.36b / 2.24w

300

#EB6467

6.55b / 3.21w

400

#D84144

4.76b / 4.41w

500

#BF272A

3.54b / 5.93w

600

#A11618

2.64b / 7.94w

700

#810B0D

1.99b / 10.57w

800

#600507

1.52b / 13.8w

900

#400203

1.23b / 17.1w

pink

0

#FFF4FF

19.64b / 1.07w

100

#FDC2F5

14.21b / 1.48w

200

#F790DB

9.97b / 2.11w

300

#EB64B6

7.03b / 2.99w

400

#D84190

5.08b / 4.13w

500

#BF276C

3.72b / 5.64w

600

#A1164E

2.74b / 7.66w

700

#810B36

2.03b / 10.32w

800

#600525

1.55b / 13.59w

900

#400217

1.24b / 16.95w


# Theme colors

Functional color classes are used to create predictable messaging and status, they tell user how to engauge with a product, from consistent buttons, to success and error messages. Access these colors via the .*-{color} utility classes like this .bg-info.

Primary

#680CE9

2.82b / 7.45w

Secondary

#1E0033

1.1b / 19.04w

Info

#64A0EB

7.77b / 2.7w

Success

#57CD71

10.38b / 2.02w

Warning

#CECF58

12.69b / 1.65w

Danger

#EB6467

6.55b / 3.21w

White

#FFFFFF

21b / 1w

Light

#FDF8FF

20.05b / 1.05w

Gray

#E9E7EA

17.08b / 1.23w

Dark

#342E32

1.58b / 13.27w

Black

#000000

1b / 21w

Theme colors also have .*-{color}-light and .*-{color}-dark variations to support the different states.

Primary

Light

#944EFA

4.73b / 4.44w

Default

#680CE9

2.82b / 7.45w

Dark

#5900BE

2.17b / 9.68w

Secondary

Light

#49008F

1.68b / 12.5w

Default

#1E0033

1.1b / 19.04w

Dark

#350061

1.32b / 15.86w

Info

Light

#90C9F7

11.88b / 1.77w

Default

#64A0EB

7.77b / 2.7w

Dark

#4177D8

4.86b / 4.33w

Success

Light

#87E891

13.98b / 1.5w

Default

#57CD71

10.38b / 2.02w

Dark

#32A857

6.87b / 3.05w

Warning

Light

#EAE388

15.84b / 1.33w

Default

#CECF58

12.69b / 1.65w

Dark

#A2A933

8.26b / 2.54w

Danger

Light

#F79092

9.36b / 2.24w

Default

#EB6467

6.55b / 3.21w

Dark

#D84144

4.76b / 4.41w


# Base colors

Blue

#64A0EB

7.77b / 2.7w

Teal

#57CDC8

10.97b / 1.91w

Green

#57CD71

10.38b / 2.02w

Yellow

#CECF58

12.69b / 1.65w

Orange

#E98C55

8.35b / 2.52w

Red

#EB6467

6.55b / 3.21w

Pink

#EB64B6

7.03b / 2.99w

# Brand colors

Q-CTRL’s brand colors, can be accessed using *-brand-{color} utility classes.

Primary

#680CE9

2.82b / 7.45w

Accent

#BF04DC

4.27b / 4.92w

Secondary

#1E0033

1.1b / 19.04w

Dark

#250D2E

1.18b / 17.86w

Note: these colors do not share a perceptive brightness with the rest of the colors, they are solely intended to communicate Q-CTRL's brand.


# Opacity

You can change the opacity of any color by using the *-opacity-{amount} utility classes, check out the Opacity documentation.

.bg-opacity-0

 

.bg-opacity-5

 

.bg-opacity-10

 

.bg-opacity-15

 

.bg-opacity-20

 

.bg-opacity-25

 

.bg-opacity-30

 

.bg-opacity-35

 

.bg-opacity-40

 

.bg-opacity-45

 

.bg-opacity-50

 

.bg-opacity-55

 

.bg-opacity-60

 

.bg-opacity-65

 

.bg-opacity-70

 

.bg-opacity-75

 

.bg-opacity-80

 

.bg-opacity-85

 

.bg-opacity-90

 

.bg-opacity-95

 

.bg-opacity-100