Often Orange

CSS

:root {
  --often-orange: #ff714e;
  --often-orange-rgb: 255 113 78;
  --often-orange-oklch: oklch(0.715 0.181 35.1);
}

.element {
  color: var(--often-orange);
  background-color: hsl(12 100% 65%);
  border-color: oklch(0.715 0.181 35.1);
}

Tailwind CSS v4

@theme {
  --color-often-orange: #ff714e;
  --color-often-orange-50: #ffe4d1;
  --color-often-orange-100: #ffd3bd;
  --color-often-orange-200: #ffb99d;
  --color-often-orange-300: #ff9473;
  --color-often-orange-400: #f6704f;
  --color-often-orange-500: #e4491f;
  --color-often-orange-600: #c13f1d;
  --color-often-orange-700: #9b3217;
  --color-often-orange-800: #742212;
  --color-often-orange-900: #52170c;
  --color-often-orange-950: #360701;
}

SCSS

$often-orange: #ff714e;
$often-orange-rgb: 255, 113, 78;
$often-orange-light: mix(#fff, $often-orange, 20%);
$often-orange-dark: mix(#000, $often-orange, 20%);

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