Chromatic paletteNOTE: 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.
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.
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.
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
- Green and light green share the same
- Dark and light share the same
Indigo / Light indigo
Green / Light green
Dark / Light
The dark and light (gray) themes use the neutral palette.
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
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 (
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
#fafafa) or lighter.
Use colors at least two steps apart to ensure distinguishable contrast for states and border/fill combinations.
Last updated at: