Petit Four

CSS

:root {
  --petit-four: #7fbad1;
  --petit-four-rgb: 127 186 209;
  --petit-four-oklch: oklch(0.757 0.069 224.4);
}

.element {
  color: var(--petit-four);
  background-color: hsl(197 47% 66%);
  border-color: oklch(0.757 0.069 224.4);
}

Tailwind CSS v4

@theme {
  --color-petit-four: #7fbad1;
  --color-petit-four-50: #e1faff;
  --color-petit-four-100: #d1edfa;
  --color-petit-four-200: #b6dbeb;
  --color-petit-four-300: #92bfd3;
  --color-petit-four-400: #70a8bd;
  --color-petit-four-500: #4f90a8;
  --color-petit-four-600: #447a8e;
  --color-petit-four-700: #366272;
  --color-petit-four-800: #254854;
  --color-petit-four-900: #19323a;
  --color-petit-four-950: #091e24;
}

SCSS

$petit-four: #7fbad1;
$petit-four-rgb: 127, 186, 209;
$petit-four-light: mix(#fff, $petit-four, 20%);
$petit-four-dark: mix(#000, $petit-four, 20%);

.element {
  color: $petit-four;
  box-shadow: 0 0 0 2px rgba($petit-four, 0.35);
}