SiteSubscribe

Selecting a Color Scheme for Your Website

Most themes come with a good color scheme already built-in (via CSS Cascading Style Sheet references), so you really don’t need to select a color scheme for your website…UNLESS...

That is, unless you have a corporate color scheme or logo colors that you want to match to, or if you just have a particular color scheme you are shooting for that isn’t available ‘out-of-the-box’ with your theme. In that case CSS can be used to apply a few of your core colors into the theme you have selected for your website.

With CSS some ‘broad strokes’ of stylization can be achieved by applying, in some cases, global changes to your website with a few targeted CSS selectors (it can get pretty complicated, but that’s the basic idea).

For the simplest approach we recommend using the color scheme supplied within the selected theme.

When making a decision on how to select colors for your website you have a few choices:

1) Use Your Theme’s Built-in Colors

Easiest option: Leave your theme colors the way they are.

This is often the best option since most premium themes have a good color scheme.

Most themes come with a good color design already built into the theme (via CSS Cascading Style Sheet references), so you really don’t need to select a color scheme for your website if you like the way your theme looks ‘out-of-the-box‘.

If you want to keep things simple, this is your best option.

Select a color scheme sometimes available from within your theme.

Some themes provide more than one selectable color scheme, or a way to select colors for specific elements of your theme from within the theme’s administrative options.

If your theme provides more than one selectable color scheme, select a color scheme for your theme that suits you best. Some themes come with a few color scheme options by making them available by selecting from different CSS style sheets, usually from within the WordPress Dashboard (under Appearance ->Themes menu).

For example, select the ‘blue’ style sheet for the blue color scheme, the ‘red’ style sheet for the red color scheme (not all themes support selectable color options).

2) Override Theme Colors Using CSS

Customize Your Site Using CSS.

Have us customize your CSS to match the color scheme that you desire, such as your corporate colors. This option may incur additional customization charges.

For this option SiteSubscribe can also provide an Addon service of creating a special HTML Color Chart Showing Corporate Colors (Corporate Color Pallet) for our clients so they know what colors we used to build their website so that they have a record to help keep their corporate colors remaining consistent across other projects that may come up, such as printing or other web projects.

HTML Color Chart by MileHighMarketing1 About Web Colors

HTML Color Chart Showing Corporate Colors

Websafe Colors

For sites we design we don’t limit color support to “websafe” colors because most computer monitors today can reproduce millions of colors over the web and through your web browser without any problems.

Web safe colors: Means a very limited pallet of 216 colors deemed as ‘web safe’ that were targeted to work with earlier computer monitors that didn’t support today’s vast array of millions of colors. Today most computer monitors and modern browsers (recent versions of Firefox, Safari, Chrome, Opera, Internet Explorer) used on most versions of Windows, Mac, or Linux, will all support millions upon millions of colors, so they will be viewable by more or less everyone.

Using CSS Cascading Style Sheets to Reference Colors for the Web

Colors can be referenced for use on the web by using Hex colors, or (less frequently) by using RGB color designators.

Hex colors always start with a number sign (#), and are 6 hex characters long. Example: #3a93d0 is the hex representation for the blue color in our logo. Like like web designers we prefer to work with Hex color references (much easier than dealing with RGB values).

RBG colors use three sets of up to 3 digits each, where each set represents a color from the R=Red G=Green B=Blue schema. Example: RGB 58, 147, 208 is the RGB representation for the blue color in our logo.

CSS Cascading Style Sheets are pages of code that contain CSS style ‘selectors’ used by web designers and web developers to apply style and positioning to elements within a website. A CSS file might be named something like style.css, and is typically referenced within the header of a website.

CSS Cascading Style Sheets code looks like this:

code within a CSS Style Sheet looks like this

So to reference the blue color in our logo using CSS, we would use the following CSS selectors:

color: #3a93d0;

color: rgb(58, 147, 208);

(As mentioned, we prefer to use the Hex representation).

Fortunately most site owners don’t need to know a thing about CSS, so this article is just to let you know we have ways of addressing the color needs you have for your website.

Useful Tools for Using Color Within Your Website

4096 Color Wheel

4096 Color Wheel:Color wheel where you can select a color from the visual color wheel, and it will display the Hex values. Shows 7 color swatches with black and white text on top of the color swatches.
Name That Color:Color wheel where you can select a color from the visual color wheel, and it will display the Hex and RGB values.
slayeroffice color pallet generator: It will create 10 shades of the base color at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black (or colors of your choosing) so you can see your color selection contrasting over light or dark backgrounds. Perhaps the most useful feature is that it outputs color values as either Hex or RGB.
PageTutor Hex Color Chart: Huge color chart showing 1536 color swatches with their Hex values.
mooColorfinder finds CSS colors used on a website: Enter a URL of any website to find the colors used. Unfortunately this site doesn’t list out the Hex color values, you have to mouse-over each little color swatch to get the color value.