Coral Banks

CSS

:root {
  --coral-banks: #da8c87;
  --coral-banks-rgb: 218 140 135;
  --coral-banks-oklch: oklch(0.719 0.096 23.7);
}

.element {
  color: var(--coral-banks);
  background-color: hsl(4 53% 69%);
  border-color: oklch(0.719 0.096 23.7);
}

Tailwind CSS v4

@theme {
  --color-coral-banks: #da8c87;
  --color-coral-banks-50: #ffebe7;
  --color-coral-banks-100: #ffdcd7;
  --color-coral-banks-200: #fbc5bf;
  --color-coral-banks-300: #e5a59e;
  --color-coral-banks-400: #d18883;
  --color-coral-banks-500: #be6b67;
  --color-coral-banks-600: #a05b57;
  --color-coral-banks-700: #814946;
  --color-coral-banks-800: #5f3433;
  --color-coral-banks-900: #432423;
  --color-coral-banks-950: #2b1212;
}

SCSS

$coral-banks: #da8c87;
$coral-banks-rgb: 218, 140, 135;
$coral-banks-light: mix(#fff, $coral-banks, 20%);
$coral-banks-dark: mix(#000, $coral-banks, 20%);

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