Blue Chiffon

CSS

:root {
  --blue-chiffon: #70a6b8;
  --blue-chiffon-rgb: 112 166 184;
  --blue-chiffon-oklch: oklch(0.694 0.063 220.8);
}

.element {
  color: var(--blue-chiffon);
  background-color: hsl(195 34% 58%);
  border-color: oklch(0.694 0.063 220.8);
}

Tailwind CSS v4

@theme {
  --color-blue-chiffon: #70a6b8;
  --color-blue-chiffon-50: #e3faff;
  --color-blue-chiffon-100: #d2edf7;
  --color-blue-chiffon-200: #b8dbe8;
  --color-blue-chiffon-300: #95bfcf;
  --color-blue-chiffon-400: #74a7b9;
  --color-blue-chiffon-500: #5490a3;
  --color-blue-chiffon-600: #487a8a;
  --color-blue-chiffon-700: #39616f;
  --color-blue-chiffon-800: #284851;
  --color-blue-chiffon-900: #1b3238;
  --color-blue-chiffon-950: #0b1e23;
}

SCSS

$blue-chiffon: #70a6b8;
$blue-chiffon-rgb: 112, 166, 184;
$blue-chiffon-light: mix(#fff, $blue-chiffon, 20%);
$blue-chiffon-dark: mix(#000, $blue-chiffon, 20%);

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