Dutch Tile Blue

CSS

:root {
  --dutch-tile-blue: #9aabab;
  --dutch-tile-blue-rgb: 154 171 171;
  --dutch-tile-blue-oklch: oklch(0.728 0.019 196.7);
}

.element {
  color: var(--dutch-tile-blue);
  background-color: hsl(180 9% 64%);
  border-color: oklch(0.728 0.019 196.7);
}

Tailwind CSS v4

@theme {
  --color-dutch-tile-blue: #9aabab;
  --color-dutch-tile-blue-50: #eff7f7;
  --color-dutch-tile-blue-100: #e1eaea;
  --color-dutch-tile-blue-200: #cbd7d7;
  --color-dutch-tile-blue-300: #adbbbb;
  --color-dutch-tile-blue-400: #92a2a2;
  --color-dutch-tile-blue-500: #788a8a;
  --color-dutch-tile-blue-600: #667575;
  --color-dutch-tile-blue-700: #515e5e;
  --color-dutch-tile-blue-800: #3b4544;
  --color-dutch-tile-blue-900: #292f2f;
  --color-dutch-tile-blue-950: #161c1c;
}

SCSS

$dutch-tile-blue: #9aabab;
$dutch-tile-blue-rgb: 154, 171, 171;
$dutch-tile-blue-light: mix(#fff, $dutch-tile-blue, 20%);
$dutch-tile-blue-dark: mix(#000, $dutch-tile-blue, 20%);

.element {
  color: $dutch-tile-blue;
  box-shadow: 0 0 0 2px rgba($dutch-tile-blue, 0.35);
}