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
#F8F8FA
19.8b / 1.06w
100
#F2F1F6
18.69b / 1.12w
200
#E5E4E9
16.61b / 1.26w
300
#CCCBD1
13.03b / 1.61w
400
#A9A8AF
8.91b / 2.36w
500
#77767F
4.68b / 4.49w
600
#55545D
2.81b / 7.47w
700
#35343C
1.71b / 12.3w
800
#222128
1.32b / 15.96w
900
#0F0D16
1.09b / 19.28w
violet
0
#F8F5FF
19.5b / 1.08w
100
#EDE0FE
16.69b / 1.26w
200
#D7BCFD
12.5b / 1.68w
300
#B482FA
7.51b / 2.79w
400
#9553F8
4.87b / 4.31w
500
#680CE9
2.82b / 7.45w
600
#5900BE
2.17b / 9.68w
700
#440087
1.6b / 13.16w
800
#340060
1.31b / 15.97w
900
#1E0033
1.1b / 19.04w
magenta
0
#FBF5FF
19.61b / 1.07w
100
#F5DEFE
16.76b / 1.25w
200
#EEBCFC
13.23b / 1.59w
300
#E181F3
8.64b / 2.43w
400
#C846E0
5.41b / 3.88w
500
#BF04DC
4.27b / 4.92w
600
#A300A8
3.12b / 6.72w
700
#92008A
2.59b / 8.11w
800
#7A0373
2.09b / 10.06w
900
#34002B
1.18b / 17.78w
blue
0
#E5FAFF
19.45b / 1.08w
100
#C6ECFC
16.8b / 1.25w
200
#A3D3FB
13.27b / 1.58w
300
#76AAEF
8.77b / 2.4w
400
#4B7AD9
5.08b / 4.13w
500
#2157CE
3.32b / 6.33w
600
#1F3EAA
2.33b / 9.02w
700
#0D227E
1.55b / 13.57w
800
#01145E
1.26b / 16.63w
900
#00062F
1.07b / 19.68w
teal
0
#D6FFF5
19.48b / 1.08w
100
#B5F6E9
17.32b / 1.21w
200
#76E4D7
13.85b / 1.52w
300
#3CCBC5
10.54b / 1.99w
400
#2AA1A4
6.73b / 3.12w
500
#147F87
4.42b / 4.76w
600
#036873
3.23b / 6.5w
700
#03414F
1.87b / 11.21w
800
#012C34
1.41b / 14.88w
900
#00181E
1.15b / 18.27w
green
0
#EBFFE7
19.99b / 1.05w
100
#CFF8C7
17.9b / 1.17w
200
#91EA99
14.43b / 1.45w
300
#40D066
10.43b / 2.01w
400
#32A859
6.88b / 3.05w
500
#148540
4.46b / 4.71w
600
#016E3A
3.29b / 6.38w
700
#064826
1.96b / 10.7w
800
#012C17
1.37b / 15.28w
900
#001A0D
1.15b / 18.2w
yellow
0
#FFFAEC
20.14b / 1.04w
100
#F9F1C9
18.45b / 1.14w
200
#EDE78E
16.42b / 1.28w
300
#D4CD52
12.65b / 1.66w
400
#B0AA31
8.64b / 2.43w
500
#7E7F1B
4.94b / 4.25w
600
#636408
3.36b / 6.26w
700
#424006
1.97b / 10.67w
800
#2A2601
1.38b / 15.26w
900
#191700
1.16b / 18.04w
orange
0
#FFF5F1
19.58b / 1.07w
100
#FEDBCE
16.24b / 1.29w
200
#FFC4A4
13.68b / 1.53w
300
#F2995B
9.48b / 2.21w
400
#DF7A30
6.96b / 3.02w
500
#B45F19
4.59b / 4.57w
600
#904808
3.12b / 6.74w
700
#633203
1.99b / 10.56w
800
#442100
1.46b / 14.35w
900
#2D1100
1.19b / 17.62w
red
0
#FFF4F4
19.5b / 1.08w
100
#FDC2C4
13.69b / 1.53w
200
#FDB0B1
12.02b / 1.75w
300
#FA7370
7.75b / 2.71w
400
#E04542
5.1b / 4.12w
500
#C02C21
3.62b / 5.8w
600
#A41C1E
2.76b / 7.6w
700
#7B0A0C
1.89b / 11.11w
800
#570305
1.42b / 14.78w
900
#3A0102
1.19b / 17.72w
pink
0
#FFF3FF
19.52b / 1.08w
100
#FEDDFA
16.94b / 1.24w
200
#FDB1E7
12.62b / 1.66w
300
#F373C0
8.02b / 2.62w
400
#E54399
5.59b / 3.75w
500
#BE276D
3.7b / 5.67w
600
#A51750
2.84b / 7.4w
700
#740830
1.82b / 11.54w
800
#550220
1.42b / 14.83w
900
#3D0115
1.21b / 17.3w
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
#76AAEF
8.77b / 2.4w
Success
#40D066
10.43b / 2.01w
Warning
#D4CD52
12.65b / 1.66w
Danger
#FA7370
7.75b / 2.71w
White
#FFFFFF
21b / 1w
Light
#F8F8FA
19.8b / 1.06w
Gray
#E5E4E9
16.61b / 1.26w
Dark
#35343C
1.71b / 12.3w
Black
#000000
1b / 21w
Theme colors also have .*-{color}-light and .*-{color}-dark variations to support the different states.
Primary
Light
#9553F8
4.87b / 4.31w
Default
#680CE9
2.82b / 7.45w
Dark
#5900BE
2.17b / 9.68w
Secondary
Light
#440087
1.6b / 13.16w
Default
#1E0033
1.1b / 19.04w
Dark
#340060
1.31b / 15.97w
Info
Light
#A3D3FB
13.27b / 1.58w
Default
#76AAEF
8.77b / 2.4w
Dark
#4B7AD9
5.08b / 4.13w
Success
Light
#91EA99
14.43b / 1.45w
Default
#40D066
10.43b / 2.01w
Dark
#32A859
6.88b / 3.05w
Warning
Light
#EDE78E
16.42b / 1.28w
Default
#D4CD52
12.65b / 1.66w
Dark
#B0AA31
8.64b / 2.43w
Danger
Light
#FDB0B1
12.02b / 1.75w
Default
#FA7370
7.75b / 2.71w
Dark
#E04542
5.1b / 4.12w
Base colors
Blue
#76AAEF
8.77b / 2.4w
Teal
#3CCBC5
10.54b / 1.99w
Green
#40D066
10.43b / 2.01w
Yellow
#D4CD52
12.65b / 1.66w
Orange
#F2995B
9.48b / 2.21w
Red
#FA7370
7.75b / 2.71w
Pink
#F373C0
8.02b / 2.62w
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
#35343C
1.71b / 12.3w
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
On this Page
v1.13.5