Autumn Wind

CSS

:root {
  --autumn-wind: #fbd1b6;
  --autumn-wind-rgb: 251 209 182;
  --autumn-wind-oklch: oklch(0.89 0.06 54.5);
}

.element {
  color: var(--autumn-wind);
  background-color: hsl(23 90% 85%);
  border-color: oklch(0.89 0.06 54.5);
}

Tailwind CSS v4

@theme {
  --color-autumn-wind: #fbd1b6;
  --color-autumn-wind-50: #fff1e5;
  --color-autumn-wind-100: #f8e3d5;
  --color-autumn-wind-200: #e9cebc;
  --color-autumn-wind-300: #d0b09a;
  --color-autumn-wind-400: #bb967d;
  --color-autumn-wind-500: #a67c60;
  --color-autumn-wind-600: #8c6952;
  --color-autumn-wind-700: #705441;
  --color-autumn-wind-800: #533d2f;
  --color-autumn-wind-900: #3a2a20;
  --color-autumn-wind-950: #24170f;
}

SCSS

$autumn-wind: #fbd1b6;
$autumn-wind-rgb: 251, 209, 182;
$autumn-wind-light: mix(#fff, $autumn-wind, 20%);
$autumn-wind-dark: mix(#000, $autumn-wind, 20%);

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