Create palette.css

css/palette.css

@@ -0,0 +1,45 @@
+/* CSS HEX */
+--malachite: #04e762ff;
+--selective-yellow: #f5b700ff;
+--celestial-blue: #00a1e4ff;
+--mexican-pink: #dc0073ff;
+--chartreuse: #89fc00ff;
+
+/* CSS HSL */
+--malachite: hsla(145, 97%, 46%, 1);
+--selective-yellow: hsla(45, 100%, 48%, 1);
+--celestial-blue: hsla(198, 100%, 45%, 1);
+--mexican-pink: hsla(329, 100%, 43%, 1);
+--chartreuse: hsla(87, 100%, 49%, 1);
+
+/* SCSS HEX */
+$malachite: #04e762ff;
+$selective-yellow: #f5b700ff;
+$celestial-blue: #00a1e4ff;
+$mexican-pink: #dc0073ff;
+$chartreuse: #89fc00ff;
+
+/* SCSS HSL */
+$malachite: hsla(145, 97%, 46%, 1);
+$selective-yellow: hsla(45, 100%, 48%, 1);
+$celestial-blue: hsla(198, 100%, 45%, 1);
+$mexican-pink: hsla(329, 100%, 43%, 1);
+$chartreuse: hsla(87, 100%, 49%, 1);
+
+/* SCSS RGB */
+$malachite: rgba(4, 231, 98, 1);
+$selective-yellow: rgba(245, 183, 0, 1);
+$celestial-blue: rgba(0, 161, 228, 1);
+$mexican-pink: rgba(220, 0, 115, 1);
+$chartreuse: rgba(137, 252, 0, 1);
+
+/* SCSS Gradient */
+$gradient-top: linear-gradient(0deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-right: linear-gradient(90deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-bottom: linear-gradient(180deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-left: linear-gradient(270deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-top-right: linear-gradient(45deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-bottom-right: linear-gradient(135deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-top-left: linear-gradient(225deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-bottom-left: linear-gradient(315deg, #04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);
+$gradient-radial: radial-gradient(#04e762ff, #f5b700ff, #00a1e4ff, #dc0073ff, #89fc00ff);