Creating Colors with Code

There are six different types of color codes you can use when creating custom CSS for your Squarespace site. In this article, you’ll learn about each one and how you can use it to add a pop of color to your Squarespace site. I’ve also included an example of using each one to change the color of H1 text. Let's get started!

HEX (hexidecimal) color codes

HEX color codes are 6 characters listed after the # symbol, numbers 0-9 and letters A-F. HEX color codes can be shortened to three characters, where white can be listed as #FFFFFF or #FFF. For a complete list of HEX color codes, check out this article.

h1 {
color: #FF5733;
}

Websafe color names

There are 140 predefined color names you can use in code. Common ones include black, white, green, yellow, red, and blue. For a complete list of predefined color names, check out this article.

h1 {
color: red;
}

RGB (red green blue scale)

RGB color codes are written with red green and blue values listed in order between parenthesis, separated by commas. Solid blue is rgb(0,0,255) solid red is rgb(255,0,0) white is rgba(255,255,255) And black is rgb(0,0,0)

For a complete list of RGB color codes, check out this article.

h1 {
color: rgb(255, 87, 51);
}

HSL (hue saturation lightness scale)

HSL color codes are written with hue, saturation, and lightness values listed in order between parenthesis, separated by commas. Hue is the degree on the color wheel for the color, while saturation and lightness are both percentage values. Solid blue is hsl(240,100%,50%) solid red is hsl(0,100%,50%) white is hsl(0,0%,100%) And black is hsl(0,0%,0%)

For a complete list of HSL color codes with examples, check out this article.

h1 {
color: hsl(15, 100%, 60%);
}

RGBA (red green blue scale with opacity)

RGBA color codes are identical to RGB codes with one additional value to adjust opacity. Perfect for overlays and shadows, create your RGB color and add an additional comma and number between 0 and 1 to adjust the level of transparency, 0 being invisible and 1 being full color. For example, a semi transparent white color is rgba(255,255,255,.5)

h1 {
color: rgba(255, 87, 51, 0.5);
}

HSLA (hue saturation lightness scale with opacity)

HSLA color codes are identical to HSL codes with one additional value to adjust opacity. Perfect for overlays and shadows, create your HSL color and add an additional comma and number between 0 and 1 to adjust the level of transparency, 0 being invisible and 1 being full color. For example, a semi transparent white color is hsla(255,255,255,.5)

h1 {
color: hsla(15, 100%, 60%, 0.5);
}