Nǎi Yóu Sè Cream

CSS

:root {
  --nai-you-se-cream: #fdedc3;
  --nai-you-se-cream-rgb: 253 237 195;
  --nai-you-se-cream-oklch: oklch(0.948 0.057 89.7);
}

.element {
  color: var(--nai-you-se-cream);
  background-color: hsl(43 94% 88%);
  border-color: oklch(0.948 0.057 89.7);
}

Tailwind CSS v4

@theme {
  --color-nai-you-se-cream: #fdedc3;
  --color-nai-you-se-cream-50: #fbf5e3;
  --color-nai-you-se-cream-100: #efe8d3;
  --color-nai-you-se-cream-200: #ddd4b9;
  --color-nai-you-se-cream-300: #c2b797;
  --color-nai-you-se-cream-400: #ac9d78;
  --color-nai-you-se-cream-500: #95855a;
  --color-nai-you-se-cream-600: #7e704c;
  --color-nai-you-se-cream-700: #655a3d;
  --color-nai-you-se-cream-800: #4b412b;
  --color-nai-you-se-cream-900: #342d1d;
  --color-nai-you-se-cream-950: #1f1a0d;
}

SCSS

$nai-you-se-cream: #fdedc3;
$nai-you-se-cream-rgb: 253, 237, 195;
$nai-you-se-cream-light: mix(#fff, $nai-you-se-cream, 20%);
$nai-you-se-cream-dark: mix(#000, $nai-you-se-cream, 20%);

.element {
  color: $nai-you-se-cream;
  box-shadow: 0 0 0 2px rgba($nai-you-se-cream, 0.35);
}