Pale Primrose

CSS

:root {
  --pale-primrose: #eec8d3;
  --pale-primrose-rgb: 238 200 211;
  --pale-primrose-oklch: oklch(0.868 0.045 358.8);
}

.element {
  color: var(--pale-primrose);
  background-color: hsl(343 53% 86%);
  border-color: oklch(0.868 0.045 358.8);
}

Tailwind CSS v4

@theme {
  --color-pale-primrose: #eec8d3;
  --color-pale-primrose-50: #fff0f4;
  --color-pale-primrose-100: #f6e2e7;
  --color-pale-primrose-200: #e6cdd3;
  --color-pale-primrose-300: #ccaeb6;
  --color-pale-primrose-400: #b6949e;
  --color-pale-primrose-500: #a07a85;
  --color-pale-primrose-600: #876771;
  --color-pale-primrose-700: #6c535a;
  --color-pale-primrose-800: #503c43;
  --color-pale-primrose-900: #37292e;
  --color-pale-primrose-950: #22171b;
}

SCSS

$pale-primrose: #eec8d3;
$pale-primrose-rgb: 238, 200, 211;
$pale-primrose-light: mix(#fff, $pale-primrose, 20%);
$pale-primrose-dark: mix(#000, $pale-primrose, 20%);

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