Ocean Boulevard

CSS

:root {
  --ocean-boulevard: #a4c8c8;
  --ocean-boulevard-rgb: 164 200 200;
  --ocean-boulevard-oklch: oklch(0.807 0.038 196.4);
}

.element {
  color: var(--ocean-boulevard);
  background-color: hsl(180 25% 71%);
  border-color: oklch(0.807 0.038 196.4);
}

Tailwind CSS v4

@theme {
  --color-ocean-boulevard: #a4c8c8;
  --color-ocean-boulevard-50: #e9f9f9;
  --color-ocean-boulevard-100: #daecec;
  --color-ocean-boulevard-200: #c2dada;
  --color-ocean-boulevard-300: #a2bebf;
  --color-ocean-boulevard-400: #85a6a6;
  --color-ocean-boulevard-500: #688e8f;
  --color-ocean-boulevard-600: #597879;
  --color-ocean-boulevard-700: #476061;
  --color-ocean-boulevard-800: #334746;
  --color-ocean-boulevard-900: #233131;
  --color-ocean-boulevard-950: #121d1d;
}

SCSS

$ocean-boulevard: #a4c8c8;
$ocean-boulevard-rgb: 164, 200, 200;
$ocean-boulevard-light: mix(#fff, $ocean-boulevard, 20%);
$ocean-boulevard-dark: mix(#000, $ocean-boulevard, 20%);

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