Squarespace Color Variables

Introduction

The color system in Squarespace is built around a five-color palette. Using these 5 colors, Squarespace creates 10 different color themes which are used to style page sections.

The colors for all the components and blocks within a section are stored as css variables. This page documents all of these variables, in order to provide a quick-reference guide for creating custom templates & components.

CSS Variables Webinar

In this webinar, I go over the 5 core color variables and how to use them to create a custom template.

Premium Content

This webinar is exclusively available to subscribers. Unlock this and all premium content with a subscription.

Sign UpLogin

Five Core Color Variables

Each of the five colors in your website's palette are stored as the values in the hsl color space.

:root {
    --white-hsl: 0, 0%, 94.9%;
    --black-hsl: 0, 0%, 10.2%;
    --safeLightAccent-hsl: 0, 0%, 100%;
    --safeDarkAccent-hsl: 290.1, 85.83%, 47.06%;
    --safeInverseAccent-hsl: 0, 0%, 100%;
    --safeInverseLightAccent-hsl: 0, 0%, 0%;
    --safeInverseDarkAccent-hsl: 0, 0%, 100%;
    --accent-hsl: 290.1, 85.83%, 47.06%;
    --lightAccent-hsl: 0, 0%, 80%;
    --darkAccent-hsl: 0, 0%, 25.1%;
}

To make your colors easier to use, I recommend converting them to custom properties that are simplier.

Place the following in your custom CSS or code injection area:

:root {
  --palette-1: ~'hsla(var(--white-hsl), 1)';
  --palette-2: ~'hsla(var(--lightAccent-hsl), 1)';
  --palette-3: ~'hsla(var(--accent-hsl), 1)'; 
  --palette-4: ~'hsla(var(--darkAccent-hsl), 1)'; 
  --palette-5: ~'hsla(var(--black-hsl), 1)'; 
}

You can then use these variables to style your website.

Core Theme Variables

Each of your 10 color themes have 300+ CSS variables that style the components and blocks within the section. You can use these variables building a custom template or component while maintining consitency with the chosen color theme. Here are the most common variables you'll need to know:

All Theme Variables

Here is a list of all the theme variables for each color themes.

Core Theme

Text Block

Headings

Paragraphs

Buttons

Navigation

Header

Menu Overlay

Menu Block

Form Block

Newsletter Block

Summary Block

Quote Block

Accordion Block

Marquee Block

Donation Block

Line Block

Image Block

Image Block Collage

Image Block Overlap

Gallery

Blog

Blog Side By Side

Blog Masonry

Blog Single Column

Blog Basic Grid

Product

Product Detail

Product Grid

Portfolio

Portfolio Item Pagination

Video

Events

Social Links Block

Shape Block

List Section

Course Item Nav

Course List Grid

Course List

Additional