Color

Chromatic palette

NOTE: View the Data visualization > Color section for details about the data visualization palette.

We have five primary chromatic hues and their color steps, totaling 55 color variables for use across the application. These colors give flexibility during the design process, while also providing a harmonious palette that looks consistent and in-line with our brand styles.

Though deciding which color to use depends on the situation, here are some general guidelines for using the chromatic palette hues:

Blue indicates a current or active state. It communicates management, progress, connectivity, or organization.
Green indicates success. It communicates save, create, add, available, done, approved, or resolved.
Orange indicates attention is required. It communicates warning, pending, missing, or impeded progress.
Red indicates a problem. It communicates a critical state, destructive action, error, failure, removal, stop, or decline.
Purple is not assigned meaning in the same way the other chromatic hues are, and instead is associated with the GitLab brand. It communicates an affinity with the brand, and is used for things like illustrations or company-related announcements in the product.

Blue

$blue-50 #e9f3fc

Passing level and contrast ratio

Text

AAA (18.7)

Text

F (1.1)

$blue-100 #cbe2f9

Passing level and contrast ratio

Text

AAA (15.8)

Text

F (1.3)

$blue-200 #9dc7f1

Passing level and contrast ratio

Text

AAA (11.9)

Text

F (1.8)

$blue-300 #63a6e9

Passing level and contrast ratio

Text

AAA (8.2)

Text

F (2.6)

$blue-400 #428fdc

Passing level and contrast ratio

Text

AA (6.2)

Text

AA+ (3.4)

$blue-500 #1f75cb

Passing level and contrast ratio

Text

AA+ (4.5)

Text

AA (4.7)

$blue-600 #1068bf

Passing level and contrast ratio

Text

AA+ (3.8)

Text

AA (5.6)

$blue-700 #0b5cad

Passing level and contrast ratio

Text

AA+ (3.1)

Text

AA (6.7)

$blue-800 #064787

Passing level and contrast ratio

Text

F (2.3)

Text

AAA (9.3)

$blue-900 #033464

Passing level and contrast ratio

Text

F (1.7)

Text

AAA (12.5)

$blue-950 #002850

Passing level and contrast ratio

Text

F (1.4)

Text

AAA (14.8)

Green

$green-50 #ecf4ee

Passing level and contrast ratio

Text

AAA (18.7)

Text

F (1.1)

$green-100 #c3e6cd

Passing level and contrast ratio

Text

AAA (15.5)

Text

F (1.4)

$green-200 #91d4a8

Passing level and contrast ratio

Text

AAA (12.2)

Text

F (1.7)

$green-300 #52b87a

Passing level and contrast ratio

Text

AAA (8.5)

Text

F (2.5)

$green-400 #2da160

Passing level and contrast ratio

Text

AA (6.4)

Text

AA+ (3.3)

$green-500 #108548

Passing level and contrast ratio

Text

AA+ (4.5)

Text

AA (4.7)

$green-600 #217645

Passing level and contrast ratio

Text

AA+ (3.7)

Text

AA (5.6)

$green-700 #24663b

Passing level and contrast ratio

Text

AA+ (3)

Text

AA (6.9)

$green-800 #0d532a

Passing level and contrast ratio

Text

F (2.3)

Text

AAA (9.2)

$green-900 #0a4020

Passing level and contrast ratio

Text

F (1.8)

Text

AAA (11.9)

$green-950 #072b15

Passing level and contrast ratio

Text

F (1.4)

Text

AAA (15.4)

Orange

$orange-50 #fdf1dd

Passing level and contrast ratio

Text

AAA (18.8)

Text

F (1.1)

$orange-100 #f5d9a8

Passing level and contrast ratio

Text

AAA (15.4)

Text

F (1.4)

$orange-200 #e9be74

Passing level and contrast ratio

Text

AAA (12.1)

Text

F (1.7)

$orange-300 #d99530

Passing level and contrast ratio

Text

AAA (8.3)

Text

F (2.5)

$orange-400 #c17d10

Passing level and contrast ratio

Text

AA (6.2)

Text

AA+ (3.4)

$orange-500 #ab6100

Passing level and contrast ratio

Text

AA+ (4.4)

Text

AA (4.7)

$orange-600 #9e5400

Passing level and contrast ratio

Text

AA+ (3.7)

Text

AA (5.6)

$orange-700 #8f4700

Passing level and contrast ratio

Text

AA+ (3.1)

Text

AA (6.8)

$orange-800 #703800

Passing level and contrast ratio

Text

F (2.3)

Text

AAA (9.3)

$orange-900 #5c2900

Passing level and contrast ratio

Text

F (1.8)

Text

AAA (11.8)

$orange-950 #421f00

Passing level and contrast ratio

Text

F (1.4)

Text

AAA (14.7)

Red

$red-50 #fcf1ef

Passing level and contrast ratio

Text

AAA (19)

Text

F (1.1)

$red-100 #fdd4cd

Passing level and contrast ratio

Text

AAA (15.5)

Text

F (1.4)

$red-200 #fcb5aa

Passing level and contrast ratio

Text

AAA (12.3)

Text

F (1.7)

$red-300 #f57f6c

Passing level and contrast ratio

Text

AAA (8.1)

Text

F (2.6)

$red-400 #ec5941

Passing level and contrast ratio

Text

AA (6.1)

Text

AA+ (3.5)

$red-500 #dd2b0e

Passing level and contrast ratio

Text

AA+ (4.4)

Text

AA (4.7)

$red-600 #c91c00

Passing level and contrast ratio

Text

AA+ (3.6)

Text

AA (5.8)

$red-700 #ae1800

Passing level and contrast ratio

Text

F (2.9)

Text

AAA (7.2)

$red-800 #8d1300

Passing level and contrast ratio

Text

F (2.2)

Text

AAA (9.4)

$red-900 #660e00

Passing level and contrast ratio

Text

F (1.6)

Text

AAA (12.9)

$red-950 #4d0a00

Passing level and contrast ratio

Text

F (1.4)

Text

AAA (15.5)

Purple

$purple-50 #f4f0ff

Passing level and contrast ratio

Text

AAA (18.8)

Text

F (1.1)

$purple-100 #e1d8f9

Passing level and contrast ratio

Text

AAA (15.4)

Text

F (1.4)

$purple-200 #cbbbf2

Passing level and contrast ratio

Text

AAA (11.9)

Text

F (1.8)

$purple-300 #ac93e6

Passing level and contrast ratio

Text

AAA (8.1)

Text

F (2.6)

$purple-400 #9475db

Passing level and contrast ratio

Text

AA (5.8)

Text

AA+ (3.6)

$purple-500 #7b58cf

Passing level and contrast ratio

Text

AA+ (4.1)

Text

AA (5.1)

$purple-600 #694cc0

Passing level and contrast ratio

Text

AA+ (3.4)

Text

AA (6.2)

$purple-700 #5943b6

Passing level and contrast ratio

Text

F (2.9)

Text

AAA (7.2)

$purple-800 #453894

Passing level and contrast ratio

Text

F (2.2)

Text

AAA (9.3)

$purple-900 #2f2a6b

Passing level and contrast ratio

Text

F (1.7)

Text

AAA (12.6)

$purple-950 #232150

Passing level and contrast ratio

Text

F (1.4)

Text

AAA (14.9)

Neutral palette

The neutral palette is primarily used within components to help differentiate hierarchy. Use shades of gray as backgrounds, borders, and shadows to emphasize areas or set them apart.

$white #ffffff

$gray-10 #f5f5f5

$gray-50 #f0f0f0

$gray-100 #dbdbdb

$gray-200 #bfbfbf

$gray-300 #999999

$gray-400 #868686

$gray-500 #666666

$gray-600 #5e5e5e

$gray-700 #525252

$gray-800 #404040

$gray-900 #303030

$gray-950 #1f1f1f

$black #000000

Transparency

Transparency is used only to indicate hover and active states within themes. Each theme has a series of four transparencies to utilize alpha levels ranging from 0.02 to 0.08.

$t-gray-a-02 rgba($black, 0.02)

$t-gray-a-04 rgba($black, 0.04)

$t-gray-a-06 rgba($black, 0.06)

$t-gray-a-08 rgba($black, 0.08)

$t-gray-a-24 rgba($black, 0.24)

Themes

A user may choose between ten different themes to customize the appearance of the application header and navigation sidebar in GitLab. Each theme draws inspiration from one of the primary chromatic colors, the neutral palette, or the corporate indigo color.

Indigo and light indigo share the same $t-indigo- variables.
Green and light green share the same $t-green- variables.
Dark and light share the same $t-gray- variables.

Indigo / Light indigo

$t-indigo-50 #f1f1ff

$t-indigo-100 #dbdbf8

$t-indigo-200 #c7c7f2

$t-indigo-300 #a2a2e6

$t-indigo-400 #8181d7

$t-indigo-500 #6666c4

$t-indigo-600 #5252b5

$t-indigo-700 #41419f

$t-indigo-800 #303083

$t-indigo-900 #222261

$t-indigo-950 #14143d

Blue

$t-blue-50 #cdd8e3

$t-blue-100 #b9cadc

$t-blue-200 #a6bdd5

$t-blue-300 #81a5c9

$t-blue-400 #628eb9

$t-blue-500 #4977a5

$t-blue-600 #346596

$t-blue-700 #235180

$t-blue-800 #153c63

$t-blue-900 #0b2640

$t-blue-950 #04101c

Light blue

$t-light-blue-50 #dde6ee

$t-light-blue-100 #c1d4e6

$t-light-blue-200 #a0bedc

$t-light-blue-300 #74a3d3

$t-light-blue-400 #4f8bc7

$t-light-blue-500 #3476b9

$t-light-blue-600 #2268ae

$t-light-blue-700 #145aa1

$t-light-blue-800 #0e4d8d

$t-light-blue-900 #0c4277

$t-light-blue-950 #0a3764

Green / Light green

$t-green-50 #dde9de

$t-green-100 #b1d6b5

$t-green-200 #8cc497

$t-green-300 #69af7d

$t-green-400 #499767

$t-green-500 #308258

$t-green-600 #25744c

$t-green-700 #1b653f

$t-green-800 #155635

$t-green-900 #0e4328

$t-green-950 #052e19

Red

$t-red-50 #f4e9e7

$t-red-100 #ecd3d0

$t-red-200 #e3bab5

$t-red-300 #d59086

$t-red-400 #c66e60

$t-red-500 #ad4a3b

$t-red-600 #a13322

$t-red-700 #8f2110

$t-red-800 #761405

$t-red-900 #580d02

$t-red-950 #380700

Light red

$t-light-red-50 #faf2f1

$t-light-red-100 #f6d9d5

$t-light-red-200 #ebada2

$t-light-red-300 #e07f6f

$t-light-red-400 #d36250

$t-light-red-500 #c24b38

$t-light-red-600 #b53a26

$t-light-red-700 #a02e1c

$t-light-red-800 #8b2212

$t-light-red-900 #751709

$t-light-red-950 #5c1105

Dark / Light

The dark and light (gray) themes use the neutral palette.

Accessibility

At GitLab, we are dedicated to continually improving the accessibility of the application. Pajamas satisfies the Web Content Accessibility Guidelines (WCAG) AA level for normal text. Learn more in Accessibility.

Normal text must have a contrast ratio of at least 4.5:1.
Large text is defined as 14pt Bold (18.5px) or 18pt (24px) and must have a contrast ratio of at least 3:1.

Passing level and contrast ratio

AAA - Pass 7:1+
AA - Pass 4.5:1+
AA+ - Pass, large text only 3:1+
F - Doesn’t pass

Contrast ratios for each color step are calculated using white (#fff) and black (#000). The 50–400 steps all meet a 4.5:1 contrast ratio or higher against $gray-950 (#1f1f1f) or darker, while the 500–950 steps all meet a 4.5:1 contrast ratio against $gray-10 (#fafafa) or lighter.

Use colors at least two steps apart to ensure distinguishable contrast for states and border/fill combinations.

Last updated at: Wednesday, August 3, 2022 at 9:46 PM