True Blonde

CSS

:root {
  --true-blonde: #dcc49b;
  --true-blonde-rgb: 220 196 155;
  --true-blonde-oklch: oklch(0.83 0.061 80.9);
}

.element {
  color: var(--true-blonde);
  background-color: hsl(38 48% 74%);
  border-color: oklch(0.83 0.061 80.9);
}

Tailwind CSS v4

@theme {
  --color-true-blonde: #dcc49b;
  --color-true-blonde-50: #fef4e2;
  --color-true-blonde-100: #f2e7d2;
  --color-true-blonde-200: #e1d2b8;
  --color-true-blonde-300: #c7b595;
  --color-true-blonde-400: #b19b76;
  --color-true-blonde-500: #9b8257;
  --color-true-blonde-600: #836e4a;
  --color-true-blonde-700: #69583b;
  --color-true-blonde-800: #4e402a;
  --color-true-blonde-900: #362c1c;
  --color-true-blonde-950: #21190c;
}

SCSS

$true-blonde: #dcc49b;
$true-blonde-rgb: 220, 196, 155;
$true-blonde-light: mix(#fff, $true-blonde, 20%);
$true-blonde-dark: mix(#000, $true-blonde, 20%);

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