Nursery Wall

CSS

:root {
  --nursery-wall: #9ebcb7;
  --nursery-wall-rgb: 158 188 183;
  --nursery-wall-oklch: oklch(0.771 0.033 184.3);
}

.element {
  color: var(--nursery-wall);
  background-color: hsl(170 18% 68%);
  border-color: oklch(0.771 0.033 184.3);
}

Tailwind CSS v4

@theme {
  --color-nursery-wall: #9ebcb7;
  --color-nursery-wall-50: #ebf8f6;
  --color-nursery-wall-100: #dcece9;
  --color-nursery-wall-200: #c5d9d6;
  --color-nursery-wall-300: #a5bdba;
  --color-nursery-wall-400: #89a5a1;
  --color-nursery-wall-500: #6e8e89;
  --color-nursery-wall-600: #5d7874;
  --color-nursery-wall-700: #4a605c;
  --color-nursery-wall-800: #364643;
  --color-nursery-wall-900: #25312e;
  --color-nursery-wall-950: #131d1b;
}

SCSS

$nursery-wall: #9ebcb7;
$nursery-wall-rgb: 158, 188, 183;
$nursery-wall-light: mix(#fff, $nursery-wall, 20%);
$nursery-wall-dark: mix(#000, $nursery-wall, 20%);

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