Choose your colors.
Primary color
Your choice of colors is very important.
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 schemes use different tones from the same angle on the color wheel (the same hue).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
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)
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.
Instead of using colors that are opposites, it uses colors on both sides of the opposite hue.
#663399 Split Complementary #989932 #329933
Color Picker
- 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.
$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;
$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.
$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;
