Painted Poppy

CSS

:root {
  --painted-poppy: #cb5139;
  --painted-poppy-rgb: 203 81 57;
  --painted-poppy-oklch: oklch(0.592 0.16 33);
}

.element {
  color: var(--painted-poppy);
  background-color: hsl(10 58% 51%);
  border-color: oklch(0.592 0.16 33);
}

Tailwind CSS v4

@theme {
  --color-painted-poppy: #cb5139;
  --color-painted-poppy-50: #ffe6d7;
  --color-painted-poppy-100: #ffd6c4;
  --color-painted-poppy-200: #ffbca6;
  --color-painted-poppy-300: #fe987e;
  --color-painted-poppy-400: #ed765e;
  --color-painted-poppy-500: #dc5338;
  --color-painted-poppy-600: #b94731;
  --color-painted-poppy-700: #953927;
  --color-painted-poppy-800: #6f281d;
  --color-painted-poppy-900: #4f1b13;
  --color-painted-poppy-950: #340a05;
}

SCSS

$painted-poppy: #cb5139;
$painted-poppy-rgb: 203, 81, 57;
$painted-poppy-light: mix(#fff, $painted-poppy, 20%);
$painted-poppy-dark: mix(#000, $painted-poppy, 20%);

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