Mosaic Tile

CSS

:root {
  --mosaic-tile: #1c6b69;
  --mosaic-tile-rgb: 28 107 105;
  --mosaic-tile-oklch: oklch(0.482 0.073 192.5);
}

.element {
  color: var(--mosaic-tile);
  background-color: hsl(178 59% 26%);
  border-color: oklch(0.482 0.073 192.5);
}

Tailwind CSS v4

@theme {
  --color-mosaic-tile: #1c6b69;
  --color-mosaic-tile-50: #defcfb;
  --color-mosaic-tile-100: #cdf0ef;
  --color-mosaic-tile-200: #b1dfde;
  --color-mosaic-tile-300: #8bc4c3;
  --color-mosaic-tile-400: #68adaa;
  --color-mosaic-tile-500: #429693;
  --color-mosaic-tile-600: #397f7c;
  --color-mosaic-tile-700: #2e6564;
  --color-mosaic-tile-800: #204b48;
  --color-mosaic-tile-900: #153432;
  --color-mosaic-tile-950: #061f1e;
}

SCSS

$mosaic-tile: #1c6b69;
$mosaic-tile-rgb: 28, 107, 105;
$mosaic-tile-light: mix(#fff, $mosaic-tile, 20%);
$mosaic-tile-dark: mix(#000, $mosaic-tile, 20%);

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