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
Passing level and contrast ratio
Text
AAA (21)
Text
F (1)
$gray-10 #fbfafd
Passing level and contrast ratio
Text
AAA (20.2)
Text
F (1)
$gray-50 #ececef
Passing level and contrast ratio
Text
AAA (17.8)
Text
F (1.2)
$gray-100 #dcdcde
Passing level and contrast ratio
Text
AAA (15.3)
Text
F (1.4)
$gray-200 #bfbfc3
Passing level and contrast ratio
Text
AAA (11.5)
Text
F (1.8)
$gray-300 #a4a3a8
Passing level and contrast ratio
Text
AAA (8.4)
Text
F (2.5)
$gray-400 #89888d
Passing level and contrast ratio
Text
AA (6)
Text
AA+ (3.5)
$gray-500 #737278
Passing level and contrast ratio
Text
AA+ (4.4)
Text
AA (4.8)
$gray-600 #626168
Passing level and contrast ratio
Text
AA+ (3.4)
Text
AA (6.1)
$gray-700 #535158
Passing level and contrast ratio
Text
F (2.7)
Text
AAA (7.8)
$gray-800 #434248
Passing level and contrast ratio
Text
F (2.1)
Text
AAA (9.9)
$gray-900 #333238
Passing level and contrast ratio
Text
F (1.7)
Text
AAA (12.7)
$gray-950 #1f1e24
Passing level and contrast ratio
Text
F (1.3)
Text
AAA (16.5)
$black #000000
Passing level and contrast ratio
Text
F (1)
Text
AAA (21)

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($gray-950, 0.02)
$t-gray-a-04 rgba($gray-950, 0.04)
$t-gray-a-06 rgba($gray-950, 0.06)
$t-gray-a-08 rgba($gray-950, 0.08)
$t-gray-a-16 rgba($gray-950, 0.16)
$t-gray-a-24 rgba($gray-950, 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

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

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

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.

Interactive states

Color changes can be used to emphasize user actions. When used, they must be combined with other visual feedback. For example, :focus color changes are normally accompanied with a focus ring.

Typical state changes (light UI):

  • :hover a color becomes one step darker than at rest.
  • :focus a color becomes one step darker than at rest, matching :hover color.
  • :active a color becomes two steps darker than at rest.
  • Where there aren't enough steps to follow this pattern, prioritize :hover and :focus becoming a step darker.
Example button state color changes
A primary confirm button example with a $blue-500 fill at rest (1), a $blue-600 fill for hover and focus (2, 3), and a $blue-700 fill when active (4). The color changes are combined with other visual feedback (cursor, focus ring) to communicate information about the interactive state.

Accessibility

Text presentation

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 - Defined as 14pt Bold (18.5px) or 18pt (24px) and must have a contrast ratio of at least 3:1.
  • 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 (#1f1e24) or darker, while the 500–950 steps all meet a 4.5:1 contrast ratio against $gray-10 (#fbfafd) or lighter.

Color should never be the only visual means of communicating information (WCAG 1.4.1).

Last updated at: