Jump to content

How do I use Squarespace color variables in my CSS?

Go to solution Solved by paul2009,

Recommended Posts

Site password: colorcodehelp

There are variables in for the colors that are changed throughout the code whenever you change the color palette. I want to use those so I can stop having to copy and paste the hex codes or the hsl numbers every time I want to add something within the color palette. Is there a way for me to start using those variables?

For example I found this code:

<style id="colorThemeStyles">
    :root {
        --white-hsl: 41.54, 23.64%, 89.22%;
        --black-hsl: 60, 3.45%, 17.06%;
        --safeLightAccent-hsl: 176.9, 28.16%, 59.61%;
        --safeDarkAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseLightAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseDarkAccent-hsl: 41.54, 23.64%, 89.22%;
        --accent-hsl: 176.9, 28.16%, 59.61%;
        --lightAccent-hsl: 44.27, 74.1%, 72.75%;
        --darkAccent-hsl: 211.46, 49.76%, 40.59%;

    .white {
        --announcement-bar-background-color: hsla(var(--black-hsl), 1);
        --announcement-bar-text-color: hsla(var(--white-hsl), 1);
        --backgroundOverlayColor: hsla(var(--white-hsl), 1);
... and so on

I see the colors there in that root tag, and I want to use it elsewhere, like in shadows or the effect on my site whenever you hover over a blog post link. I am still experimenting with color, so I want to figure out how to change all the effects at the same time rather than going into the color panel and then to the CSS code panel.

Thank you!

Link to comment
  • Solution

You should be able to refer to them as variables in the Custom CSS panel. For example to set the colour of an element to match the navigation link colour, you'd use:

color: var(--navigationLinkColor);

Each item in the styles panel has a value. For example, the background colour of primary buttons and secondary buttons are:



I hope that helps.

Did this help? Please give feedback by clicking an icon below  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
Posted (edited)

this isn't the IDEAL solution, I'd much rather use the variables themselves, but I also am not making a restaurant, so I was able to map the menu block colors to the five different palette colors. Thank you!


  • WHITE: var(--tweak-menu-block-nav-color)
  • LIGHT ACCENT: var(--tweak-menu-block-title-color)
  • ACCENT: var(--tweak-menu-block-item-title-color)
  • DARK ACCENT: var(--tweak-menu-block-item-description-color)
  • BLACK: var(--tweak-menu-block-item-price-color)

in practice:

.header-title-logo img, .header-mobile-logo img {
      drop-shadow(0px 0px var(--tweak-menu-block-item-title-color)) 
      drop-shadow(0px 0px var(--tweak-menu-block-title-color));
    transition: all 0.25s ease-in-out !important;


Edited by DerrickSaenz
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.