Brand Colors

Built around the original Toast Orange, a trio of bright, bold brand colors work in balance to create a striking and vibrant palette. Mist Grey, along with pure white, provides an essential neutral canvas for impactful brand moments.

Toast Orange

RGB
CMYK
HEX
PMS

255 76 0
0 85 100 0
#FF4C00
1655C

Lake Blue

80 105 195
75 62 0 0
#5069C3
2125C

RGB
CMYK
HEX
PMS

Quince Yellow

255 183 0
0 32 100 0
#FFB700
7549C

RGB
CMYK
HEX
PMS

Mist Grey

247 247 247
2 2 2 0
#F7F7F7
--

RGB
CMYK
HEX
PMS

The Color System

Brand Expression

The overall expression for Toast should lean heavily on the primary color palette. The brand colors can be used in large color blocks and for illustrations to bring boldness and warmth to brand moments. Take care when differentiating the two variants of Lake Blue: the darker variant should be used as an action color for buttons, selection controls, and links, while the lighter variant should be used for graphics and illustrations.

Tints & Shades

Toast Orange
#FCE8E5
#FFA788
#FF4C00
#DD3B11
#C12700
Lake Blue
#e7eaf6
#9aa6db
#5069c3
#2b4fb9
#002182
Quince Yellow
#FEEDB4
#fed850
#FFB700
#ff9300
#F76600
Mist Grey
#F7F7F7
#F0F0F0
#E5E5E5
#C0C0C0
#7A7A7A
#666666
#C0C0C0
#474747
#252525

Semantic Colors

Text and action colors are chosen for their legibility. They are used to communicate the state of certain components, like action buttons, alerts, or icons. Use these colors when it’s necessary to visually distinguish informational contextual help from other content in Toast user interfaces. Use action colors for the different states of the primary action buttons.

Text Color

text-color-default
#252525
text-color-secondary
#666666
text-color-disabled
#C2C2C2
text-color-link
text-color-error
#D40023
text-color-success
#006400
Action Color
action-default
#2B4FB9
action-hover
#002182
action-disabled
#f0f0f0