Brown Pepper

CSS

:root {
  --brown-pepper: #4e403b;
  --brown-pepper-rgb: 78 64 59;
  --brown-pepper-oklch: oklch(0.385 0.021 40.6);
}

.element {
  color: var(--brown-pepper);
  background-color: hsl(16 14% 27%);
  border-color: oklch(0.385 0.021 40.6);
}

Tailwind CSS v4

@theme {
  --color-brown-pepper: #4e403b;
  --color-brown-pepper-50: #fbf3f0;
  --color-brown-pepper-100: #eee6e2;
  --color-brown-pepper-200: #ddd1cd;
  --color-brown-pepper-300: #c1b4af;
  --color-brown-pepper-400: #aa9b95;
  --color-brown-pepper-500: #93827c;
  --color-brown-pepper-600: #7d6e69;
  --color-brown-pepper-700: #645854;
  --color-brown-pepper-800: #49403d;
  --color-brown-pepper-900: #332c2a;
  --color-brown-pepper-950: #1f1918;
}

SCSS

$brown-pepper: #4e403b;
$brown-pepper-rgb: 78, 64, 59;
$brown-pepper-light: mix(#fff, $brown-pepper, 20%);
$brown-pepper-dark: mix(#000, $brown-pepper, 20%);

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