Monarch Color Palette

monarch.palette.css

/* CSS HEX */
--cyan-rgb: #00FFFFff;
--vivid-sky-blue: #03C6FFff;
--dodger-blue: #058FFFff;
--risd-blue: #0855FFff;
--black: #000000ff;

/* CSS HSL */
--cyan-rgb: hsla(180, 100%, 50%, 1);
--vivid-sky-blue: hsla(194, 100%, 51%, 1);
--dodger-blue: hsla(207, 100%, 51%, 1);
--risd-blue: hsla(221, 100%, 52%, 1);
--black: hsla(0, 0%, 0%, 1);

/* SCSS HEX */
$cyan-rgb: #00FFFFff;
$vivid-sky-blue: #03C6FFff;
$dodger-blue: #058FFFff;
$risd-blue: #0855FFff;
$black: #000000ff;

/* SCSS HSL */
$cyan-rgb: hsla(180, 100%, 50%, 1);
$vivid-sky-blue: hsla(194, 100%, 51%, 1);
$dodger-blue: hsla(207, 100%, 51%, 1);
$risd-blue: hsla(221, 100%, 52%, 1);
$black: hsla(0, 0%, 0%, 1);

/* SCSS RGB */
$cyan-rgb: rgba(0, 255, 255, 1);
$vivid-sky-blue: rgba(3, 198, 255, 1);
$dodger-blue: rgba(5, 143, 255, 1);
$risd-blue: rgba(8, 85, 255, 1);
$black: rgba(0, 0, 0, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-right: linear-gradient(90deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-bottom: linear-gradient(180deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-left: linear-gradient(270deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-top-right: linear-gradient(45deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-bottom-right: linear-gradient(135deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-top-left: linear-gradient(225deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-bottom-left: linear-gradient(315deg, #00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);
$gradient-radial: radial-gradient(#00FFFFff, #03C6FFff, #058FFFff, #0855FFff, #000000ff);