Orange Poppy

CSS

:root {
  --orange-poppy: #e68750;
  --orange-poppy-rgb: 230 135 80;
  --orange-poppy-oklch: oklch(0.715 0.136 49.4);
}

.element {
  color: var(--orange-poppy);
  background-color: hsl(22 75% 61%);
  border-color: oklch(0.715 0.136 49.4);
}

Tailwind CSS v4

@theme {
  --color-orange-poppy: #e68750;
  --color-orange-poppy-50: #ffebd2;
  --color-orange-poppy-100: #ffdcbf;
  --color-orange-poppy-200: #ffc49f;
  --color-orange-poppy-300: #efa376;
  --color-orange-poppy-400: #de8451;
  --color-orange-poppy-500: #cb6622;
  --color-orange-poppy-600: #ac5720;
  --color-orange-poppy-700: #8a4519;
  --color-orange-poppy-800: #673112;
  --color-orange-poppy-900: #49210b;
  --color-orange-poppy-950: #2f1001;
}

SCSS

$orange-poppy: #e68750;
$orange-poppy-rgb: 230, 135, 80;
$orange-poppy-light: mix(#fff, $orange-poppy, 20%);
$orange-poppy-dark: mix(#000, $orange-poppy, 20%);

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