Speak to Me

CSS

:root {
  --speak-to-me: #ffd9a6;
  --speak-to-me-rgb: 255 217 166;
  --speak-to-me-oklch: oklch(0.905 0.078 74.7);
}

.element {
  color: var(--speak-to-me);
  background-color: hsl(34 100% 83%);
  border-color: oklch(0.905 0.078 74.7);
}

Tailwind CSS v4

@theme {
  --color-speak-to-me: #ffd9a6;
  --color-speak-to-me-50: #fff3dd;
  --color-speak-to-me-100: #f7e5cc;
  --color-speak-to-me-200: #e8d1b0;
  --color-speak-to-me-300: #ceb38b;
  --color-speak-to-me-400: #ba986a;
  --color-speak-to-me-500: #a57e48;
  --color-speak-to-me-600: #8b6b3e;
  --color-speak-to-me-700: #705631;
  --color-speak-to-me-800: #533e23;
  --color-speak-to-me-900: #3a2b17;
  --color-speak-to-me-950: #241808;
}

SCSS

$speak-to-me: #ffd9a6;
$speak-to-me-rgb: 255, 217, 166;
$speak-to-me-light: mix(#fff, $speak-to-me, 20%);
$speak-to-me-dark: mix(#000, $speak-to-me, 20%);

.element {
  color: $speak-to-me;
  box-shadow: 0 0 0 2px rgba($speak-to-me, 0.35);
}