How to Use Hex, RGB, and HSL Color Codes in Squarespace 7.1

You can use Hex, RGB, and HSL color codes to change your site’s color theme palette, or to change the color of various elements with custom CSS.

What do Hex, RGB, and HSL mean?

Hex (hexadecimal) color codes include a 6-digit color code preceded by a pound symbol (#). The format looks something like this: #FFFFFF

RGB (Red, Blue, & Green) color codes include a triplet of numbers that represent how much of each red, green, and blue is included in the color. The format looks something like this: RGB(50, 168, 82)

HSL (Hue, Saturation, & Lightness) color codes include a triplet of numbers that represent the hue (a degree on the color wheel from 0 to 360), saturation (a percentage value with 0% meaning grey and 100% being full color), and lightness (a percentage value where 0% is black and 100% is white). The format looks something like this: HSL(136°, 54%, 43%)

Using the Palette Editor

The Squarespace 7.1 platform lets you easily edit your site’s palette colors using Hex, RGB, or HSL color codes. You can access the palette editor by clicking “Edit” in the upper left-hand corner of your site preview, then clicking the paintbrush in the upper righthand corner of the edit preview, then clicking on “Colors,” and finally clicking “Edit Palette.” Here is what you should see:

When the color editor is open, you can choose from Hex, RGB, or HSL color codes. Once you select your preferred method of picking colors, you can either enter the exact color code values you want, or you can select a custom combination of hue, saturation, and lightness by dragging the white, circular icons in the color editors.

Using Custom CSS

In addition to using the color palette editor in Squarespace, you can also change the color of elements using custom CSS using Hex, RGB, and HSL codes.

Before you can edit color using CSS, you should be comfortable with CSS selectors, which are used to target specific HTML elements on a web page. If you need a beginner-friendly tutorial on using CSS selectors or just want to brush up on your selector knowledge, check out my article A Complete Guide to CSS Selectors in Squarespace 7.1.

Hex color codes in CSS

To set the color of an element using Hex color codes, use the following format:

a {
  color: #000000;
}

RBG color codes in CSS

To set the color of an element using RGB color codes, use the following format:

a {
  color: rgb(50, 168, 82);
}

HSL color codes in CSS

To set the color of an element using HSL color codes, use the following format:

a {
  color: rgb(136, 70, 66);
}

If you enjoyed this tutorial, be sure to subscribe to my email list so that you never miss a Squarespace tutorial!