Coral Dust

CSS

:root {
  --coral-dust: #edaa86;
  --coral-dust-rgb: 237 170 134;
  --coral-dust-oklch: oklch(0.793 0.093 49.2);
}

.element {
  color: var(--coral-dust);
  background-color: hsl(21 74% 73%);
  border-color: oklch(0.793 0.093 49.2);
}

Tailwind CSS v4

@theme {
  --color-coral-dust: #edaa86;
  --color-coral-dust-50: #ffeede;
  --color-coral-dust-100: #ffe0cc;
  --color-coral-dust-200: #f6cab1;
  --color-coral-dust-300: #dfaa8c;
  --color-coral-dust-400: #cc8e6d;
  --color-coral-dust-500: #b8734c;
  --color-coral-dust-600: #9b6141;
  --color-coral-dust-700: #7d4e34;
  --color-coral-dust-800: #5d3825;
  --color-coral-dust-900: #412619;
  --color-coral-dust-950: #29140a;
}

SCSS

$coral-dust: #edaa86;
$coral-dust-rgb: 237, 170, 134;
$coral-dust-light: mix(#fff, $coral-dust, 20%);
$coral-dust-dark: mix(#000, $coral-dust, 20%);

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