-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpalette.scss
57 lines (51 loc) · 2.41 KB
/
palette.scss
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
57
/* Coolors Exported Palette - https://coolors.co/ff0a7c-e93799-d264b6-a480cf-779be7-49b6ff-5abdff */
/* CSS HEX */
--winter-sky: #ff0a7cff;
--pink-pantone: #e93799ff;
--sky-magenta: #d264b6ff;
--lavender-floral: #a480cfff;
--cornflower-blue: #779be7ff;
--blue-jeans: #49b6ffff;
--maya-blue: #5abdffff;
/* CSS HSL */
--winter-sky: hsla(332, 100%, 52%, 1);
--pink-pantone: hsla(327, 80%, 56%, 1);
--sky-magenta: hsla(315, 55%, 61%, 1);
--lavender-floral: hsla(267, 45%, 66%, 1);
--cornflower-blue: hsla(221, 70%, 69%, 1);
--blue-jeans: hsla(204, 100%, 64%, 1);
--maya-blue: hsla(204, 100%, 68%, 1);
/* SCSS HEX */
$winter-sky: #ff0a7cff;
$pink-pantone: #e93799ff;
$sky-magenta: #d264b6ff;
$lavender-floral: #a480cfff;
$cornflower-blue: #779be7ff;
$blue-jeans: #49b6ffff;
$maya-blue: #5abdffff;
/* SCSS HSL */
$winter-sky: hsla(332, 100%, 52%, 1);
$pink-pantone: hsla(327, 80%, 56%, 1);
$sky-magenta: hsla(315, 55%, 61%, 1);
$lavender-floral: hsla(267, 45%, 66%, 1);
$cornflower-blue: hsla(221, 70%, 69%, 1);
$blue-jeans: hsla(204, 100%, 64%, 1);
$maya-blue: hsla(204, 100%, 68%, 1);
/* SCSS RGB */
$winter-sky: rgba(255, 10, 124, 1);
$pink-pantone: rgba(233, 55, 153, 1);
$sky-magenta: rgba(210, 100, 182, 1);
$lavender-floral: rgba(164, 128, 207, 1);
$cornflower-blue: rgba(119, 155, 231, 1);
$blue-jeans: rgba(73, 182, 255, 1);
$maya-blue: rgba(90, 189, 255, 1);
/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-right: linear-gradient(90deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-bottom: linear-gradient(180deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-left: linear-gradient(270deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-top-right: linear-gradient(45deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-bottom-right: linear-gradient(135deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-top-left: linear-gradient(225deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-bottom-left: linear-gradient(315deg, #ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);
$gradient-radial: radial-gradient(#ff0a7cff, #e93799ff, #d264b6ff, #a480cfff, #779be7ff, #49b6ffff, #5abdffff);