Pelican Pink

CSS

:root {
  --pelican-pink: #e2a695;
  --pelican-pink-rgb: 226 166 149;
  --pelican-pink-oklch: oklch(0.777 0.075 36.4);
}

.element {
  color: var(--pelican-pink);
  background-color: hsl(13 57% 74%);
  border-color: oklch(0.777 0.075 36.4);
}

Tailwind CSS v4

@theme {
  --color-pelican-pink: #e2a695;
  --color-pelican-pink-50: #ffeee6;
  --color-pelican-pink-100: #ffe0d6;
  --color-pelican-pink-200: #f2cabd;
  --color-pelican-pink-300: #dbab9c;
  --color-pelican-pink-400: #c68f7f;
  --color-pelican-pink-500: #b27463;
  --color-pelican-pink-600: #966254;
  --color-pelican-pink-700: #794f43;
  --color-pelican-pink-800: #593931;
  --color-pelican-pink-900: #3f2721;
  --color-pelican-pink-950: #281510;
}

SCSS

$pelican-pink: #e2a695;
$pelican-pink-rgb: 226, 166, 149;
$pelican-pink-light: mix(#fff, $pelican-pink, 20%);
$pelican-pink-dark: mix(#000, $pelican-pink, 20%);

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