Silk for the Gods

CSS

:root {
  --silk-for-the-gods: #ecddc9;
  --silk-for-the-gods-rgb: 236 221 201;
  --silk-for-the-gods-oklch: oklch(0.904 0.031 75.2);
}

.element {
  color: var(--silk-for-the-gods);
  background-color: hsl(34 48% 86%);
  border-color: oklch(0.904 0.031 75.2);
}

Tailwind CSS v4

@theme {
  --color-silk-for-the-gods: #ecddc9;
  --color-silk-for-the-gods-50: #faf4eb;
  --color-silk-for-the-gods-100: #eee7dd;
  --color-silk-for-the-gods-200: #dcd3c6;
  --color-silk-for-the-gods-300: #c1b6a6;
  --color-silk-for-the-gods-400: #aa9c8a;
  --color-silk-for-the-gods-500: #93846f;
  --color-silk-for-the-gods-600: #7c6f5e;
  --color-silk-for-the-gods-700: #63594b;
  --color-silk-for-the-gods-800: #494137;
  --color-silk-for-the-gods-900: #332d25;
  --color-silk-for-the-gods-950: #1e1a14;
}

SCSS

$silk-for-the-gods: #ecddc9;
$silk-for-the-gods-rgb: 236, 221, 201;
$silk-for-the-gods-light: mix(#fff, $silk-for-the-gods, 20%);
$silk-for-the-gods-dark: mix(#000, $silk-for-the-gods, 20%);

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