Shell Pink

CSS

:root {
  --shell-pink: #f88180;
  --shell-pink-rgb: 248 129 128;
  --shell-pink-oklch: oklch(0.737 0.146 21.7);
}

.element {
  color: var(--shell-pink);
  background-color: hsl(0 90% 74%);
  border-color: oklch(0.737 0.146 21.7);
}

Tailwind CSS v4

@theme {
  --color-shell-pink: #f88180;
  --color-shell-pink-50: #ffe6e1;
  --color-shell-pink-100: #ffd6d1;
  --color-shell-pink-200: #ffbcb6;
  --color-shell-pink-300: #f99993;
  --color-shell-pink-400: #e87877;
  --color-shell-pink-500: #d55659;
  --color-shell-pink-600: #b44a4c;
  --color-shell-pink-700: #913b3c;
  --color-shell-pink-800: #6c2a2d;
  --color-shell-pink-900: #4c1c1e;
  --color-shell-pink-950: #320c0e;
}

SCSS

$shell-pink: #f88180;
$shell-pink-rgb: 248, 129, 128;
$shell-pink-light: mix(#fff, $shell-pink, 20%);
$shell-pink-dark: mix(#000, $shell-pink, 20%);

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