Cochineal Red

CSS

:root {
  --cochineal-red: #9d2933;
  --cochineal-red-rgb: 157 41 51;
  --cochineal-red-oklch: oklch(0.467 0.151 20.8);
}

.element {
  color: var(--cochineal-red);
  background-color: hsl(355 59% 39%);
  border-color: oklch(0.467 0.151 20.8);
}

Tailwind CSS v4

@theme {
  --color-cochineal-red: #9d2933;
  --color-cochineal-red-50: #ffe5e1;
  --color-cochineal-red-100: #ffd5d1;
  --color-cochineal-red-200: #ffbbb6;
  --color-cochineal-red-300: #fb9793;
  --color-cochineal-red-400: #ea7677;
  --color-cochineal-red-500: #d85359;
  --color-cochineal-red-600: #b6484c;
  --color-cochineal-red-700: #93393c;
  --color-cochineal-red-800: #6d282d;
  --color-cochineal-red-900: #4d1b1e;
  --color-cochineal-red-950: #330b0e;
}

SCSS

$cochineal-red: #9d2933;
$cochineal-red-rgb: 157, 41, 51;
$cochineal-red-light: mix(#fff, $cochineal-red, 20%);
$cochineal-red-dark: mix(#000, $cochineal-red, 20%);

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