Morning Marmalade

CSS

:root {
  --morning-marmalade: #ee8a67;
  --morning-marmalade-rgb: 238 138 103;
  --morning-marmalade-oklch: oklch(0.733 0.132 39.9);
}

.element {
  color: var(--morning-marmalade);
  background-color: hsl(16 80% 67%);
  border-color: oklch(0.733 0.132 39.9);
}

Tailwind CSS v4

@theme {
  --color-morning-marmalade: #ee8a67;
  --color-morning-marmalade-50: #ffead8;
  --color-morning-marmalade-100: #ffdac6;
  --color-morning-marmalade-200: #ffc2a8;
  --color-morning-marmalade-300: #f1a182;
  --color-morning-marmalade-400: #e08261;
  --color-morning-marmalade-500: #cd633c;
  --color-morning-marmalade-600: #ad5434;
  --color-morning-marmalade-700: #8b4329;
  --color-morning-marmalade-800: #68301e;
  --color-morning-marmalade-900: #492014;
  --color-morning-marmalade-950: #300f06;
}

SCSS

$morning-marmalade: #ee8a67;
$morning-marmalade-rgb: 238, 138, 103;
$morning-marmalade-light: mix(#fff, $morning-marmalade, 20%);
$morning-marmalade-dark: mix(#000, $morning-marmalade, 20%);

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