Color

Matchbox uses colors to visually describe how things function in a UI. By giving meaning to colors, we create consistent visual patterns that help make interactions more predictable.


rgb(250, 100, 35), #fa6423
Brand Orange
rgb(55, 170, 220), #37aadc
Brand Blue
rgb(85, 85, 90), #55555a
Brand Gray

rgb(18, 115, 230), #1273e6

Primary ActionsBlue 700

Primary color for interactive elements and call to actions such as buttons and links. Used to indicate creation, progression or importance.
rgb(0, 96, 204), #0060cc

Primary Actions – AlternativeBlue 800

Alternative to the primary blue for use in high contrast situations.
rgb(0, 159, 106), #009f6a

SuccessGreen 700

Represents a positive or congratulatory tone.
rgb(6, 120, 82), #067852

Success – AlternativeGreen 800

Alternative to the primary green for use in high contrast situations.
rgb(217, 54, 62), #d9363e

DestructiveRed 700

Represents a negative or destructive tone.
rgb(255, 218, 0), #ffda00

WarningYellow 400

Represents a warning or cautionary tone.
rgb(255, 255, 255), #ffffff

Application BackgroundWhite

rgb(197, 206, 214), #c5ced6

Container BordersGray 400

rgb(57, 68, 77), #39444d

Body TextGray 900


Gray 1000
Gray 900
Gray 800
Gray 700
Gray 600
Gray 500
Gray 400
Gray 300
Gray 200
Gray 100
Hex
#2c353d
RGB
rgb(44, 53, 61)
HSL
hsl(208, 16%, 21%)
CSS
--color-gray-1000
JS
color_gray_1000
Scss
color(gray, 1000)
Blue 1000
Blue 900
Blue 800
Blue 700
Blue 600
Blue 500
Blue 400
Blue 300
Blue 200
Blue 100
Hex
#203752
RGB
rgb(32, 55, 82)
HSL
hsl(212, 44%, 22%)
CSS
--color-blue-1000
JS
color_blue_1000
Scss
color(blue, 1000)
Teal 1000
Teal 900
Teal 800
Teal 700
Teal 600
Teal 500
Teal 400
Teal 300
Teal 200
Teal 100
Hex
#223a3b
RGB
rgb(34, 58, 59)
HSL
hsl(182, 27%, 18%)
CSS
--color-teal-1000
JS
color_teal_1000
Scss
color(teal, 1000)
Green 1000
Green 900
Green 800
Green 700
Green 600
Green 500
Green 400
Green 300
Green 200
Green 100
Hex
#233b33
RGB
rgb(35, 59, 51)
HSL
hsl(160, 26%, 18%)
CSS
--color-green-1000
JS
color_green_1000
Scss
color(green, 1000)
Yellow 1000
Yellow 900
Yellow 800
Yellow 700
Yellow 600
Yellow 500
Yellow 400
Yellow 300
Yellow 200
Yellow 100
Hex
#3d3121
RGB
rgb(61, 49, 33)
HSL
hsl(34, 30%, 18%)
CSS
--color-yellow-1000
JS
color_yellow_1000
Scss
color(yellow, 1000)
Red 1000
Red 900
Red 800
Red 700
Red 600
Red 500
Red 400
Red 300
Red 200
Red 100
Hex
#5c2121
RGB
rgb(92, 33, 33)
HSL
hsl(0, 47%, 25%)
CSS
--color-red-1000
JS
color_red_1000
Scss
color(red, 1000)
Magenta 1000
Magenta 900
Magenta 800
Magenta 700
Magenta 600
Magenta 500
Magenta 400
Magenta 300
Magenta 200
Magenta 100
Hex
#522338
RGB
rgb(82, 35, 56)
HSL
hsl(333, 40%, 23%)
CSS
--color-magenta-1000
JS
color_magenta_1000
Scss
color(magenta, 1000)
Purple 1000
Purple 900
Purple 800
Purple 700
Purple 600
Purple 500
Purple 400
Purple 300
Purple 200
Purple 100
Hex
#352e4a
RGB
rgb(53, 46, 74)
HSL
hsl(255, 23%, 24%)
CSS
--color-purple-1000
JS
color_purple_1000
Scss
color(purple, 1000)
Brand Orange
Brand Gray
Brand Blue
Hex
#fa6423
RGB
rgb(250, 100, 35)
HSL
hsl(18, 96%, 56%)
CSS
--color-brand-orange
JS
color_brand_orange
Scss
color(brand, orange)

Use this contrast checker to find accessible text and background pairings. See 1.4.3 Minimum (AA) Requirements and 1.4.6 Enhanced (AAA) Requirements for details.

  • Contrast ratio must be at least 4.5 for normal text
  • Contrast ratio must be at least 3.0 for large text (18px, or Font Size 300)
1.68
1000
2.11
900
2.62
800
4.07
700
6.27
600
9.21
500
13.17
400
15.76
300
18.31
200
19.69
100
21.00
White
1.69
1000
2.22
900
2.90
800
4.55
700
6.78
600
8.98
500
12.56
400
15.10
300
18.35
200
19.25
100
1.66
1000
2.15
900
2.78
800
4.48
700
6.44
600
8.87
500
12.40
400
15.00
300
18.08
200
19.31
100
1.64
1000
2.05
900
3.04
800
4.29
700
6.04
600
8.66
500
12.61
400
15.19
300
18.14
200
19.53
100
1.73
1000
2.29
900
3.55
800
4.62
700
7.36
600
9.93
500
13.39
400
16.00
300
18.70
200
19.65
100
1.74
1000
2.23
900
3.03
800
5.44
700
9.15
600
13.40
500
15.92
400
17.92
300
19.32
200
20.01
100
1.74
1000
2.39
900
3.82
800
6.17
700
8.74
600
11.88
500
14.88
400
17.10
300
19.43
200
20.08
100
1.66
1000
2.07
900
2.60
800
4.13
700
6.72
600
10.25
500
15.28
400
16.84
300
18.86
200
19.95
100