Square color palette
FinanceSquare's color identity is defined by a modern, neutral palette centered on deep charcoal and grayscale tones, reflecting trust and simplicity in financial technology. The palette is minimal, with subtle blue accents for interactive elements.
squareup.comSquare colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Square CharcoalPrimary62, 67, 72
- Square SlateSecondary88, 96, 107
- Square BlueAccent0, 112, 224
Surfaces
Page, cards and dividers.- Square WhiteBackground255, 255, 255
- Square Light GraySurface246, 247, 248
- Square Border GrayBorder224, 226, 230
Text
Three tiers of copy.- Square BlackText26, 26, 26
- Square SlateSecondary text88, 96, 107
- Square Muted GrayMuted text138, 148, 166
Semantic
Feedback and state colors.- Square GreenSuccess0, 178, 111
- Square YellowWarning255, 184, 0
- Square RedError229, 69, 69
- Square BlueInfo0, 112, 224
Use Square's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
square-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0070E0;
--error: #E54545;
--accent: #0070E0;
--border: #E0E2E6;
--primary: #3E4348;
--success: #00B26F;
--surface: #F6F7F8;
--warning: #FFB800;
--secondary: #58606B;
--text-muted: #8A94A6;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #58606B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
Square gray and neutral colors
The quiet part of the Square palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Square WhiteBackground
- HEX
- RGB
- HSL
- Square Light GraySurface
- HEX
- RGB
- HSL
- Square Border GrayBorder
- HEX
- RGB
- HSL
- Square BlackText
- HEX
- RGB
- HSL
- Square SlateSecondary text
- HEX
- RGB
- HSL
- Square Muted GrayMuted text
- HEX
- RGB
- HSL
About Square's colors
Square’s palette uses neutral grays and deep charcoals to convey professionalism and clarity, with blue for actionable elements. The minimal use of color emphasizes usability and trust.
Primary and secondary grays create a calm, neutral UI.
Accent blue is reserved for links and key actions.
Success, warning, and error colors provide clear semantic feedback.
Psychology
The charcoal and gray tones evoke reliability, stability, and neutrality, important for a financial brand. Blue accents reinforce trust and guide user attention to interactive elements.
Evolution
Square’s palette has remained consistent, with only minor adjustments to gray tones and accent blue for accessibility. The brand has always prioritized a clean, minimal aesthetic.
Where Square uses each color
- Primary
Used for navigation bars, logos, and primary buttons.
- Secondary
Appears in secondary buttons, icons, and UI elements.
- Accent
Used for links, call-to-action buttons, and highlights.
- Backgrounds
White is the main background for app screens and web pages.
- Text
Black and slate grays are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, and red are used for status messages, notifications, and alerts.
Square color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Square primary color hex code is #3E4348. This deep charcoal is used for navigation and branding.
The RGB values for #3E4348 are (62, 67, 72). The approximate CMYK values are (14, 7, 0, 72).
Square uses a range of grays: #58606B (Slate), #F6F7F8 (Light Gray), #E0E2E6 (Border Gray), and #8A94A6 (Muted Gray). These provide structure and hierarchy in the UI.
Use Square Charcoal (#3E4348) for primary elements, blue (#0070E0) for interactive accents, and the official grays for backgrounds, borders, and text. Semantic colors are reserved for status and feedback messaging.
The secondary color is Square Slate, #58606B, and the accent is Square Blue, #0070E0. Together with the primary they make up the three brand colors at the top of this page.
5 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Square's colors consistently when it generates UI.
Make something in the spirit of Square
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.