Barely Brown

CSS

:root {
  --barely-brown: #dd6655;
  --barely-brown-rgb: 221 102 85;
  --barely-brown-oklch: oklch(0.652 0.153 30);
}

.element {
  color: var(--barely-brown);
  background-color: hsl(8 67% 60%);
  border-color: oklch(0.652 0.153 30);
}

Tailwind CSS v4

@theme {
  --color-barely-brown: #dd6655;
  --color-barely-brown-50: #ffe6da;
  --color-barely-brown-100: #ffd6c8;
  --color-barely-brown-200: #ffbcab;
  --color-barely-brown-300: #fb9986;
  --color-barely-brown-400: #eb7867;
  --color-barely-brown-500: #d85645;
  --color-barely-brown-600: #b7493b;
  --color-barely-brown-700: #933b2f;
  --color-barely-brown-800: #6e2923;
  --color-barely-brown-900: #4d1c17;
  --color-barely-brown-950: #330b08;
}

SCSS

$barely-brown: #dd6655;
$barely-brown-rgb: 221, 102, 85;
$barely-brown-light: mix(#fff, $barely-brown, 20%);
$barely-brown-dark: mix(#000, $barely-brown, 20%);

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