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.

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#2e87e0
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#fca121
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#e67664
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#949494
$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 five different theme options for users to choose from that customize the appearance of the application header and navigation sidebar. These theme options make up four different color palettes:

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 & 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#949494
$t-gray-700#707070
$t-gray-800#4f4f4f
$t-gray-900#2e2e2e
$t-gray-950#1f1f1f

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

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