How to Change Your Website’s Colors in Squarespace - dummies

How to Change Your Website’s Colors in Squarespace

By Kris Black

If you’re accustomed to how design applications let you select colors in a color wheel, you’ll feel right at home with selecting colors in Squarespace’s Style Editor. But if you’ve never encountered a color wheel, don’t worry, because it’s easy to use.

How to choose a color on the wheel

To change the color of an element on your site, do the following.

  1. In the Colors section of Style Editor, click the element name.

    The pop-up color wheel appears.


  2. Change the color in the color wheel.

    The inner triangle is pointing to a dark indicator line in the color wheel. Click and drag that line to select a color. You can also click anywhere in the color wheel to jump the indicator line to that point.

  3. Modify the value of the color.

    A color’s value is the darkness or lightness of the color. To change the value of the selected color, drag the value selector disc anywhere in the triangle. Each corner of the triangle displays the selected color in the color wheel, or black, or white. As you move away from the corners, the values start to blend.

    If you want to select a gray color, just move the value selector disc along the edge of the triangle between the white and black corners. The color selected in the color wheel will not matter as long as you keep the disc next to the edge between the black and white corners.

How to add transparency with the slider in Squarespace

To make the selected color transparent, so that a background image can show through, use the slider below the color wheel. Just click and drag the slider to the left. The farther left you drag, the more transparent the color becomes. Dragging the slider all the way to the left makes the color completely transparent.

When you drag the slider to the left, the color method changes from hexadecimal (with the preceding # symbol) to RGBa.


Understanding how transparency works in a browser can help you create some stylish effects on your site. For example, make your content’s background color transparent to allow the background image of your site to show through. For more on transparency, see the nearby sidebar, “Changing the channel.”

How to hide an element in Squarespace

Suppose you have an element on your site that you want to hide. In other words, you want the element to be 100 percent transparent. Simply select the Transparent option at the bottom of the color wheel dialog box. The element will become transparent instantly.