CSS :root Based Color - flatuicolor https://www.flatuicolorpicker.com/

root.color.css

/*!
 * Factory Color
 * Based On: https://www.flatuicolorpicker.com/
 */
:root {
    /* BLUE */
    --shark-blue: #24252a;
    --serpa-blue: #013243;
    --ebony-clay-blue: #22313f;
    --pickled-bluewood: #34495e;
    --madison-blue: #2c3e50;
    --chambray-blue: #3a539b;
    --jackson-purple-blue: #1f3a93;
    --persian-blue: #4d13d1;
    --han-purple-blue: #4d05e8;
    --royal-blue: #5333ed;
    --ming-blue: #336e7b;
    --san-marino-blue: #446cb3;
    --air-force-blue: #4b77be;
    --summer-sky-blue: #1e8bc3;
    --jelly-bean-blue: #2574a9;
    --mariner-blue: #2c82c9;
    --havelock-blue: #4183d7;
    --curious-blue: #3498db;
    --fountain-blue: #5c97bf;
    --picton-blue: #59abe3;
    --irish-blue: #00b5cc;
    --dodger-blue: #22a7f0;
    --deep-sky-blue: #19b5fe;
    --shakespear-blue: #52b3d9;
    --spray-blue: #81cfe0;
    --jordy-blue: #89c4f4;
    --hummingbird-blue: #c5eff7;
    --alice-blue: #e4f1fe;

    /* RED */
    --falcon-red: #765d69;
    --old-brick-red: #96281b;
    --razzmatazz-red: #db0a5b;
    --monza-red: #cf000f;
    --thunderbird-red: #d91e18;
    --tall-poppy-red: #c0392b;
    --valencia-red: #d64541;
    --radical-red: #f62459;
    --pomegranate-red: #f03434;
    --scarler-red: #f22613;
    --sunset-orange-red: #f64747;
    --cinnabar-red: #e74c3c;
    --chestnut-rose-red: #d24d57;
    --cabaret-red: #d2527f;
    --soft-red: #ec644b;
    --sunglo-red: #e26a6a;
    --new-york-red: #e08283;
    --frolly-red: #f1828d;
    --vivid-tangerine-red: #ff9478;
    --wax-flower-red: #f1a9a0;


    /* GREEN */
    --salem-green: #1e824c;
    --observatory-green: #049372;
    --green-haze-green: #019875;
    --mountain-meadow-green: #16a085;
    --free-speech-aquamarine-green: #03a678;
    --jade-green: #00b16a;
    --eucalyptus-green: #26a65b;
    --jungle-green: #26c281;
    --ocean-green: #4daf7c;
    --malachite-green: #00e640;
    --shamrock-green: #2ecc71;
    --emerald-green: #3fc380;
    --niagara-green: #2abb9b;
    --medium-turquoise-green: #4ecdc4;
    --summer-green: #91b496;
    --light-green: #7befb2;
    --bright-turquoise-green: #29f1c3;
    --gossip-green: #87d37c;
    --java-green: #23cba7;
    --dark-sea-green: #90c695;
    --aqua-island-green: #a2ded0;
    --riptide-green: #86e2d5;
    --madang-green: #c8f7c5;
    --turquoise-green: #36d7b7;
    --medium-aquamarine-green: #66cc99;
    --light-sea-green: #1ba39c;
    --downy-green: #65c6bb;
    --silver-tree-green: #68c3a3;
    --carribean-green: #03c9a9;

    /* GREY */

    --outer-space-grey: #2e3131;
    --lynch-grey: #6c7a89;
    --hoki-grey: #67809f;
    --cascade-grey: #95a5a6;
    --edward-grey: #abb7b7;
    --iron-grey: #dadfe1;
    --silver-sand-grey: #bdc3c7;
    --silver-grey: #bfbfbf;
    --pumice-grey: #d2d7d3;
    --gallery-grey: #eeeeee;
    --solitude-grey: #e4e9ed;
    --mercury-grey: #e8e8e8;
    --mystic-grey: #e8ecf1;
    --white-smoke-grey: #ececec;
    --porcelain-grey: #ecf0f1;
    --cararra-grey: #f2f1ef;
    --pampas-grey: #f3f1ef;

    /* YELLOW */

    --ripe-lemon-yellow: #f7ca18;
    --confetti-yellow: #e9d460;
    --turbo-yellow: #f5e51b;
    --saffron-yellow: #f4d03f;
    --cream-can-yellow: #f5d76e;
    --kournikova-yellow: #fad859;
    --energy-yellow-yellow: #f5e653;
    --candy-corn-yellow: #fef160;
    --yellow-yellow: #f0ff00;
    --chartreuse-yellow-yellow: #eeee00;
    --marigold-yellow-yellow: #f4f776;
    --dolly-yellow: #ffff7e;
    --buff-yellow: #f2d984;
    --witch-haze-yellow: #fff68f;
    --salomie-yellow: #ffec8b;
    --orchid-white-yellow: #f0f0d6;
    --cream-yellow: #ffffcc;
    --gin-fizz-yellow: #fff9de;
    --moon-glow-yellow: #fefad4;

    /* ORANGE */

    --burnt-orange-orange: #d35400;
    --vivid-orange: #f15a22;
    --ecstasy-orange: #f9690e;
    --jaffa-orange: #f27935;
    --zest-orange: #e47833;
    --crusta-orange: #f2784b;
    --carrot-orange-orange: #e67e22;
    --tahiti-gold-orange: #e87e04;
    --california-orange: #f89406;
    --sea-buckthorn-orange: #eb974e;
    --fire-bush-orange: #eb9532;
    --buttercup-orange: #f39c12;
    --casablanca-orange: #f4b350;
    --sandstorm-orange: #f9bf3b;
    --light-buckthorn-orange: #f9b42d;
    --my-sin-orange: #fcb941;
    --supernova-orange: #ffcb05;
    --lightning-yellow-orange: #f5ab35;
    --saffron-mango-orange: #fabe58;
    --goldenrod-orange: #fcd670;
    --cape-honey-orange: #fde3a7;

    /* PURPLE */

    --honey-flower-orange: #674172;
    --rebeccapurple-orange: #663399;
    --studio-orange: #8e44ad;
    --electric-indigo-orange: #8c14fc;
    --seance-orange: #9a12b3;
    --plum-orange: #913d88;
    --medium-red-violet-orange: #963694;
    --medium-purple-orange: #bf55ec;
    --electric-purple-orange: #a537fd;
    --light-slate-blue-orange: #9f5afd;
    --wisteria-orange: #9b59b6;
    --scampi-orange: #736598;
    --lavender-purple-orange: #947cb0;
    --ce-soir-orange: #a96dad;
    --light-wisteria-orange: #be90d4;
    --wistful-orange: #aea8d3;
    --mauve-orange: #d5b8ff;
    --snuff-orange: #dcc6e0;
    --blue-chalk-orange: #f1e7fe;

    /* MISC TRANS */
    /* BLACKEST */
    --black: rgba(0,0,0, 1);
    --black-transparent: rgba(0,0,0, .7);
    --black-light-transparent: rgba(0,0,0, .4);
    --black-lighten-transparent: rgba(0,0,0, .3);
    --black-lighter-transparent: rgba(0,0,0, .2);
    --black-lightest-transparent: rgba(0,0,0, .1);

    /* WHITEST */
    --white-lightest-transparent: rgba(255,255,255, .1);
    --white-lighter-transparent: rgba(255,255,255, .2);
    --white-lighten-transparent: rgba(255,255,255, .3);
    --white-light-transparent: rgba(255,255,255, .4);
    --white-transparent: rgba(255,255,255, .7);
    --white: rgba(255,255,255, 1);

    /* SHADOW */
    --black-safe-box-shadow-darker: 0 2px 2px var(--black-lighter-transparent);
    --black-safe-box-shadow: 0 2px 2px var(--black-lightest-transparent);
}