Pale Dogwood

CSS

:root {
  --pale-dogwood: #ecccc1;
  --pale-dogwood-rgb: 236 204 193;
  --pale-dogwood-oklch: oklch(0.869 0.039 39.9);
}

.element {
  color: var(--pale-dogwood);
  background-color: hsl(15 53% 84%);
  border-color: oklch(0.869 0.039 39.9);
}

Tailwind CSS v4

@theme {
  --color-pale-dogwood: #ecccc1;
  --color-pale-dogwood-50: #fff2ed;
  --color-pale-dogwood-100: #f4e4de;
  --color-pale-dogwood-200: #e4cfc7;
  --color-pale-dogwood-300: #cab1a8;
  --color-pale-dogwood-400: #b4978d;
  --color-pale-dogwood-500: #9e7e73;
  --color-pale-dogwood-600: #856b61;
  --color-pale-dogwood-700: #6b554e;
  --color-pale-dogwood-800: #4f3e39;
  --color-pale-dogwood-900: #372b27;
  --color-pale-dogwood-950: #221815;
}

SCSS

$pale-dogwood: #ecccc1;
$pale-dogwood-rgb: 236, 204, 193;
$pale-dogwood-light: mix(#fff, $pale-dogwood, 20%);
$pale-dogwood-dark: mix(#000, $pale-dogwood, 20%);

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