Squarespace Website Designers. How to choose your colours and how to implement them.

On a Squarespace website you have five colours that you can use in your colour palette and you can find the colour palette setting by clicking on the styles icon in the top right of your edit screen.

From left to right in the edit screen above they run light to dark and they’ll correspond to the text colours and the colours of the sections, buttons, calls to actions, blog styles and other collections like events, services etc etc.

You can even match a colour from your logo by dragging a screenshot into the colour matching box below the box you can see above.

When you’re working in the website you may find you need more than 5 colours occasionally. You’ll be able to add a custom colour.

Colour Codes Explained

Colour codes are systems used to represent colours in a standardised way, making it easy to reproduce exact shades across different mediums and devices. Here are the common colour code formats:

1. Hexadecimal (Hex) Codes

   • Format: #RRGGBB

   • Uses six hexadecimal digits, with two digits each for red, green, and blue values.

   • Example: #FF5733 represents a shade of orange.

2. RGB Codes

   • Format: rgb(red, green, blue)

   • Specifies the intensity of red, green, and blue on a scale from 0 to 255.

   • Example: rgb(255, 87, 51) corresponds to the same orange as the hex example above.

   • Often used in CSS and digital imaging.

3. RGBA Codes

   • Format: rgba(red, green, blue, alpha)

   • Similar to RGB but includes an alpha channel to define opacity (0.0 to 1.0).

   • Example: rgba(255, 87, 51, 0.5) is semi-transparent orange.

4. HSL Codes

   • Format: hsl(hue, saturation%, lightness%)

   • Defines colours by hue (0–360 degrees on the colour wheel), saturation, and lightness.

   • Example: hsl(14, 100%, 60%) represents a shade near orange.

   • Useful for adjusting colours intuitively.

5. HSLA Codes

   • Format: hsla(hue, saturation%, lightness%, alpha)

   • Adds transparency to HSL, where alpha controls opacity.