Bleached Coral

CSS

:root {
  --bleached-coral: #ffd6d1;
  --bleached-coral-rgb: 255 214 209;
  --bleached-coral-oklch: oklch(0.909 0.047 26.2);
}

.element {
  color: var(--bleached-coral);
  background-color: hsl(7 100% 91%);
  border-color: oklch(0.909 0.047 26.2);
}

Tailwind CSS v4

@theme {
  --color-bleached-coral: #ffd6d1;
  --color-bleached-coral-50: #fff0ee;
  --color-bleached-coral-100: #f7e2df;
  --color-bleached-coral-200: #e8cdc9;
  --color-bleached-coral-300: #ceafaa;
  --color-bleached-coral-400: #b99490;
  --color-bleached-coral-500: #a37b76;
  --color-bleached-coral-600: #8a6864;
  --color-bleached-coral-700: #6e5350;
  --color-bleached-coral-800: #523c3a;
  --color-bleached-coral-900: #392928;
  --color-bleached-coral-950: #231716;
}

SCSS

$bleached-coral: #ffd6d1;
$bleached-coral-rgb: 255, 214, 209;
$bleached-coral-light: mix(#fff, $bleached-coral, 20%);
$bleached-coral-dark: mix(#000, $bleached-coral, 20%);

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