cool-colors-bro.css

/* CSS HEX */
--dark-violet: #9424ccff;
--persian-indigo: #3d197bff;
--bronze: #cd7f0aff;
--electric-purple: #ad3fe4ff;
--fuchsia: #ff24f0ff;
--maya-blue: #82c1edff;
--chefchaouen-blue: #4487e4ff;

/* CSS HSL */
--dark-violet: hsla(280, 70%, 47%, 1);
--persian-indigo: hsla(262, 66%, 29%, 1);
--bronze: hsla(36, 91%, 42%, 1);
--electric-purple: hsla(280, 75%, 57%, 1);
--fuchsia: hsla(304, 100%, 57%, 1);
--maya-blue: hsla(205, 75%, 72%, 1);
--chefchaouen-blue: hsla(215, 75%, 58%, 1);

/* SCSS HEX */
$dark-violet: #9424ccff;
$persian-indigo: #3d197bff;
$bronze: #cd7f0aff;
$electric-purple: #ad3fe4ff;
$fuchsia: #ff24f0ff;
$maya-blue: #82c1edff;
$chefchaouen-blue: #4487e4ff;

/* SCSS HSL */
$dark-violet: hsla(280, 70%, 47%, 1);
$persian-indigo: hsla(262, 66%, 29%, 1);
$bronze: hsla(36, 91%, 42%, 1);
$electric-purple: hsla(280, 75%, 57%, 1);
$fuchsia: hsla(304, 100%, 57%, 1);
$maya-blue: hsla(205, 75%, 72%, 1);
$chefchaouen-blue: hsla(215, 75%, 58%, 1);

/* SCSS RGB */
$dark-violet: rgba(148, 36, 204, 1);
$persian-indigo: rgba(61, 25, 123, 1);
$bronze: rgba(205, 127, 10, 1);
$electric-purple: rgba(173, 63, 228, 1);
$fuchsia: rgba(255, 36, 240, 1);
$maya-blue: rgba(130, 193, 237, 1);
$chefchaouen-blue: rgba(68, 135, 228, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-right: linear-gradient(90deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-bottom: linear-gradient(180deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-left: linear-gradient(270deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-top-right: linear-gradient(45deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-bottom-right: linear-gradient(135deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-top-left: linear-gradient(225deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-bottom-left: linear-gradient(315deg, #9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);
$gradient-radial: radial-gradient(#9424ccff, #3d197bff, #cd7f0aff, #ad3fe4ff, #ff24f0ff, #82c1edff, #4487e4ff);