Caribbean Coral

CSS

:root {
  --caribbean-coral: #c07761;
  --caribbean-coral-rgb: 192 119 97;
  --caribbean-coral-oklch: oklch(0.642 0.098 37.5);
}

.element {
  color: var(--caribbean-coral);
  background-color: hsl(14 43% 57%);
  border-color: oklch(0.642 0.098 37.5);
}

Tailwind CSS v4

@theme {
  --color-caribbean-coral: #c07761;
  --color-caribbean-coral-50: #ffece1;
  --color-caribbean-coral-100: #ffded0;
  --color-caribbean-coral-200: #fac7b5;
  --color-caribbean-coral-300: #e4a792;
  --color-caribbean-coral-400: #d18a74;
  --color-caribbean-coral-500: #bd6e56;
  --color-caribbean-coral-600: #a05d49;
  --color-caribbean-coral-700: #804a3a;
  --color-caribbean-coral-800: #5f352a;
  --color-caribbean-coral-900: #43241c;
  --color-caribbean-coral-950: #2b130d;
}

SCSS

$caribbean-coral: #c07761;
$caribbean-coral-rgb: 192, 119, 97;
$caribbean-coral-light: mix(#fff, $caribbean-coral, 20%);
$caribbean-coral-dark: mix(#000, $caribbean-coral, 20%);

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