Site Title and Logo

[ Home | About | Pages | News ]

Site Colors

Overview

In creating this site, the desire was to have a dark mode color scheme with one or two sparsely used accent colors. The purpose of this design choice is to provide easy-to-read content with high contrast for any lighting situation.

Color Names

For simplicity of coding, colors used have names recognized in HTML rather than using variants expressed as RGB. When typing in a color name, programs like Virtual Studio Code will auto-complete the color name with the standard HTML color name using a drop-down selection.

Background

Black has been used as the background color. Alternative backgrounds were considered that have a less stark contrast, such as dark gray. However, one of the goals in using solid black was to take advantage of the power saving with devices able to darken the screen by reducing lighting to that area of the screen. Black doesn't need a specific RGB number equivalent provided. It can be defined using just the word black. So this meets the desire to use only named colors.

Page Text

Pure white text on a solid black background can be visually too stark, so White Smoke was selected as the primary text color.

Site Header Logo Image

The original site logo was bright white with a black background. This was stark with too much contrast, and a strain on the eyes. A color picker was used to replicate the site font color and apply that to the header image. However, due to the size of the white areas in the header image and large block text, it was helpful to use a slightly darker shade of R229-G227-B227 rather than the site font color of R244 G243 B243. This creates a visual equivalence in brightness between the header and text. When combined, the text and header color have the effect of turning down the screen brightness.

Accent Colors

Considerations for possible accent colors are below. Variations of green, orange, purple, and goldenrod are good as accent colors for links. However, if too dark, these colors don't offer sufficient contrast with the black background. If too light, these colors are hard to distinguish from white. So, finding just the right shade is important. Currently, skyblue is being used as an accent color for links and deepskyblue on hover.

Site Design Reference Pages

These are pages relating to site design, development, and management.