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 Blue
#00cbec
Sourcegraph 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 Lemon 200
#ffdb45 Lemon 300
#ffc247 Lemon 400
#ff9933 Lemon 500
#ffdfdc Vermillion 100
#ffc9c9 Vermillion 200
#ff5543 Vermillion 300
Primary logo color
#ed2e20 Vermillion 400
#c22626 Vermillion 500
#ffdff5 Cerise 100
#ffd1f2 Cerise 200
#e1449a Cerise 300
#d62687 Cerise 400
#c4147d Cerise 500
#9e1769 Cerise 600
#eedfff Violet 100
#e8d1ff Violet 200
#ce9cff Violet 300
#a112ff Violet 400
Primary logo color
#820dde Violet 500
#6112a3 Violet 600
#dbdbff Blurple 100
#bfbfff Blurple 200
#6b59ed Blurple 300
#5033E1 Blurple 400
#3826cc Blurple 500
#dcfefe Blue 100
#c7ffff Blue 200
#00cbec Blue 300
Primary logo color
#00a1c7 Blue 400
#005482 Blue 500
#d2fff1 Green 100
#c4ffe8 Green 200
#8fedcf Green 300
#17ab52 Green 400
#1f7d45 Green 500
#ffffff White
#f9fafb Grayscale 50
#f1f1f1 Grayscale 100
#e7e7e7 Grayscale 200
#c4c4c4 Grayscale 300
#8a8a8a Grayscale 400
#4d4d4d Grayscale 500
#313131 Grayscale 600
#000000 Black

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.

#f9fafb
Grayscale 50
Sourcegraph Dark Gray

Our dark gray can add tonality and depth to typographical layouts.

#4d4d4d
Grayscale 500
Sourcegraph Black

Our black is a true black to provide maximum contrast.

#000000
Black
Sourcegraph Blurple

Use for button and CTA messages in website UI.

#5033e1
Blurple 400
Sourcegraph Action Green

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

#17ab52
Green 400
Sourcegraph Alert Red

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

#ed2e20
Vermillion 400

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, Dark Gray, and Blurple from our secondary palette. Violet can be used for icons.

SG Blurple

Blurple is used for button elements and CTA text.

SG Action Green

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

SG 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

Blue 300
#00cbec
Blurple 400
#5033e1

Infrared

Violet 400
#a112ff
Vermillion 300
#ff5543

Aurora

Blue 300
#00cbec
Violet 400
#a112ff

Mars

Vermillion 200
#ffc9c9
Violet 100
#e8d1ff

Saturn

Violet 100
#e8d1ff
Blue 200
#c7ffff

Venus

Blue 200
#c7ffff
Green 200
#c4ffe8

Gradient use

See PDF

Gradient misuse

See PDF

Accessibility

See PDF