Kindleflame

CSS

:root {
  --kindleflame: #e9967a;
  --kindleflame-rgb: 233 150 122;
  --kindleflame-oklch: oklch(0.751 0.108 39.4);
}

.element {
  color: var(--kindleflame);
  background-color: hsl(15 72% 70%);
  border-color: oklch(0.751 0.108 39.4);
}

Tailwind CSS v4

@theme {
  --color-kindleflame: #e9967a;
  --color-kindleflame-50: #ffecde;
  --color-kindleflame-100: #ffddcc;
  --color-kindleflame-200: #fec6b1;
  --color-kindleflame-300: #e8a58c;
  --color-kindleflame-400: #d5886e;
  --color-kindleflame-500: #c26b4d;
  --color-kindleflame-600: #a45b42;
  --color-kindleflame-700: #834934;
  --color-kindleflame-800: #623426;
  --color-kindleflame-900: #452319;
  --color-kindleflame-950: #2c120a;
}

SCSS

$kindleflame: #e9967a;
$kindleflame-rgb: 233, 150, 122;
$kindleflame-light: mix(#fff, $kindleflame, 20%);
$kindleflame-dark: mix(#000, $kindleflame, 20%);

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