Real Cork

CSS

:root {
  --real-cork: #c1a17f;
  --real-cork-rgb: 193 161 127;
  --real-cork-oklch: oklch(0.729 0.06 68.4);
}

.element {
  color: var(--real-cork);
  background-color: hsl(31 35% 63%);
  border-color: oklch(0.729 0.06 68.4);
}

Tailwind CSS v4

@theme {
  --color-real-cork: #c1a17f;
  --color-real-cork-50: #fff3e3;
  --color-real-cork-100: #f5e5d3;
  --color-real-cork-200: #e5d0b9;
  --color-real-cork-300: #ccb397;
  --color-real-cork-400: #b69878;
  --color-real-cork-500: #a17f5a;
  --color-real-cork-600: #886c4d;
  --color-real-cork-700: #6d563d;
  --color-real-cork-800: #513e2c;
  --color-real-cork-900: #382b1e;
  --color-real-cork-950: #23180e;
}

SCSS

$real-cork: #c1a17f;
$real-cork-rgb: 193, 161, 127;
$real-cork-light: mix(#fff, $real-cork, 20%);
$real-cork-dark: mix(#000, $real-cork, 20%);

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