New Orleans

CSS

:root {
  --new-orleans: #e4c385;
  --new-orleans-rgb: 228 195 133;
  --new-orleans-oklch: oklch(0.832 0.088 82.7);
}

.element {
  color: var(--new-orleans);
  background-color: hsl(39 64% 71%);
  border-color: oklch(0.832 0.088 82.7);
}

Tailwind CSS v4

@theme {
  --color-new-orleans: #e4c385;
  --color-new-orleans-50: #fff4d9;
  --color-new-orleans-100: #f6e6c7;
  --color-new-orleans-200: #e6d2aa;
  --color-new-orleans-300: #ccb484;
  --color-new-orleans-400: #b89a60;
  --color-new-orleans-500: #a3803b;
  --color-new-orleans-600: #896d34;
  --color-new-orleans-700: #6e5729;
  --color-new-orleans-800: #523f1c;
  --color-new-orleans-900: #392b12;
  --color-new-orleans-950: #231905;
}

SCSS

$new-orleans: #e4c385;
$new-orleans-rgb: 228, 195, 133;
$new-orleans-light: mix(#fff, $new-orleans, 20%);
$new-orleans-dark: mix(#000, $new-orleans, 20%);

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