Color
A look at our overall color approach — core palette, neutral palette, complementary palette, and more
Resources
Below are links to downloadable assets, guides, reference materials, and more. If you’re an external partner, you can download resources from the Brand Asset Library.
Color palette Figma library 
Core palette
Core palette
Square is a black-and-white brand first. We focus on black and white for timelessness, clarity, and accessibility.
Market Blue is used as an accent color for moments that warrant care between Square and the end user, such as action moments on public web.
Racer Yellow is used sparingly as an accent to draw attention to important elements and to add an energizing pop of color to help our content stand out in the market.
Our ideal color breakdown looks like this:
- 80% black and white
- 15% Market Blue
- 5% Racer Yellow
White
| RGB: | 255 255 255 |
| Hex: | #FFFFFF |
| CMYK: | 0 0 0 0 |
| PMS: | White |
Copy hex code
Black
| RGB: | 18 18 18 |
| Hex: | #121212 |
| CMYK: | 0 0 0 100 |
| PMS: | Black C |
Copy hex code
Market Blue
| RGB: | 0 106 255 |
| Hex: | #006AFF |
| CMYK: | 93 46 0 0 |
| PMS: | 2174 C |
Copy hex code
Racer Yellow
| RGB: | 237 255 128 |
| Hex: | #EDFF80 |
| CMYK: | 5 0 70 0 |
| PMS: | 3935 C |
Copy hex code
Core palette
Logo color guidance
Our logo can be used only in black or white to ensure brand consistency and legibility. The examples below demonstrate the approved uses and color combinations.
Do not use the Square logo in any color other than black or white. If you use it on a full-flood background, make sure the contrast passes accessibility.
Background
Core palette
Color accessibility
Contrast and legibility are measured with contrast ratios. Web content accessibility guidelines (WCAG 2.1) require a contrast ratio minimum AA. For AA the required contrast for text is 4.5. Headlines and large text need at least 3.
Color.review is a great resource to test your color-pairing accessibility quickly.
Core palette
Market Blue — correct usage
The following examples highlight a variety of proper uses of Market Blue.
Always use Market Blue for CTAs and text links.
Consistently use Market Blue as an accent to draw a user’s attention.
In the presence of a Market Blue CTA, it is acceptable to use Market Blue in abstract UI as an accent. If there’s a CTA in the abstract UI, change it to black or white in order not to compete with an actionable CTA.
Use Market Blue as a core color in illustrations. When using core gradients, the colors should always fade from Market Blue to Racer Yellow.
You can use Market Blue embedded within copy blocks to link out to supporting content.
Always use black type on a Racer Yellow background. Avoid using Market Blue type on top of Racer Yellow.
Neutral palette
Neutral palette
Our neutral palette is a system of five colors that range from dark to light gray. The palette provides accessibility, simplicity, and consistency throughout all brand communications.
Gray 80
| RGB: | 51 51 51 |
| Hex: | #333333 |
| CMYK: | 0 0 0 100 |
| PMS: | Process Black |
Copy hex code
Gray 55
| RGB: | 155 155 155 |
| Hex: | #737373 |
| CMYK: | 0 0 0 50 |
| PMS: | Cool Gray 7C |
Copy hex code
Gray 30
| RGB: | 179 179 179 |
| Hex: | #B3B3B3 |
| CMYK: | 0 0 0 35 |
| PMS: | Cool Gray 5C |
Copy hex code
Gray 15
| RGB: | 217 217 217 |
| Hex: | #D9D9D9 |
| CMYK: | 0 0 0 20 |
| PMS: | Cool Gray 3C |
Copy hex code
Gray 5
| RGB: | 242 242 242 |
| Hex: | #F2F2F2 |
| CMYK: | 0 0 0 10 |
| PMS: | Cool Gray 1C |
Copy hex code
Complementary palette
Complementary palette
We’re in the process of tweaking our brand color palettes and larger brand color system. More colors will be available in 2024. If you have questions in the meantime, reach out to #square-brand.
Complementary palette FAQ
Why are we shifting our color strategy?
We’re aligning our new colors with our brand positioning: to power businesses through every opportunity. We’re also taking years of feedback into consideration from our former complementary palette as we build toward what’s next.
What if I have ongoing templates or upcoming projects launching with the former complementary palette?
That’s okay for now. We know this can’t be an overnight shift as we move through this interim period. On new projects, please remove any use of former complementary colors.
Can I use additional colors from the illustration style guide in other marketing or creative projects?
No. At the moment additional colors in the illustration style guide are only for illustrations.
How will I know when new colors are available?
The Square brand team will launch comms in all channels when new colors become available.
Related Content
