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.6)
Text
F (1.1)
$blue-100 #cbe2f9
Passing level and contrast ratio
Text
AAA (15.7)
Text
F (1.3)
$blue-200 #9dc7f1
Passing level and contrast ratio
Text
AAA (11.8)
Text
F (1.7)
$blue-300 #63a6e9
Passing level and contrast ratio
Text
AAA (8.1)
Text
F (2.5)
$blue-400 #428fdc
Passing level and contrast ratio
Text
AA (6.1)
Text
AA+ (3.3)
$blue-500 #1f75cb
Passing level and contrast ratio
Text
AA+ (4.4)
Text
AA (4.7)
$blue-600 #1068bf
Passing level and contrast ratio
Text
AA+ (3.7)
Text
AA (5.5)
$blue-700 #0b5cad
Passing level and contrast ratio
Text
AA+ (3.1)
Text
AA (6.6)
$blue-800 #064787
Passing level and contrast ratio
Text
F (2.2)
Text
AAA (9.3)
$blue-900 #033464
Passing level and contrast ratio
Text
F (1.6)
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.3)
$green-200 #91d4a8
Passing level and contrast ratio
Text
AAA (12.1)
Text
F (1.7)
$green-300 #52b87a
Passing level and contrast ratio
Text
AAA (8.5)
Text
F (2.4)
$green-400 #2da160
Passing level and contrast ratio
Text
AA (6.3)
Text
AA+ (3.2)
$green-500 #108548
Passing level and contrast ratio
Text
AA+ (4.4)
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.2)
Text
AAA (9.1)
$green-900 #0a4020
Passing level and contrast ratio
Text
F (1.7)
Text
AAA (11.8)
$green-950 #072b15
Passing level and contrast ratio
Text
F (1.3)
Text
AAA (15.3)

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.3)
Text
F (1.3)
$orange-200 #e9be74
Passing level and contrast ratio
Text
AAA (12)
Text
F (1.7)
$orange-300 #d99530
Passing level and contrast ratio
Text
AAA (8.2)
Text
F (2.5)
$orange-400 #c17d10
Passing level and contrast ratio
Text
AA (6.2)
Text
AA+ (3.3)
$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)
Text
AA (6.8)
$orange-800 #703800
Passing level and contrast ratio
Text
F (2.2)
Text
AAA (9.3)
$orange-900 #5c2900
Passing level and contrast ratio
Text
F (1.7)
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 (18.9)
Text
F (1.1)
$red-100 #fdd4cd
Passing level and contrast ratio
Text
AAA (15.4)
Text
F (1.3)
$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.5)
$red-400 #ec5941
Passing level and contrast ratio
Text
AA (6)
Text
AA+ (3.4)
$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.7)
$red-700 #ae1800
Passing level and contrast ratio
Text
F (2.9)
Text
AAA (7.1)
$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.3)
Text
AAA (15.4)

Purple

$purple-50 #f4f0ff
Passing level and contrast ratio
Text
AAA (18.75)
Text
F (1.11)
$purple-100 #e1d8f9
Passing level and contrast ratio
Text
AAA (15.39)
Text
F (1.36)
$purple-200 #cbbbf2
Passing level and contrast ratio
Text
AAA (11.92)
Text
F (1.76)
$purple-300 #ac93e6
Passing level and contrast ratio
Text
AAA (8.07)
Text
F (2.6)
$purple-400 #9475db
Passing level and contrast ratio
Text
AA (5.82)
Text
AA+ (3.6)
$purple-500 #7b58cf
Passing level and contrast ratio
Text
AA+ (4.13)
Text
AA (5.07)
$purple-600 #694cc0
Passing level and contrast ratio
Text
AA+ (3.39)
Text
AA (6.18)
$purple-700 #5943b6
Passing level and contrast ratio
Text
F (2.9)
Text
AAA (7.23)
$purple-800 #453894
Passing level and contrast ratio
Text
F (2.24)
Text
AAA (9.34)
$purple-900 #2f2a6b
Passing level and contrast ratio
Text
F (1.66)
Text
AAA (12.61)
$purple-950 #232150
Passing level and contrast ratio
Text
F (1.4)
Text
AAA (14.94)

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 #fafafa
$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: