styleColors.scss
2.23 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
/* Coolors Exported Palette - https://coolors.co/f94144-f3722c-f8961e-f9c74f-90be6d-43aa8b-577590-202931 */
/* CSS */
--color1: hsla(359, 74%, 98%, 1);
--color2: hsla(21, 82%, 95%, 1);
--color3: hsla(33, 88%, 97%, 1);
--color4: hsla(42, 68%, 98%, 1);
--color5: hsla(94, 43%, 75%, 1);
--color6: hsla(162, 61%, 67%, 1);
--color7: hsla(208, 40%, 56%, 1);
--color8: hsla(208, 35%, 19%, 1);
/* HEX */
$color1: #f94144ff;
$color2: #f3722cff;
$color3: #f8961eff;
$color4: #f9c74fff;
$color5: #90be6dff;
$color6: #43aa8bff;
$color7: #577590ff;
$color8: #202931ff;
/* HSL */
$color1: hsla(359, 74%, 98%, 1);
$color2: hsla(21, 82%, 95%, 1);
$color3: hsla(33, 88%, 97%, 1);
$color4: hsla(42, 68%, 98%, 1);
$color5: hsla(94, 43%, 75%, 1);
$color6: hsla(162, 61%, 67%, 1);
$color7: hsla(208, 40%, 56%, 1);
$color8: hsla(208, 35%, 19%, 1);
/* RGB */
$color1: rgba(249, 65, 68, 1);
$color2: rgba(243, 114, 44, 1);
$color3: rgba(248, 150, 30, 1);
$color4: rgba(249, 199, 79, 1);
$color5: rgba(144, 190, 109, 1);
$color6: rgba(67, 170, 139, 1);
$color7: rgba(87, 117, 144, 1);
$color8: rgba(32, 41, 49, 1);
/* GRADIENT */
$gradient-top: linear-gradient(0deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-right: linear-gradient(90deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-bottom: linear-gradient(180deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-left: linear-gradient(270deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-top-right: linear-gradient(45deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-bottom-right: linear-gradient(135deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-top-left: linear-gradient(225deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-bottom-left: linear-gradient(315deg, #f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);
$gradient-radial: radial-gradient(#f94144ff, #f3722cff, #f8961eff, #f9c74fff, #90be6dff, #43aa8bff, #577590ff, #202931ff);