Web Dev - Choose your colors

Choose your colors.

Primary color

• https://www.fastcompany.com/3028378/what-your-logos-color-says-about-your-company-infographic

    Your choice of colors is very important.

• https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/

    I want to start with rebeccapurple #663399

Color scheme

• https://www.w3schools.com/colors/colors_schemes.asp
• http://serennu.com/colour/colourcalculator.php
• https://zevendesign.com/color-harmony-hulk-wears-purple-pants/

Achromatic Color Schemes

The white on black achromatic color scheme is often preferred for smaller devices.
White on black requires less energy (improves battery life) on most display technologies.
I will use this on media screen width 600px and less.

Monochromatic Color Schemes

Monochromatic schemes use different tones from the same angle on the color wheel (the same hue).

This is just too much of the same.

Analogous Color Schemes

Analogous color schemes are created by using colors that are next to each other on the color wheel.
#663399 Analogous #993298#333299
This is better but still not enough variety.

Complementary Color Schemes

Complementary schemes are created by combining colors from opposite sides of the color wheel.

The complement of #663399 is #99cc66 or #659932 (complementary)

• https://planetcalc.com/7661/ Online Calculator Complementary Color

Complementary colors can create some striking optical effects. The shadow of an object appears to contain some of the complementary color of the object. For example, the shadow of a red apple will appear to contain a little blue-green. This effect is often copied by painters who want to create more luminous and realistic shadows. Placed side by side as tiny dots, in partitive color mixing, complementary colors appear gray.

Triadic Color Scheme

Triadic schemes are made up of hues equally spaced around color wheel.

#663399 Triad #996632 #329966 

Compound (aka Split Complementary) Color Scheme

Compound schemes are almost the same as complementary schemes.
Instead of using colors that are opposites, it uses colors on both sides of the opposite hue.

#663399 Split Complementary #989932 #329933 

Color Picker

• https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=673AB7

Triadic

• Primary #663399 white
• P-Light #9760ca black
• P-Dark #36036a white
• Secondary #996633 white
• S-Light #cd945e black
• S-Dark #673b08 white
• Triad #339966 black
• T-Light #68cb94 black
• T-Dark #006a3b white

Compound

• Primary #663399 white
• P-Light #9760ca black
• P-Dark #36036a white
• Secondary #999933 black
• S-Light #ccca62 black
• S-Dark #686b00 white
• Tertiary #339933 black
• T-Light #69cb61 black
• T-Dark #006a00 white

Final Choice

I have not decided. The compound seems more appropriate if side nav will have a different color scheme from content. Triadic is a bit bolder. I have decide to use both. The Triadic for my resume and the split complementary for my blog. Two different sites, two different purposes but related.

   $dsc-primary: rebeccapurple;
    $dsc-primary-text: white;
    $dsc-p-light: #9760ca;
    $dsc-p-light-text: black;
    $dsc-p-dark: #36036a;
    $dsc-p-dark-text: white;
    $dsc-secondary: #993;
    $dsc-secondary-text: black;
    $dsc-s-light: #ccca62;
    $dsc-s-light-text: black;
    $dsc-s-dark: #686b00;
    $dsc-s-dark-text: white;
    $dsc-third: #393;
    $dsc-third-text: black;
    $dsc-t-light: #69cb61;
    $dsc-t-light-text: black;
    $dsc-t-dark: #006a00;
    $dsc-t-dark-text: white;

This is my first pass with the split complementary. I want to verify the text colors, perhaps make them a bit more colorful.

• https://contrastchecker.com/
• http://www.checkmycolours.com/

    $dsc-primary: rebeccapurple; 
    $dsc-primary-text: #E5F2D8 ;
    $dsc-p-light: #9760ca;
    $dsc-p-light-text: #18250C ;
    $dsc-p-dark: #36036a;
    $dsc-p-dark-text: #E5F2D8 ;
    $dsc-secondary: #993;
    $dsc-secondary-text: #0C0C25 ;
    $dsc-s-light: #ccca62;
    $dsc-s-light-text: #111236;
    $dsc-s-dark: #686b00;
    $dsc-s-dark-text: #EBEBF8;
    $dsc-third: #393;
    $dsc-third-text: #250C25;
    $dsc-t-light: #69cb61;
    $dsc-t-light-text: #250C25;
    $dsc-t-dark: #006a00;
    $dsc-t-dark-text: #FFD0FE;