Ocean Foam

CSS

:root {
  --ocean-foam: #cac8b4;
  --ocean-foam-rgb: 202 200 180;
  --ocean-foam-oklch: oklch(0.829 0.027 102.3);
}

.element {
  color: var(--ocean-foam);
  background-color: hsl(55 17% 75%);
  border-color: oklch(0.829 0.027 102.3);
}

Tailwind CSS v4

@theme {
  --color-ocean-foam: #cac8b4;
  --color-ocean-foam-50: #f6f6ed;
  --color-ocean-foam-100: #e9e8de;
  --color-ocean-foam-200: #d6d5c8;
  --color-ocean-foam-300: #b9b8a9;
  --color-ocean-foam-400: #a19f8d;
  --color-ocean-foam-500: #898773;
  --color-ocean-foam-600: #747261;
  --color-ocean-foam-700: #5d5b4e;
  --color-ocean-foam-800: #444338;
  --color-ocean-foam-900: #2f2e26;
  --color-ocean-foam-950: #1c1b15;
}

SCSS

$ocean-foam: #cac8b4;
$ocean-foam-rgb: 202, 200, 180;
$ocean-foam-light: mix(#fff, $ocean-foam, 20%);
$ocean-foam-dark: mix(#000, $ocean-foam, 20%);

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