Color

Chromatic palette

We have four primary chromatic colors and their derivatives, totaling 44 colors 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 four primary colors:

  • 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-required.' It communicates: warning, pending, missing, or impeded progress.
  • Red indicates a problem. It communicates: critical states, destructive actions, errors, fails, removals, or declines.

Color priorities

Color priorities work similarly to font weights; different font weights can be used to create contrasting typography that communicates hierarchy. We apply this same logic to colors by tagging colors according to their priority: from 1 to 4. These priorities can be used to make better choices. When choosing how to apply color to a UI component:

  • Priority 1 is equal to the color weight 500.
  • Priority 2 is equal to the color weights 300 and 700.
  • Priority 3 is equal to the color weights 100 and 900.

Priorities skip weights because, in most situations, the contrast between two adjoining weights would be subtle. However, those shades are available to use when needed. Color priorities are meant to act as a guideline, not a strict set of rules.

Accessibility

At GitLab, we are dedicated to continually improving the accessibility of the application. Currently, all chromatic colors pass the Web Content Accessibility Guidelines (WCAG) AA level for large text when used as a background color. Learn more in Accessibility.

Green

$green-50#f1fdf6
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$green-100#dcf5e7
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$green-200#b3e6c8
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$green-300#75d09b
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$green-400#37b96d
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$green-500#1aaa55
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$green-600#168f48
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$green-700#12753a
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$green-800#0e5a2d
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$green-900#0a4020
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$green-950#072b15
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass

Blue

$blue-50#f6fafe
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$blue-100#e4f0fb
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$blue-200#b8d6f4
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$blue-300#73afea
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$blue-400#418cd8
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$blue-500#1f78d1
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Pass
AA
Pass
$blue-600#1b69b6
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$blue-700#17599c
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$blue-800#134a81
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$blue-900#0f3b66
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$blue-950#0a2744
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass

Orange

$orange-50#fffaf4
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-100#fff1de
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-200#fed69f
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-300#fdbc60
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-400#fca429
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-500#fc9403
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-600#de7e00
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$orange-700#c26700
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$orange-800#a35200
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$orange-900#853c00
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$orange-950#592800
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass

Red

$red-50#fef6f5
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$red-100#fbe5e1
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$red-200#f2b4a9
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$red-300#ea8271
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$red-400#e05842
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$red-500#db3b21
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Pass
AA
Pass
$red-600#c0341d
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$red-700#a62d19
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$red-800#8b2615
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$red-900#711e11
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$red-950#4b140b
WCAG Normal Normal
AA
Fail
AA
Pass
WCAG Normal Normal
AA
Fail
AA
Pass

Neutral palette

Our neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.

$white#ffffff
$gray-50#fafafa
$gray-100#f2f2f2
$gray-200#dfdfdf
$gray-300#cccccc
$gray-400#bababa
$gray-500#a7a7a7
$gray-600#919191
$gray-700#707070
$gray-800#4f4f4f
$gray-900#2e2e2e
$gray-950#1f1f1f
$black#000000

Transparencies

Transparencies are used only to indicate hover and active states within themes. Each theme has its own series of four transparencies to utilize with alpha levels ranging from 0.02 to 0.08.

$t-gray-a-02rgba($black, 0.02)
$t-gray-a-04rgba($black, 0.04)
$t-gray-a-06rgba($black, 0.06)
$t-gray-a-08rgba($black, 0.08)

Themes

There are ten different theme options that users can choose to customize the appearance of the application header and navigation sidebar. Each theme draws inspiration from one of our primary chromatic colors, the neutral palette, or the corporate indigo color. For each of these colors, there is a dark and a light theme, which result in the following palettes:

Dark & Light Indigo

$t-indigo-50#f7f7ff
$t-indigo-100#ebebfa
$t-indigo-200#d1d1f0
$t-indigo-300#a6a6de
$t-indigo-400#7c7ccc
$t-indigo-500#6666c4
$t-indigo-600#5b5bbd
$t-indigo-700#4b4ba3
$t-indigo-800#393982
$t-indigo-900#292961
$t-indigo-950#1a1a40

Dark Blue

$t-blue-50#f4f8fc
$t-blue-100#e6edf5
$t-blue-200#c8d7e6
$t-blue-300#97b3cf
$t-blue-400#648cb4
$t-blue-500#4a79a8
$t-blue-600#3e6fa0
$t-blue-700#305c88
$t-blue-800#25496e
$t-blue-900#1a3652
$t-blue-950#0f2235

Light Blue

$t-light-blue-50#f2faf6
$t-light-blue-100#e4f3ea
$t-light-blue-200#c0dfcd
$t-light-blue-300#8ac2a1
$t-light-blue-400#52a274
$t-light-blue-500#35935c
$t-light-blue-600#288a50
$t-light-blue-700#1c7441
$t-light-blue-800#25496e
$t-light-blue-900#1a3652
$t-light-blue-950#0f2235

Dark & Light Green

$t-green-50#f2faf6
$t-green-100#e4f3ea
$t-green-200#c0dfcd
$t-green-300#8ac2a1
$t-green-400#52a274
$t-green-500#35935c
$t-green-600#288a50
$t-green-700#1c7441
$t-green-800#145d33
$t-green-900#0d4524
$t-green-950#072d16

Dark Red

$t-red-50#fcf4f2
$t-red-100#fae9e6
$t-red-200#ebcac5
$t-red-300#d99b91
$t-red-400#b0655a
$t-red-500#ad4a3b
$t-red-600#9e4133
$t-red-700#912f20
$t-red-800#78291d
$t-red-900#691a16
$t-red-950#36140f

Light Red

$t-light-red-50#fff6f5
$t-light-red-100#fae2de
$t-light-red-200#f7d5d0
$t-light-red-300#d9796a
$t-light-red-400#cf604e
$t-light-red-500#c24b38
$t-light-red-600#b03927
$t-light-red-700#a62e21
$t-light-red-800#78291d
$t-light-red-900#691a16
$t-light-red-950#36140f

Dark & Light

$t-gray-50#fafafa
$t-gray-100#f2f2f2
$t-gray-200$dfdfdf
$t-gray-300#cccccc
$t-gray-400#bababa
$t-gray-500#a7a7a7
$t-gray-600#919191
$t-gray-700#707070
$t-gray-800#4f4f4f
$t-gray-900#2e2e2e
$t-gray-950#1f1f1f