Coral Wisp

CSS

:root {
  --coral-wisp: #feb890;
  --coral-wisp-rgb: 254 184 144;
  --coral-wisp-oklch: oklch(0.839 0.097 50.7);
}

.element {
  color: var(--coral-wisp);
  background-color: hsl(22 98% 78%);
  border-color: oklch(0.839 0.097 50.7);
}

Tailwind CSS v4

@theme {
  --color-coral-wisp: #feb890;
  --color-coral-wisp-50: #ffeedc;
  --color-coral-wisp-100: #ffe0ca;
  --color-coral-wisp-200: #f7caae;
  --color-coral-wisp-300: #e0aa89;
  --color-coral-wisp-400: #cd8e69;
  --color-coral-wisp-500: #b97247;
  --color-coral-wisp-600: #9c613d;
  --color-coral-wisp-700: #7e4d30;
  --color-coral-wisp-800: #5d3823;
  --color-coral-wisp-900: #422617;
  --color-coral-wisp-950: #2a1408;
}

SCSS

$coral-wisp: #feb890;
$coral-wisp-rgb: 254, 184, 144;
$coral-wisp-light: mix(#fff, $coral-wisp, 20%);
$coral-wisp-dark: mix(#000, $coral-wisp, 20%);

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