Chōjicha Brown

CSS

:root {
  --chojicha-brown: #8f583c;
  --chojicha-brown-rgb: 143 88 60;
  --chojicha-brown-oklch: oklch(0.516 0.084 47.3);
}

.element {
  color: var(--chojicha-brown);
  background-color: hsl(20 41% 40%);
  border-color: oklch(0.516 0.084 47.3);
}

Tailwind CSS v4

@theme {
  --color-chojicha-brown: #8f583c;
  --color-chojicha-brown-50: #ffefe1;
  --color-chojicha-brown-100: #ffe0d0;
  --color-chojicha-brown-200: #f3cbb5;
  --color-chojicha-brown-300: #dcab92;
  --color-chojicha-brown-400: #c88f73;
  --color-chojicha-brown-500: #b47455;
  --color-chojicha-brown-600: #986348;
  --color-chojicha-brown-700: #7a4f39;
  --color-chojicha-brown-800: #5b3929;
  --color-chojicha-brown-900: #3f271c;
  --color-chojicha-brown-950: #28150c;
}

SCSS

$chojicha-brown: #8f583c;
$chojicha-brown-rgb: 143, 88, 60;
$chojicha-brown-light: mix(#fff, $chojicha-brown, 20%);
$chojicha-brown-dark: mix(#000, $chojicha-brown, 20%);

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