Japanese Koi

CSS

:root {
  --japanese-koi: #db7842;
  --japanese-koi-rgb: 219 120 66;
  --japanese-koi-oklch: oklch(0.674 0.141 47.5);
}

.element {
  color: var(--japanese-koi);
  background-color: hsl(21 68% 56%);
  border-color: oklch(0.674 0.141 47.5);
}

Tailwind CSS v4

@theme {
  --color-japanese-koi: #db7842;
  --color-japanese-koi-50: #ffead2;
  --color-japanese-koi-100: #ffdbbf;
  --color-japanese-koi-200: #ffc39f;
  --color-japanese-koi-300: #f2a175;
  --color-japanese-koi-400: #e18250;
  --color-japanese-koi-500: #ce6321;
  --color-japanese-koi-600: #ae541f;
  --color-japanese-koi-700: #8c4318;
  --color-japanese-koi-800: #693012;
  --color-japanese-koi-900: #4a200b;
  --color-japanese-koi-950: #300f01;
}

SCSS

$japanese-koi: #db7842;
$japanese-koi-rgb: 219, 120, 66;
$japanese-koi-light: mix(#fff, $japanese-koi, 20%);
$japanese-koi-dark: mix(#000, $japanese-koi, 20%);

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