adding some variables for colors
This commit is contained in:
parent
56cef79880
commit
2ac78ef539
@ -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
|
||||
* -------------------------------**/
|
||||
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user