Fine China

CSS

:root {
  --fine-china: #b1d2d5;
  --fine-china-rgb: 177 210 213;
  --fine-china-oklch: oklch(0.841 0.035 203.3);
}

.element {
  color: var(--fine-china);
  background-color: hsl(185 30% 76%);
  border-color: oklch(0.841 0.035 203.3);
}

Tailwind CSS v4

@theme {
  --color-fine-china: #b1d2d5;
  --color-fine-china-50: #eaf8fa;
  --color-fine-china-100: #dbeced;
  --color-fine-china-200: #c4d9db;
  --color-fine-china-300: #a3bdc0;
  --color-fine-china-400: #87a5a8;
  --color-fine-china-500: #6b8d91;
  --color-fine-china-600: #5b787a;
  --color-fine-china-700: #486062;
  --color-fine-china-800: #344647;
  --color-fine-china-900: #243131;
  --color-fine-china-950: #121d1d;
}

SCSS

$fine-china: #b1d2d5;
$fine-china-rgb: 177, 210, 213;
$fine-china-light: mix(#fff, $fine-china, 20%);
$fine-china-dark: mix(#000, $fine-china, 20%);

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