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.
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
#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
#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
#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
#f5f7fb
Grayscale 100
#dbe2f0
Grayscale 200
#abb3c1
Grayscale 300
#696b71
Grayscale 400
#484b51
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.
#484b51
Grayscale 500
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.
Gradients
Our gradients provide visual interest to backgrounds or container shapes. Gradients should be used sparingly.
Gradient use
See PDF
Gradient misuse
See PDF
Accessibility
See PDF