The Color Scheme Selectotron


Color WheelWelcome to the web page color scheme testing page. You can use this page to try out various combinations of colors for web pages that use this "boxes" layout style. The colors currently in use are filled in below. Change the colors you wish and then click the refresh button, or select a pre-existing color scheme to start from. For a reference page of 6-digit color identifiers, click the color wheel.

                          

Name Current App. Change to Description
border 0000CD   Box border color.
textbg CAE1FF   Box background color.
bgcolor 7EC0EE   Main background color.
text 00008B   Basic text color.
link 6600EE   Unvisitted link color.
vlink 0044DD   Visitted link color.
alink 0000FF   Active link color.

Here is a listing of the current selections for reference:
English:
border = 0000CD (the box border color)
textbg = CAE1FF (the box background color)
bgcolor = 7EC0EE (the main background color)
text = 00008B (the basic text color)
link = 6600EE (the unvisitted link color)
vlink = 0044DD (the visitted link color)
alink = 0000FF (the active link color)
 perl:
@colorinfo =
(
['border', '0000CD', 'Box border'],
['textbg', 'CAE1FF', 'Box background'],
['bgcolor', '7EC0EE', 'Main background'],
['text', '00008B', 'Basic text'],
['link', '6600EE', 'Unvisitted link'],
['vlink', '0044DD', 'Visitted link'],
['alink', '0000FF', 'Active link'],

);



Here is an HTML5 template to work from:

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Your Page Name Goes Here</title>
    <meta name="description" content="page summary here">
    <meta charset="UTF-8" />
    <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" />
    <link rel="author"
          href="https://plus.google.com/+IanFlockhart">
    <!-- add/remove libraries as needed, hashes can be looked up at
       https://srihash.org/ notes on SRI and failover technique at
       https://hacks.mozilla.org/2015/09/subresource-integrity-in-firefox-43/?imm_mid=0d9f9d&cmp=em-web-na-na-newsltr_20151007
    -->
    <script />
    <link rel="stylesheet" type="text/css"
          href="my_styles.css" />
  </head>

  <body>

    <header>
      <h2>Your Title Goes Here</h2>
    </header>

    <section>
      Your main body/text goes here.
    </section>
  </body>
</html>



And here is the matching style sheet (my_styles.css):

body {background: #7EC0EE;  /* background color outside boxes */
      text-align: center; /* center as many things as possible */
      color: #00008B} /* general text color */

h1, h2, h3, form {margin: 0in} /* compatability */

a:link {color: #6600EE} /* text color for unvisitted links */
a:active {color: #0000FF}              /* active links */
a:visited {color: #0044DD}             /* visitted links */

header, section {
    background: #CAE1FF; /* background color for boxes */
    padding:4px;
    border: 2px solid #0000CD;
    margin: 10px 3px;
}
section {
    text-align: left;
}
section.ctr, header {
    text-align: center;
}
section.ctr *, header * {
    margin: auto;
}


table.box {background: #0000CD; /* border color for boxes */
           margin: 0 auto; /* center the table */
           width: 100%;
           border-collapse:separate; border-spacing: 2px; /*cellspacing="2"*/
}
td.box, th.box {
    background: #CAE1FF; /* background color for boxes */
    padding:4px; /* was <table cellpadding="4"> */
}
td.leftbox, th.leftbox {
    background: #CAE1FF; /* background color for boxes */
    padding:4px; /* was <table cellpadding="4"> */
    text-align: left; /* left-align as many things as possible */
}
td.centbox, th.centbox {
    background: #CAE1FF; /* background color for boxes */
    padding:4px; /* was <table cellpadding="4"> */
    text-align: center; /* center as many things as possible */
}

/* not part of the colorscheme, but I keep using it */
div.twocol, section.twocol {
    -webkit-column-count: 2;
    -webkit-column-gap: 4px;
    -moz-column-count: 2;
    -moz-column-gap: 4px;
    column-count: 2;
    column-gap: 4px;
}