Colors
The color combinations we use have been carefully picked to maintain contrast and readability for all types of people.
Meaning and Consistency
Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand’s experiences, from product interfaces to marketing.
You can apply color to: convey emotion; express a tone; guide attention; and pinpoint critical items.
Below you will find a set of well-defined guidelines on how to work with our colors.
Core Colors
Our primary color palette is designed for use throughout our digital products within interfaces and for branding. Primary colors are displayed most frequently across our products' screens and components.
Primary colors are used for: key actions such as primary call to action buttons; highlighted content; and form field elements.
We chose colors that offer a range of uses and that meet or exceed standards in supporting accessibility and contrast for low vision users.
The guidelines indicate how colors should be applied, noting where some should be utilized sparingly and with purpose for specific components like errors or messaging.
Grays
gray-20#333333
gray-40#5F5F5F
gray-50#707070
gray-60#909090
gray-80#CCCCCC
gray-90#D9D9D9
gray-95#EEEEEE
gray-98#FAFAFA
Blues
blue-30#004C8A
blue-40#005DAB
blue-50#0074CC
blue-95#EFF7FB
Greens
green-30#0B6E22
green-40#008000
green-80#85C66A
green-95#DFF0D8
Yellows
yellow-85#FFCC00
yellow-95#FFF8D2
Reds
red-30#952928
red-40#C13533
red-90#FDD6D6
Purples
purple-40#800080
Oranges
orange-50#CA4D00
Brand
costco-red#E51937
costco-blue#005DAB
Semantics
success (green-40)#008000
error (red-40)#D32029
caution (orange-50)#CA4D00
Base
white#FFFFFF
black#000000
Text-Web
default (gray-20)#333333
medium (gray-40)#5F5F5F
light (gray-50)#707070
link (blue-40)#005DAB
link visited (purple-40)#800080
success (green-40)#008000
error (red-40)#C13533
caution (orange-50)#CA4D00
white#FFFFFF