How to Determine a Color Scheme for Your Squarespace Website - dummies

How to Determine a Color Scheme for Your Squarespace Website

By Kris Black

When figuring out a color scheme to direct Squarespace to use for your website, you can quickly become lost in the process of matching colors, adjusting color values (darker versus lighter), and deciding where to include color.

How to find RGB and hex codes

After you’ve chosen the colors you want to use on your site, you need to find the specific color names in one of two color methods used in Squarespace:

  • RGB (red, green, blue) is the color method used to display colors on a backlit screen such as that found on a computer monitor, an iPhone, or a TV. The range of each color is measured from 0 through 255.

    If all three colors are set to 0, the color presented is black. If all three are set to 255, the color is white. By varying the values of the numbers, you can create a near unlimited supply of color.

    In addition, when the RGB color method includes transparency, it’s called RGBa. The a represents the alpha channel, which controls the color’s transparency on a scale from 0 (completely transparent) to 1 (completely opaque).

  • Hexadecimal, or hex, color is a simplified form of RGB commonly used in web design.

Although you can certainly just eyeball the color in the color wheel setting, sometimes it’s nice to know the exact color you want to use. To find out more about web color, read the thorough Wikipedia article.

So how do you find the color you want to use? It’s fairly easy if you have the right tools on your computer or know where to look. Following is a list of color pickers, applications you can use to find the exact color displayed on your computer screen:

  • ColorZilla is a free browser plug-in for Firefox or Chrome.

  • ColorSchemerColorPix is a free Windows application.

  • xScope is a paid-for Mac application popular with web designers. It has other features in addition to a color picker that you may find useful if you want more designer features.

  • ColorSchemer is a robust color picking and designing application available for Mac, Windows, iPhone, and iPod touch. This application is not free but it does offer expanded capabilities to help you explore color harmonies, and it can even suggest color schemes for you. If you have an iPhone or iPod touch, check out the ColorSchemer app, because it’s pretty nifty.

How to look at color code on Squarespace

If you’re a web professional or someone who doesn’t shy away from a little digging in a site’s code, you can peek at the color code on a site by inspecting the site’s source code. Follow these general instructions:

  1. Right-click the element containing the color you’re interested in.

  2. Select the option in the pop-up menu to inspect the element.

    The browser displays the underlying code.

Because each browser’s source code inspection works differently, following are the basic instructions for inspecting elements in the four browsers Squarespace supports for editing your site:

  • Safari: Enable the Developer menu bar in Safari’s preferences by choosing Advanced→Show the Developer Menu Bar.

  • Chrome: Unlike Safari, Chrome already has its inspect element feature enabled, so no configuring is necessary.

  • Firefox: Firefox, like Chrome, has a basic inspect element. For more advanced code-viewing features, you need to install Firebug.

  • Internet Explorer: Press F12 on your keyboard to open the Developer Tools included in your site. If pressing F12 doesn’t work, choose Tools→Developer Tools.

Code peeking works only for colors rendered by the browser, such as text color and the background colors of site elements. To determine the color in an image, you will need to use one of the color pickers mentioned previously.