Color

Color palette

Primary colors

Our colors express our commitment to being a welcoming, vibrant, and accessible brand. The palette is simple and flexible allowing for application across business segments while maintaining unity.

Sourcegraph Sky Blue
#00cbec
Sourcegraph Vivid Violet
#a112ff
Sourcegraph Vermillion
#ff5543

Secondary colors

Use supporting colors for graphic elements, illustrations, callouts, website UI elements, and more.

Primary logo colors have been marked. The secondary colors, along with shades and tints, were chosen to support and compliment these three core colors.

#fff2cf
#ffdb45 Lemon
#ffc247
#ff9933
#ffc9c9
#ff5543 Vermillion
Primary logo color
#ed2e20
#c22626
#ffd1f2
#d62687 Cerise
#c4147d
#9e1769
#e8d1ff
#a112ff Vivid Violet
Primary logo color
#820dde
#6112a3
#bfbfff
#6b59ed Plum
#5033E1 Blurple
#3826cc
#c7ffff
#00cbec Sky Blue
Primary logo color
#00a1c7
#005482
#c4ffe8
#8fedcf Mint
#17ab52
#1f7d45

Colors for website UI

Use supporting colors for added tonality and awareness within website UI.

Sourcegraph Light Gray

Our light gray can add tonality to and create space within layouts.

#f4f7fb
Sourcegraph Dark Gray

Our dark gray can add tonality and depth to layouts.

#6c757d
Sourcegraph Space Black

Our black is a true black to provide maximum contrast.

#000000
Sourcegraph Blurple

Use for button and CTA messages in website UI.

#5033e1
Sourcegraph Action Green

Use for check marks and to signal positive messages in website UI.

#17ab52
Sourcegraph Alert Red

Use for alerts and to signal error messages in website UI.

#ed2e20

Color use

When creating a layout, the logo should be the primary object that informs the rest of the layout. Once the logo is placed, add appropriate colors keeping in mind that our vibrant colors can quickly become visually overwhelming.

Color use for website UI

When applying color to website UI elements use Sourcegraph Red, Green, and Blurple from our secondary palette. Dark gray can be used for text and icons.

Sourcegraph Blurple

Blurple is used for button elements and CTA text.

Sourcegraph Action Green

Green is used for check mark elements and to signal positive messages.

Sourcegraph Alert Red

Red is used to signal serious alerts and error warnings.

Color misuse

Color should be used consistently to communicate a cohesive system.
Do not alter existing colors or add new colors to the palette. Use color to your advantage—and not to the detriment of a design.

Do not add new colors to the brand palette.
Do not use too many colors in a design.
Do not set text in a color that does not meet ADA requirements.
Do not use Sourcegraph primary blue, or any other brand colors that don’t meet ADA compliance for text or UI elements.
Do not saturate a design with color.
Do not set the logo on a color or gradient that does not have sufficient contrast.

Gradients

Our gradients provide visual interest to backgrounds or container shapes. Gradients should be used sparingly.

Aquamarine

Sourcegraph Sky Blue
#00cbec
Sourcegraph Blurple
#5033e1

Infrared

Sourcegraph Vivid Violet
#a112ff
Sourcegraph Vermilion
#ff5543

Aurora

Sourcegraph Sky Blue
#00cbec
Sourcegraph Vivid Violet
#a112ff

Mars

Sourcegraph Red Mist
#ffc9c9
Sourcegraph Violet Mist
#e8d1ff

Saturn

Sourcegraph Violet Mist
#e8d1ff
Sourcegraph Blue Mist
#c7ffff

Venus

Sourcegraph Sky Blue
#c7ffff
Sourcegraph Vivid Violet
#c4ffe8

Gradient use

See PDF

Gradient misuse

See PDF

Accessibility

See PDF