Skip to content

Instantly share code, notes, and snippets.

@ccampanale
Created December 7, 2023 17:10
Show Gist options
  • Save ccampanale/8c9c99394392b8c34a1a4ce321d61dce to your computer and use it in GitHub Desktop.
Save ccampanale/8c9c99394392b8c34a1a4ce321d61dce to your computer and use it in GitHub Desktop.
Monarch Color Palette
/* 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment