Coral Reef

CSS

:root {
  --coral-reef: #c7bca2;
  --coral-reef-rgb: 199 188 162;
  --coral-reef-oklch: oklch(0.797 0.038 87.8);
}

.element {
  color: var(--coral-reef);
  background-color: hsl(42 25% 71%);
  border-color: oklch(0.797 0.038 87.8);
}

Tailwind CSS v4

@theme {
  --color-coral-reef: #c7bca2;
  --color-coral-reef-50: #f9f5e9;
  --color-coral-reef-100: #ede8da;
  --color-coral-reef-200: #dad4c3;
  --color-coral-reef-300: #bfb7a2;
  --color-coral-reef-400: #a89e86;
  --color-coral-reef-500: #91856a;
  --color-coral-reef-600: #7a715a;
  --color-coral-reef-700: #625a48;
  --color-coral-reef-800: #484234;
  --color-coral-reef-900: #322d23;
  --color-coral-reef-950: #1e1a12;
}

SCSS

$coral-reef: #c7bca2;
$coral-reef-rgb: 199, 188, 162;
$coral-reef-light: mix(#fff, $coral-reef, 20%);
$coral-reef-dark: mix(#000, $coral-reef, 20%);

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