Chinese Porcelain

CSS

:root {
  --chinese-porcelain: #3a5f7d;
  --chinese-porcelain-rgb: 58 95 125;
  --chinese-porcelain-oklch: oklch(0.471 0.065 244.2);
}

.element {
  color: var(--chinese-porcelain);
  background-color: hsl(207 37% 36%);
  border-color: oklch(0.471 0.065 244.2);
}

Tailwind CSS v4

@theme {
  --color-chinese-porcelain: #3a5f7d;
  --color-chinese-porcelain-50: #e7f8ff;
  --color-chinese-porcelain-100: #d7ebfd;
  --color-chinese-porcelain-200: #bfd8ef;
  --color-chinese-porcelain-300: #9dbbd7;
  --color-chinese-porcelain-400: #7ea3c2;
  --color-chinese-porcelain-500: #618bae;
  --color-chinese-porcelain-600: #527693;
  --color-chinese-porcelain-700: #415e76;
  --color-chinese-porcelain-800: #2e4557;
  --color-chinese-porcelain-900: #1f303d;
  --color-chinese-porcelain-950: #0f1c26;
}

SCSS

$chinese-porcelain: #3a5f7d;
$chinese-porcelain-rgb: 58, 95, 125;
$chinese-porcelain-light: mix(#fff, $chinese-porcelain, 20%);
$chinese-porcelain-dark: mix(#000, $chinese-porcelain, 20%);

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