palette.scss
2.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* Coolors Exported Palette - https://coolors.co/f94144-f3722c-f8961e-f9c74f-90be6d-43aa8b-577590-27333d-202931 */
/* CSS */
--tart-orange: hsla(359, 74%, 98%, 1);
--orange-red: hsla(21, 82%, 95%, 1);
--yellow-orange-color-wheel: hsla(33, 88%, 97%, 1);
--maize-crayola: hsla(42, 68%, 98%, 1);
--pistachio: hsla(94, 43%, 75%, 1);
--jungle-green: hsla(162, 61%, 67%, 1);
--queen-blue: hsla(208, 40%, 56%, 1);
--gunmetal: hsla(207, 36%, 24%, 1);
--gunmetal-2: hsla(208, 35%, 19%, 1);
/* SCSS HEX */
$tart-orange: #f94144ff;
$orange-red: #f3722cff;
$yellow-orange-color-wheel: #f8961eff;
$maize-crayola: #f9c74fff;
$pistachio: #90be6dff;
$jungle-green: #43aa8bff;
$queen-blue: #577590ff;
$gunmetal: #27333dff;
$gunmetal-2: #202931ff;
/* SCSS HSL */
$tart-orange: hsla(359, 74%, 98%, 1);
$orange-red: hsla(21, 82%, 95%, 1);
$yellow-orange-color-wheel: hsla(33, 88%, 97%, 1);
$maize-crayola: hsla(42, 68%, 98%, 1);
$pistachio: hsla(94, 43%, 75%, 1);
$jungle-green: hsla(162, 61%, 67%, 1);
$queen-blue: hsla(208, 40%, 56%, 1);
$gunmetal: hsla(207, 36%, 24%, 1);
$gunmetal-2: hsla(208, 35%, 19%, 1);
/* SCSS RGB */
$tart-orange: rgba(249, 65, 68, 1);
$orange-red: rgba(243, 114, 44, 1);
$yellow-orange-color-wheel: rgba(248, 150, 30, 1);
$maize-crayola: rgba(249, 199, 79, 1);
$pistachio: rgba(144, 190, 109, 1);
$jungle-green: rgba(67, 170, 139, 1);
$queen-blue: rgba(87, 117, 144, 1);
$gunmetal: rgba(39, 51, 61, 1);
$gunmetal-2: rgba(32, 41, 49, 1);
/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-right: linear-gradient(90deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-bottom: linear-gradient(180deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-left: linear-gradient(270deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-top-right: linear-gradient(45deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-bottom-right: linear-gradient(135deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-top-left: linear-gradient(225deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-bottom-left: linear-gradient(315deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);
$gradient-radial: radial-gradient(#f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #27333dff, #202931ff);