Essentially Bright

CSS

:root {
  --essentially-bright: #ffde9f;
  --essentially-bright-rgb: 255 222 159;
  --essentially-bright-oklch: oklch(0.914 0.088 83.2);
}

.element {
  color: var(--essentially-bright);
  background-color: hsl(39 100% 81%);
  border-color: oklch(0.914 0.088 83.2);
}

Tailwind CSS v4

@theme {
  --color-essentially-bright: #ffde9f;
  --color-essentially-bright-50: #fff4d9;
  --color-essentially-bright-100: #f5e6c7;
  --color-essentially-bright-200: #e5d2aa;
  --color-essentially-bright-300: #ccb584;
  --color-essentially-bright-400: #b89a61;
  --color-essentially-bright-500: #a2813b;
  --color-essentially-bright-600: #896d34;
  --color-essentially-bright-700: #6e5729;
  --color-essentially-bright-800: #523f1c;
  --color-essentially-bright-900: #392b12;
  --color-essentially-bright-950: #231905;
}

SCSS

$essentially-bright: #ffde9f;
$essentially-bright-rgb: 255, 222, 159;
$essentially-bright-light: mix(#fff, $essentially-bright, 20%);
$essentially-bright-dark: mix(#000, $essentially-bright, 20%);

.element {
  color: $essentially-bright;
  box-shadow: 0 0 0 2px rgba($essentially-bright, 0.35);
}