Ruins of Civilization

CSS

:root {
  --ruins-of-civilization: #cadece;
  --ruins-of-civilization-rgb: 202 222 206;
  --ruins-of-civilization-oklch: oklch(0.881 0.03 151.5);
}

.element {
  color: var(--ruins-of-civilization);
  background-color: hsl(132 23% 83%);
  border-color: oklch(0.881 0.03 151.5);
}

Tailwind CSS v4

@theme {
  --color-ruins-of-civilization: #cadece;
  --color-ruins-of-civilization-50: #eff8f1;
  --color-ruins-of-civilization-100: #e1ebe3;
  --color-ruins-of-civilization-200: #cbd8ce;
  --color-ruins-of-civilization-300: #acbcb0;
  --color-ruins-of-civilization-400: #92a496;
  --color-ruins-of-civilization-500: #788c7c;
  --color-ruins-of-civilization-600: #667769;
  --color-ruins-of-civilization-700: #515f54;
  --color-ruins-of-civilization-800: #3b453d;
  --color-ruins-of-civilization-900: #29302a;
  --color-ruins-of-civilization-950: #161c17;
}

SCSS

$ruins-of-civilization: #cadece;
$ruins-of-civilization-rgb: 202, 222, 206;
$ruins-of-civilization-light: mix(#fff, $ruins-of-civilization, 20%);
$ruins-of-civilization-dark: mix(#000, $ruins-of-civilization, 20%);

.element {
  color: $ruins-of-civilization;
  box-shadow: 0 0 0 2px rgba($ruins-of-civilization, 0.35);
}