Granite Falls

CSS

:root {
  --granite-falls: #638496;
  --granite-falls-rgb: 99 132 150;
  --granite-falls-oklch: oklch(0.595 0.046 232.4);
}

.element {
  color: var(--granite-falls);
  background-color: hsl(201 20% 49%);
  border-color: oklch(0.595 0.046 232.4);
}

Tailwind CSS v4

@theme {
  --color-granite-falls: #638496;
  --color-granite-falls-50: #e9f8ff;
  --color-granite-falls-100: #daebf5;
  --color-granite-falls-200: #c2d8e5;
  --color-granite-falls-300: #a1bccc;
  --color-granite-falls-400: #84a4b6;
  --color-granite-falls-500: #678ca0;
  --color-granite-falls-600: #587687;
  --color-granite-falls-700: #465f6c;
  --color-granite-falls-800: #324650;
  --color-granite-falls-900: #223037;
  --color-granite-falls-950: #111c22;
}

SCSS

$granite-falls: #638496;
$granite-falls-rgb: 99, 132, 150;
$granite-falls-light: mix(#fff, $granite-falls, 20%);
$granite-falls-dark: mix(#000, $granite-falls, 20%);

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