adding some variables for colors

This commit is contained in:
Brian 2023-03-27 10:20:41 -06:00
parent 56cef79880
commit 2ac78ef539
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8

View File

@ -1,3 +1,108 @@
:root {
/**/
/** ------------------------------
* START -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f
* -------------------------------**/
/* CSS HEX */
--prussian-blue: #022f40ff;
--pacific-cyan: #38aeccff;
--blue-ncs: #0090c1ff;
--prussian-blue-2: #183446ff;
--cerulean: #046e8fff;
/* CSS HSL */
--prussian-blue: hsla(196, 94%, 13%, 1);
--pacific-cyan: hsla(192, 59%, 51%, 1);
--blue-ncs: hsla(195, 100%, 38%, 1);
--prussian-blue-2: hsla(203, 49%, 18%, 1);
--cerulean: hsla(194, 95%, 29%, 1);
/* SCSS HEX */
$prussian-blue: #022f40ff;
$pacific-cyan: #38aeccff;
$blue-ncs: #0090c1ff;
$prussian-blue-2: #183446ff;
$cerulean: #046e8fff;
/* SCSS HSL */
$prussian-blue: hsla(196, 94%, 13%, 1);
$pacific-cyan: hsla(192, 59%, 51%, 1);
$blue-ncs: hsla(195, 100%, 38%, 1);
$prussian-blue-2: hsla(203, 49%, 18%, 1);
$cerulean: hsla(194, 95%, 29%, 1);
/* SCSS RGB */
$prussian-blue: rgba(2, 47, 64, 1);
$pacific-cyan: rgba(56, 174, 204, 1);
$blue-ncs: rgba(0, 144, 193, 1);
$prussian-blue-2: rgba(24, 52, 70, 1);
$cerulean: rgba(4, 110, 143, 1);
/* SCSS Gradient */
/*$gradient-top: linear-gradient(0deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-right: linear-gradient(90deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-bottom: linear-gradient(180deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-left: linear-gradient(270deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-top-right: linear-gradient(45deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-bottom-right: linear-gradient(135deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-top-left: linear-gradient(225deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-bottom-left: linear-gradient(315deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/*$gradient-radial: radial-gradient(#022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
/** ------------------------------
* END -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f
* -------------------------------**/
/** ------------------------------
* START -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff
* -------------------------------**/
/* CSS HEX */
--pistachio: #8ac482ff;
--fern-green: #47783fff;
--peach: #ffbe86ff;
--cherry-blossom-pink: #ffb5c2ff;
--blue-crayola: #3777ffff;
/* CSS HSL */
--pistachio: hsla(113, 36%, 64%, 1);
--fern-green: hsla(112, 31%, 36%, 1);
--peach: hsla(28, 100%, 76%, 1);
--cherry-blossom-pink: hsla(349, 100%, 85%, 1);
--blue-crayola: hsla(221, 100%, 61%, 1);
/* SCSS HEX */
$pistachio: #8ac482ff;
$fern-green: #47783fff;
$peach: #ffbe86ff;
$cherry-blossom-pink: #ffb5c2ff;
$blue-crayola: #3777ffff;
/* SCSS HSL */
$pistachio: hsla(113, 36%, 64%, 1);
$fern-green: hsla(112, 31%, 36%, 1);
$peach: hsla(28, 100%, 76%, 1);
$cherry-blossom-pink: hsla(349, 100%, 85%, 1);
$blue-crayola: hsla(221, 100%, 61%, 1);
/* SCSS RGB */
$pistachio: rgba(138, 196, 130, 1);
$fern-green: rgba(71, 120, 63, 1);
$peach: rgba(255, 190, 134, 1);
$cherry-blossom-pink: rgba(255, 181, 194, 1);
$blue-crayola: rgba(55, 119, 255, 1);
/* SCSS Gradient */
/*$gradient-top: linear-gradient(0deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-right: linear-gradient(90deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-bottom: linear-gradient(180deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-left: linear-gradient(270deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-top-right: linear-gradient(45deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-bottom-right: linear-gradient(135deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-top-left: linear-gradient(225deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-bottom-left: linear-gradient(315deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/*$gradient-radial: radial-gradient(#8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
/** ------------------------------
* END -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff
* -------------------------------**/
}