Constant Coral

CSS

:root {
  --constant-coral: #cd8e7f;
  --constant-coral-rgb: 205 142 127;
  --constant-coral-oklch: oklch(0.705 0.08 33.9);
}

.element {
  color: var(--constant-coral);
  background-color: hsl(12 44% 65%);
  border-color: oklch(0.705 0.08 33.9);
}

Tailwind CSS v4

@theme {
  --color-constant-coral: #cd8e7f;
  --color-constant-coral-50: #ffeee6;
  --color-constant-coral-100: #ffdfd6;
  --color-constant-coral-200: #f4c9bd;
  --color-constant-coral-300: #dda99b;
  --color-constant-coral-400: #c98d7f;
  --color-constant-coral-500: #b57262;
  --color-constant-coral-600: #996154;
  --color-constant-coral-700: #7b4d43;
  --color-constant-coral-800: #5b3831;
  --color-constant-coral-900: #402621;
  --color-constant-coral-950: #281410;
}

SCSS

$constant-coral: #cd8e7f;
$constant-coral-rgb: 205, 142, 127;
$constant-coral-light: mix(#fff, $constant-coral, 20%);
$constant-coral-dark: mix(#000, $constant-coral, 20%);

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