Sense of Wonder

CSS

:root {
  --sense-of-wonder: #edb159;
  --sense-of-wonder-rgb: 237 177 89;
  --sense-of-wonder-oklch: oklch(0.799 0.126 74.7);
}

.element {
  color: var(--sense-of-wonder);
  background-color: hsl(36 80% 64%);
  border-color: oklch(0.799 0.126 74.7);
}

Tailwind CSS v4

@theme {
  --color-sense-of-wonder: #edb159;
  --color-sense-of-wonder-50: #fff1ce;
  --color-sense-of-wonder-100: #ffe3b9;
  --color-sense-of-wonder-200: #f3ce97;
  --color-sense-of-wonder-300: #dcaf6b;
  --color-sense-of-wonder-400: #ca933f;
  --color-sense-of-wonder-500: #b67700;
  --color-sense-of-wonder-600: #9a6500;
  --color-sense-of-wonder-700: #7b5100;
  --color-sense-of-wonder-800: #5c3a00;
  --color-sense-of-wonder-900: #412801;
  --color-sense-of-wonder-950: #291600;
}

SCSS

$sense-of-wonder: #edb159;
$sense-of-wonder-rgb: 237, 177, 89;
$sense-of-wonder-light: mix(#fff, $sense-of-wonder, 20%);
$sense-of-wonder-dark: mix(#000, $sense-of-wonder, 20%);

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