Take Five

CSS

:root {
  --take-five: #b3c9d3;
  --take-five-rgb: 179 201 211;
  --take-five-oklch: oklch(0.822 0.028 226.8);
}

.element {
  color: var(--take-five);
  background-color: hsl(199 27% 76%);
  border-color: oklch(0.822 0.028 226.8);
}

Tailwind CSS v4

@theme {
  --color-take-five: #b3c9d3;
  --color-take-five-50: #edf7fc;
  --color-take-five-100: #dfeaef;
  --color-take-five-200: #c9d7de;
  --color-take-five-300: #aabac3;
  --color-take-five-400: #8ea2ab;
  --color-take-five-500: #738a95;
  --color-take-five-600: #62757e;
  --color-take-five-700: #4e5e65;
  --color-take-five-800: #38454a;
  --color-take-five-900: #272f33;
  --color-take-five-950: #151c1f;
}

SCSS

$take-five: #b3c9d3;
$take-five-rgb: 179, 201, 211;
$take-five-light: mix(#fff, $take-five, 20%);
$take-five-dark: mix(#000, $take-five, 20%);

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