Shallow Shore

CSS

:root {
  --shallow-shore: #b0dec8;
  --shallow-shore-rgb: 176 222 200;
  --shallow-shore-oklch: oklch(0.862 0.057 164.4);
}

.element {
  color: var(--shallow-shore);
  background-color: hsl(151 41% 78%);
  border-color: oklch(0.862 0.057 164.4);
}

Tailwind CSS v4

@theme {
  --color-shallow-shore: #b0dec8;
  --color-shallow-shore-50: #e7fbf1;
  --color-shallow-shore-100: #d7eee4;
  --color-shallow-shore-200: #bedccf;
  --color-shallow-shore-300: #9dc1b1;
  --color-shallow-shore-400: #80a996;
  --color-shallow-shore-500: #62927c;
  --color-shallow-shore-600: #537c69;
  --color-shallow-shore-700: #426354;
  --color-shallow-shore-800: #30493c;
  --color-shallow-shore-900: #21322a;
  --color-shallow-shore-950: #101e17;
}

SCSS

$shallow-shore: #b0dec8;
$shallow-shore-rgb: 176, 222, 200;
$shallow-shore-light: mix(#fff, $shallow-shore, 20%);
$shallow-shore-dark: mix(#000, $shallow-shore, 20%);

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