Rapakivi Granite

CSS

:root {
  --rapakivi-granite: #d28239;
  --rapakivi-granite-rgb: 210 130 57;
  --rapakivi-granite-oklch: oklch(0.678 0.131 59.7);
}

.element {
  color: var(--rapakivi-granite);
  background-color: hsl(29 63% 52%);
  border-color: oklch(0.678 0.131 59.7);
}

Tailwind CSS v4

@theme {
  --color-rapakivi-granite: #d28239;
  --color-rapakivi-granite-50: #ffeed0;
  --color-rapakivi-granite-100: #ffdfbc;
  --color-rapakivi-granite-200: #fec89b;
  --color-rapakivi-granite-300: #e8a86f;
  --color-rapakivi-granite-400: #d78a47;
  --color-rapakivi-granite-500: #c46d05;
  --color-rapakivi-granite-600: #a55d0d;
  --color-rapakivi-granite-700: #854a0c;
  --color-rapakivi-granite-800: #633508;
  --color-rapakivi-granite-900: #462406;
  --color-rapakivi-granite-950: #2d1200;
}

SCSS

$rapakivi-granite: #d28239;
$rapakivi-granite-rgb: 210, 130, 57;
$rapakivi-granite-light: mix(#fff, $rapakivi-granite, 20%);
$rapakivi-granite-dark: mix(#000, $rapakivi-granite, 20%);

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