Ocean Silk

CSS

:root {
  --ocean-silk: #c8dcd5;
  --ocean-silk-rgb: 200 220 213;
  --ocean-silk-oklch: oklch(0.878 0.023 172.8);
}

.element {
  color: var(--ocean-silk);
  background-color: hsl(159 22% 82%);
  border-color: oklch(0.878 0.023 172.8);
}

Tailwind CSS v4

@theme {
  --color-ocean-silk: #c8dcd5;
  --color-ocean-silk-50: #eff7f5;
  --color-ocean-silk-100: #e0ebe7;
  --color-ocean-silk-200: #cbd8d3;
  --color-ocean-silk-300: #acbbb6;
  --color-ocean-silk-400: #91a39d;
  --color-ocean-silk-500: #778b84;
  --color-ocean-silk-600: #657670;
  --color-ocean-silk-700: #515e5a;
  --color-ocean-silk-800: #3b4541;
  --color-ocean-silk-900: #28302d;
  --color-ocean-silk-950: #161c1a;
}

SCSS

$ocean-silk: #c8dcd5;
$ocean-silk-rgb: 200, 220, 213;
$ocean-silk-light: mix(#fff, $ocean-silk, 20%);
$ocean-silk-dark: mix(#000, $ocean-silk, 20%);

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