Color
Primary colors
Charcoal and White provide a structured visual weight and are used in all branded materials. The remaining colors in the primary palette are used for accents and reinforcing elements, such as graphics and illustrations.
Proper color proportions are essential to maintaining GitLab’s look and feel. White should be the most used color, followed by Charcoal; this combination uplevels the maturity of our brand and is accentuated by the gradient. The oranges and purples of the palette should be used sparingly as subtle pops and accents. The cool gray scale should be used even less and applied to differentiate information and/or create a hierarchy.
Color swatches are denoted with a P (for primary palette), G (for gradients), or S (for secondary palette, which is reserved for illustration usage). Refer to the color usage section for more information on when to use digital vs. print colors.
Primary color palette
| Swatch | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | White |
Charcoal | #171321 | 23, 19, 33 | 90, 68, 41, 90 | 433 C / 4280 U |
Orange 01p | #FCA326 | 252, 161, 33 | 0, 40, 80, 5 | 143 C / 1365 U |
Orange 02p | #FC6D26 | 252, 109, 38 | 0, 60, 80, 5 | 716 C / 144 U |
Orange 03p | #E24329 | 226, 67, 41 | 0, 75, 80, 10 | 7417 C / 1665 U |
Purple 01p | #A989F5 | 169, 137, 245 | 53, 55, 0, 0 | 2655 C / 2645 CU |
Purple 02p | #7759C2 | 119, 89, 194 | 64, 70, 0, 0 | 2665 C / 2593 U |
Gray 01 | #D1D0D3 | 209, 208, 211 | 8, 5, 7, 16 | Cool Gray 3 C / Cool Gray 2 U |
Gray 02 | #A2A1A6 | 162, 161, 166 | 19, 12, 13, 34 | 422 C / 422 U |
Gray 03 | #74717A | 116, 113, 122 | 30, 20, 19, 58 | 424 C / 425 U |
Gray 04 | #45424D | 69, 66, 77 | 41, 28, 22, 70 | 7540 C / 419 U |
Gray 05 | #2B2838 | 43, 40, 56 | 94, 77, 53, 94 | 426 C / Black 6 U |
Gradients
Gradients should not be overused and should be leveraged as a key element to add additional interest, highlight, or depth. It can be used in more subtle ways, like minimal highlighting or adding shadows, or it can be used in large-scale ways when referring to the product as a whole.
To create the gradient, use the Adobe Illustrator free-form gradient tool found in the gradient panel. Smooth, natural blending is accomplished by using a graduated blend of color stops within a shape in an ordered or random sequence.
Apply the gradient using points. Use between 3-5 colors. To achieve softer colors, use the HSB palette and drop saturation of any brand color between 1-50%. The gradient sections can also be cropped to achieve a softer look.
Gradient color palette
| Swatch | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
Orange 01g | #FFD1BF | 255, 209, 191 | 0, 20, 21, 0 | 489 C / 489 U |
Purple 01g | #CEB3EF | 206, 179, 239 | 24, 29, 0, 0 | 2635 C / 2635 U |
Pink 01g | #FFB9C9 | 255, 185, 201 | 0, 33, 10, 0 | 1767 C / 1767 U |
Contrast and accessibility
Using color combinations that have sufficient contrast benefits everyone and preserves readability. A contrast ratio of 4.5:1 or higher is preferred for text and UI elements, but 3:1 can be used for larger text. Illustrations are an exception and will use a larger range of the palette, although even the key elements should be clearly defined.
Color combinations (foreground and background) shown here have sufficient contrast. Charcoal is the only color that should be used on gradients to ensure sufficient contrast over every part of the gradient.
Color accessibility enables people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts. For more information about color contrast in a digital context, view the WCAG Success Criterion 1.4.3 Contrast (Minimum) guidelines.
Color usage
Digital
Digital colors refer to colors that will be used for digital properties. For example, this webpage uses color defined by HEX codes. If you're working with any digital asset, you can input either the HEX or RGB color codes, as detailed in the primary palette. Some digital use cases include, digital ads, digital billboards, video and animation, Canva.
- HEX: HEX codes are based on the hexadecimal system in computing. HEX and RGB codes provide the same information, but in different formats. The HEX code includes a hashtag followed by six characters.
- Example:
#FC6D26
- Example:
- RGB: RGB is an acronym for Red, Green, and Blue. All digital colors are generated using percentages of these three colors. As mentioned, RGB is interchangeable with HEX.
- Example:
rgb(255, 255, 255)
- Example:
Print colors refer to colors that will be used for printed assets. Generally speaking, digital screens saturate colors more deeply than printed materials do, so print-specific colors codes are used to create more visual consistency between the two formats. Some print use cases include pop up banners, swag and merchandise, stickers, billboards, and trade show booths.
- CMYK: CMYK is an acronym for Cyan, Magenta, Yellow, and Key (black). If an asset is a 'full-color' print, then CMYK is used. CMYK is usually the default for general printing and can be found in personal and commercial printers alike.
- Example: C:90, M:68, Y:41, K:90
- PMS: PMS is an acronym for Pantone Matching System. Whereas CMYK colors are generated by ink values, PMS colors are pre-mixed, universal colors established by Pantone. This technique provides the most consistent color across materials. PMS is used for spot color prints (examples include embroidery and screen printing) and for more advanced print jobs to ensure quality and accuracy; vendors will usually specify when PMS is required. PMS colors have either a name or a code, which consists of a set of numbers followed by either a 'C' for coated or a 'U' for uncoated. Coated and uncoated refer to the paper; coated indicates gloss and uncoated refers to no coating/gloss (ie: matte paper).
- Example: 433 C / 4280 U
Last updated at: