Cold Pressed

CSS

:root {
  --cold-pressed: #665b42;
  --cold-pressed-rgb: 102 91 66;
  --cold-pressed-oklch: oklch(0.475 0.04 87);
}

.element {
  color: var(--cold-pressed);
  background-color: hsl(42 21% 33%);
  border-color: oklch(0.475 0.04 87);
}

Tailwind CSS v4

@theme {
  --color-cold-pressed: #665b42;
  --color-cold-pressed-50: #faf5e8;
  --color-cold-pressed-100: #ede7d9;
  --color-cold-pressed-200: #dbd4c1;
  --color-cold-pressed-300: #c0b7a1;
  --color-cold-pressed-400: #a99d84;
  --color-cold-pressed-500: #928568;
  --color-cold-pressed-600: #7b7058;
  --color-cold-pressed-700: #635a46;
  --color-cold-pressed-800: #494133;
  --color-cold-pressed-900: #322d22;
  --color-cold-pressed-950: #1e1a11;
}

SCSS

$cold-pressed: #665b42;
$cold-pressed-rgb: 102, 91, 66;
$cold-pressed-light: mix(#fff, $cold-pressed, 20%);
$cold-pressed-dark: mix(#000, $cold-pressed, 20%);

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