Beyond the Wall

CSS

:root {
  --beyond-the-wall: #d7e0eb;
  --beyond-the-wall-rgb: 215 224 235;
  --beyond-the-wall-oklch: oklch(0.903 0.018 253.3);
}

.element {
  color: var(--beyond-the-wall);
  background-color: hsl(213 33% 88%);
  border-color: oklch(0.903 0.018 253.3);
}

Tailwind CSS v4

@theme {
  --color-beyond-the-wall: #d7e0eb;
  --color-beyond-the-wall-50: #f2f5fa;
  --color-beyond-the-wall-100: #e4e8ee;
  --color-beyond-the-wall-200: #cfd5dc;
  --color-beyond-the-wall-300: #b1b8c1;
  --color-beyond-the-wall-400: #979fa9;
  --color-beyond-the-wall-500: #7e8792;
  --color-beyond-the-wall-600: #6b727c;
  --color-beyond-the-wall-700: #555b63;
  --color-beyond-the-wall-800: #3e4349;
  --color-beyond-the-wall-900: #2b2e32;
  --color-beyond-the-wall-950: #181b1e;
}

SCSS

$beyond-the-wall: #d7e0eb;
$beyond-the-wall-rgb: 215, 224, 235;
$beyond-the-wall-light: mix(#fff, $beyond-the-wall, 20%);
$beyond-the-wall-dark: mix(#000, $beyond-the-wall, 20%);

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