/* Jim White's First Color Palette / Color Scheme Implementation © 2020 by Jim White. All Rights Reserved. Version: 1.1 Date: 27 June 2020 @ 10:15 PM EDT Based On... Palette URL: http://paletton.com/#uid=649110kllllaFw0g0qFqFg0w0aF PLEASE NOTE: ALL of the calculations in the next ~125 lines of CSS are original effort by me, Jim White. I chose the four colors I liked from paletton.com. I then did all of the calculations below to experiment/determine if I could change the entire look of my sites by simply altering the Hue of my primary color AND maintain a "decent" looking relationship between the colors. */ :root { /* Slow down the Hover Transition so as to not be so jarring on the UI. */ --hoverTransitionTime: 0.60s; /* FIRST -- Set The HUE Values (0 – 360) for each of my 4 theme colors. */ --hueP: 233; /* Primary Color (233). */ --hueS1: calc(var(--hueP) + 99); /* Secondary 1 Color (+99) */ --hueS2: calc(var(--hueP) - 77); /* Secondary 2 Color (-77) */ --hueC: calc(var(--hueP) - 185); /* Complement Color (-185) */ --alpha: 1.0; /* SECOND -- Set the Mid-Point SATURATION & LIGHTNESS for my PRIMARY color */ --PSat: 42%; /* P Variants (Original Value: 42%) */ --PLight: 33%; /* P Variants (Original Value: 33%) */ /* THIRD -- Set the Mid-Point SATURATION & LIGHTNESS for my SECONDARY AND COMPLEMENTARY colors RELATIVE TO my Primary color */ --S1Sat: calc(var(--PSat) + 9%); /* S1 Variants */ --S1Light: calc(var(--PLight) + 2%); /* S1 Variants */ --S2Sat: calc(var(--PSat) + 8%); /* S2 Variants */ --S2Light: calc(var(--PLight) - 4%); /* S2 Variants */ --CSat: calc(var(--PSat) + 8%); /* C Variants */ --CLight: calc(var(--PLight) + 12%); /* C Variants */ /* FORTH -- Set the Light (L), Lighter (LL), Dark (D), and Darker (DD) SATURATION & LIGHTNESS for my PRIMARY color RELATIVE TO those of my Mid-Point Primary. */ --PSatLL: calc(var(--PSat) * 0.57); --PLightLL: calc(var(--PLight) * 1.80); --PSatL: calc(var(--PSat) * 0.64); --PLightL: calc(var(--PLight) * 1.34); --PSatD: calc(var(--PSat) * 1.35); --PLightD: calc(var(--PLight) * 0.69); --PSatDD: calc(var(--PSat) * 1.85); --PLightDD: calc(var(--PLight) * 0.40); /* FIFTH -- Set the Light (L), Lighter (LL), Dark (D), and Darker (DD) SATURATION & LIGHTNESS for my SECONDARY 1 color RELATIVE TO those of my Mid-Point Secondary 1. */ --S1SatLL: calc(var(--S1Sat) * 0.830); --S1LightLL: calc(var(--S1Light) * 1.900); --S1SatL: calc(var(--S1Sat) * 0.660); --S1LightL: calc(var(--S1Light) * 1.410); --S1SatD: calc(var(--S1Sat) * 1.405); --S1LightD: calc(var(--S1Light) * 0.660); --S1SatDD: calc(var(--S1Sat) * 2.000); --S1LightDD: calc(var(--S1Light) * 0.380); /* SIXTH -- Set the Light (L), Lighter (LL), Dark (D), and Darker (DD) SATURATION & LIGHTNESS for my SECONDARY 2 color RELATIVE TO those of my Mid-Point Secondary 2. */ --S2SatLL: calc(var(--S2Sat) * 0.480); --S2LightLL: calc(var(--S2Light) * 1.900); --S2SatL: calc(var(--S2Sat) * 0.660); --S2LightL: calc(var(--S2Light) * 1.410); --S2SatD: calc(var(--S2Sat) * 1.405); --S2LightD: calc(var(--S2Light) * 0.660); --S2SatDD: calc(var(--S2Sat) * 2.000); --S2LightDD: calc(var(--S2Light) * 0.380); /* SEVENTH -- Set the Light (L), Lighter (LL), Dark (D), and Darker (DD) SATURATION & LIGHTNESS for my COMPLEMENTARY color RELATIVE TO those of my Mid-Point Complementary. */ --CSatLL: calc(var(--CSat) * 2.20); --CLightLL: calc(var(--CLight) * 1.83); --CSatL: calc(var(--CSat) * 1.10); --CLightL: calc(var(--CLight) * 1.40); --CSatD: calc(var(--CSat) * 1.40); --CLightD: calc(var(--CLight) * 0.65); --CSatDD: calc(var(--CSat) * 2.00); --CLightDD: calc(var(--CLight) * 0.40); /* EIGHTH -- NOW that I have defined the forty-four (44) Values that make up my Color Palette ... NOW I DEFINE the actual Colors and their Names to be used in the Project.CSS file! */ --colorThemePLL: hsla(var(--hueP), var(--PSatLL), var(--PLightLL), var(--alpha)); --colorThemePL: hsla(var(--hueP), var(--PSatL), var(--PLightL), var(--alpha)); --colorThemeP: hsla(var(--hueP), var(--PSat), var(--PLight), var(--alpha)); --colorThemePD: hsla(var(--hueP), var(--PSatD), var(--PLightD), var(--alpha)); --colorThemePDD: hsla(var(--hueP), var(--PSatDD), var(--PLightDD), var(--alpha)); --colorThemeCLL: hsla(var(--hueC), var(--CSatLL), var(--CLightLL), var(--alpha)); --colorThemeCL: hsla(var(--hueC), var(--CSatL), var(--CLightL), var(--alpha)); --colorThemeC: hsla(var(--hueC), var(--CSat), var(--CLight), var(--alpha)); --colorThemeCD: hsla(var(--hueC), var(--CSatD), var(--CLightD), var(--alpha)); --colorThemeCDD: hsla(var(--hueC), var(--CSatDD), var(--CLightDD), var(--alpha)); --colorThemeS1LL: hsla(var(--hueS1), var(--S1SatLL), var(--S1LightLL), var(--alpha)); --colorThemeS1L: hsla(var(--hueS1), var(--S1SatL), var(--S1LightL), var(--alpha)); --colorThemeS1: hsla(var(--hueS1), var(--S1Sat), var(--S1Light), var(--alpha)); --colorThemeS1D: hsla(var(--hueS1), var(--S1SatD), var(--S1LightD), var(--alpha)); --colorThemeS1DD: hsla(var(--hueS1), var(--S1SatDD), var(--S1LightDD), var(--alpha)); --colorThemeS2LL: hsla(var(--hueS2), var(--S2SatLL), var(--S2LightLL), var(--alpha)); --colorThemeS2L: hsla(var(--hueS2), var(--S2SatL), var(--S2LightL), var(--alpha)); --colorThemeS2: hsla(var(--hueS2), var(--S2Sat), var(--S2Light), var(--alpha)); --colorThemeS2D: hsla(var(--hueS2), var(--S2SatD), var(--S2LightD), var(--alpha)); --colorThemeS2DD: hsla(var(--hueS2), var(--S2SatDD), var(--S2LightDD), var(--alpha)); /* NINTH -- Spice things up with a border color to complement my Primary LL color ... */ --colorThemePLLBold: hsla(calc(var(--hueP) + 22), calc(var(--PSatLL) + 65%), calc(var(--PLightLL) - 32% ), var(--alpha)); } /* These are the Original RGBA Values as Provided by peletton.com based on the four colors that I chose. .rgba-primary-1 { color: rgba(134, 125, 176, 1) } .rgba-primary-0 { color: rgba( 60, 49, 118, 1) } .rgba-primary-2 { color: rgba( 93, 83, 147, 1) } .rgba-primary-3 { color: rgba( 35, 24, 88, 1) } .rgba-primary-4 { color: rgba( 16, 7, 59, 1) } .rgba-secondary-1-0 { color: rgba(136, 45, 97, 1) } .rgba-secondary-1-1 { color: rgba(205, 136, 175, 1) } .rgba-secondary-1-2 { color: rgba(170, 85, 133, 1) } .rgba-secondary-1-3 { color: rgba(102, 17, 65, 1) } .rgba-secondary-1-4 { color: rgba( 68, 0, 39, 1) } .rgba-secondary-2-0 { color: rgba( 37, 112, 90, 1) } .rgba-secondary-2-1 { color: rgba(112, 168, 151, 1) } .rgba-secondary-2-2 { color: rgba( 70, 140, 119, 1) } .rgba-secondary-2-3 { color: rgba( 14, 84, 63, 1) } .rgba-secondary-2-4 { color: rgba( 0, 56, 39, 1) } .rgba-complement-0 { color: rgba(170, 148, 57, 1) } .rgba-complement-1 { color: rgba(255, 238, 170, 1) } .rgba-complement-2 { color: rgba(212, 191, 106, 1) } .rgba-complement-3 { color: rgba(128, 106, 21, 1) } .rgba-complement-4 { color: rgba( 85, 68, 0, 1) } These are the Original RGBA Values converted to variables (as I was/am unsure how to use a ".rgba-primary-0" notation in my project CSS file. --rgba-primary-0: rgba( 60, 49, 118, 1) ; /* Main Primary color --rgba-primary-1: rgba(134, 125, 176, 1) ; --rgba-primary-2: rgba( 93, 83, 147, 1) ; --rgba-primary-3: rgba( 35, 24, 88, 1) ; --rgba-primary-4: rgba( 16, 7, 59, 1) ; --rgba-secondary-1-0: rgba(136, 45, 97, 1) ; /* Main Secondary color (1) --rgba-secondary-1-1: rgba(205, 136, 175, 1) ; --rgba-secondary-1-2: rgba(170, 85, 133, 1) ; --rgba-secondary-1-3: rgba(102, 17, 65, 1) ; --rgba-secondary-1-4: rgba( 68, 0, 39, 1) ; --rgba-secondary-2-0: rgba( 37, 112, 90, 1) ; /* Main Secondary color (2) --rgba-secondary-2-1: rgba(112, 168, 151, 1) ; --rgba-secondary-2-2: rgba( 70, 140, 119, 1) ; --rgba-secondary-2-3: rgba( 14, 84, 63, 1) ; --rgba-secondary-2-4: rgba( 0, 56, 39, 1) ; --rgba-complement-0: rgba(170, 148, 57, 1) ; /* Main Complement color --rgba-complement-1: rgba(255, 238, 170, 1) ; --rgba-complement-2: rgba(212, 191, 106, 1) ; --rgba-complement-3: rgba(128, 106, 21, 1) ; --rgba-complement-4: rgba( 85, 68, 0, 1) ; These are the Original RGBA Values converted to HSLA via Couleurs App. These served as my starting point in creating all of the calculations used above. I chose HSLA format as I thought it would be easier to relate all of my various shades to each other via "Hue" Primary Color — Purple Light to Dark hsla(251, 25%, 59%, 1.0) hsla(249, 28%, 45%, 1.0) hsla(250, 41%, 33%, 1.0) hsla(250, 57%, 22%, 1.0) hsla(251, 80%, 13%, 1.0) Secondary Color #1 — Pink to Red hsla(326, 41%, 67%, 1.0) hsla(326, 33%, 50%, 1.0) hsla(325, 51%, 35%, 1.0) hsla(326, 71%, 23%, 1.0) hsla(325, 100%, 13%, 1.0) Secondary Color #2 — Green Light to Dark hsla(161, 25%, 55%, 1.0) hsla(161, 33%, 41%, 1.0) hsla(163, 50%, 29%, 1.0) hsla(162, 71%, 19%, 1.0) hsla(161, 100%, 11%, 1.0) Complementary Color — Gold Light to Dark hsla( 48, 100%, 83%, 1.0) hsla( 48, 56%, 63%, 1.0) hsla( 48, 50%, 45%, 1.0) hsla( 48, 72%, 29%, 1.0) hsla( 48, 99%, 17%, 1.0) */ /* A border color to complement the lighter Primar Shade --colorThemePLLBold: hsla(calc(var(--hueP) + 22), calc(var(--PSatLL) + 65%), calc(var(--PLightLL) - 22% ), var(--alpha)); */ /* Each tuned color now calculated off primary --hueP: 233; /* Primary Color (233) --hueS1: calc(var(--hueP) + 99); /* Secondary 1 Color (+99) --hueS2: calc(var(--hueP) - 77); /* Secondary 2 Color (-77) --hueC: calc(var(--hueP) - 185); /* Complement Color (-185) --alpha: 1.0; */ /* Each color tuned a bit for personal taste. --hueP: 233; /* Primary Color (Original Value: 250) --hueS1: 332; /* Secondary 1 Color (Original Value: 326) --hueS2: 156; /* Secondary 2 Color (Original Value: 161) --hueC: 48; /* Complement Color (Original Value: 48) --alpha: 1.0; */ /* ORIGINAL COLORS. --hueP: 250; /* Primary Color (Original Value: 250) --hueS1: 326; /* Secondary 1 Color (Original Value: 326) --hueS2: 161; /* Secondary 2 Color (Original Value: 161) --hueC: 48; /* Complement Color (Original Value: 48) --alpha: 1.0; */