Weathered Coral

CSS

:root {
  --weathered-coral: #ead0a9;
  --weathered-coral-rgb: 234 208 169;
  --weathered-coral-oklch: oklch(0.87 0.059 77.8);
}

.element {
  color: var(--weathered-coral);
  background-color: hsl(36 61% 79%);
  border-color: oklch(0.87 0.059 77.8);
}

Tailwind CSS v4

@theme {
  --color-weathered-coral: #ead0a9;
  --color-weathered-coral-50: #fef4e3;
  --color-weathered-coral-100: #f3e6d2;
  --color-weathered-coral-200: #e2d2b9;
  --color-weathered-coral-300: #c8b596;
  --color-weathered-coral-400: #b29b77;
  --color-weathered-coral-500: #9c8259;
  --color-weathered-coral-600: #846e4c;
  --color-weathered-coral-700: #6a583c;
  --color-weathered-coral-800: #4e402b;
  --color-weathered-coral-900: #362c1d;
  --color-weathered-coral-950: #21190d;
}

SCSS

$weathered-coral: #ead0a9;
$weathered-coral-rgb: 234, 208, 169;
$weathered-coral-light: mix(#fff, $weathered-coral, 20%);
$weathered-coral-dark: mix(#000, $weathered-coral, 20%);

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