Squarespace color palette
TechSquarespace's color identity is defined by a minimalist, monochromatic palette centered on black and a range of neutral grays, reflecting its focus on clean, modern design. The palette is consistent across its website and digital products.
squarespace.comSquarespace colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Squarespace BlackPrimary0, 0, 0
- Deep CharcoalSecondary34, 34, 34
- Pure WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Soft Light GrayBackground247, 247, 247
- Ultra Light GraySurface250, 250, 250
- Neutral Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Primary Text GrayText26, 26, 26
- Secondary Text GraySecondary text102, 102, 102
- Muted Text GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Squarespace GreenSuccess0, 135, 96
- Squarespace GoldWarning230, 184, 0
- Squarespace RedError215, 38, 61
- Squarespace BlueInfo0, 102, 204
Use Squarespace's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
squarespace-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0066CC;
--error: #D7263D;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #000000;
--success: #008760;
--surface: #FAFAFA;
--warning: #E6B800;
--secondary: #222222;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #1A1A1A;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.2:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Squarespace gray and neutral colors
The quiet part of the Squarespace palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Soft Light GrayBackground
- HEX
- RGB
- HSL
- Ultra Light GraySurface
- HEX
- RGB
- HSL
- Neutral Border GrayBorder
- HEX
- RGB
- HSL
- Primary Text GrayText
- HEX
- RGB
- HSL
- Secondary Text GraySecondary text
- HEX
- RGB
- HSL
- Muted Text GrayMuted text
- HEX
- RGB
- HSL
About Squarespace's colors
Squarespace employs a monochromatic color system dominated by black, white, and nuanced grays to create a neutral, content-focused environment. Accent colors are reserved for semantic feedback and calls to action.
Primary black anchors the visual hierarchy.
Grays provide structure and depth.
Accent colors are used sparingly for clarity and emphasis.
Psychology
The black and gray palette conveys professionalism, sophistication, and clarity, aligning with Squarespace's design-centric brand. Limited accent colors help maintain focus on user content and navigation.
Evolution
Squarespace's palette has remained largely stable, emphasizing minimalism from its early years. Minor adjustments have been made to gray values and semantic colors for accessibility and clarity.
Where Squarespace uses each color
- Primary
Used for navigation bars, logos, and primary buttons.
- Secondary
Applied to UI elements like footers and secondary navigation.
- Accent
Utilized for backgrounds, highlights, and key interface elements.
- Backgrounds
Soft Light Gray and Ultra Light Gray are used for page and section backgrounds.
- Text
Primary Text Gray and Secondary Text Gray are used for headings and body copy.
- Semantic
Green, gold, red, and blue are used for status messages, alerts, and notifications.
Squarespace color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Squarespace primary color hex code is #000000. This black is used across core brand elements and navigation.
Squarespace Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values ensure color consistency in both digital and print formats.
Squarespace uses a range of grays including Deep Charcoal (#222222), Primary Text Gray (#1A1A1A), and Neutral Border Gray (#E0E0E0). These neutrals provide structure and visual hierarchy in the UI.
The palette should emphasize minimalism, using black and grays for most UI and reserving accent and semantic colors for feedback or emphasis. Always use official hex codes for brand consistency.
The secondary color is Deep Charcoal, #222222, and the accent is Pure White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 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 Squarespace's colors consistently when it generates UI.
Make something in the spirit of Squarespace
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.