French Porcelain Clay

CSS

:root {
  --french-porcelain-clay: #faf1d7;
  --french-porcelain-clay-rgb: 250 241 215;
  --french-porcelain-clay-oklch: oklch(0.958 0.035 91.1);
}

.element {
  color: var(--french-porcelain-clay);
  background-color: hsl(45 78% 91%);
  border-color: oklch(0.958 0.035 91.1);
}

Tailwind CSS v4

@theme {
  --color-french-porcelain-clay: #faf1d7;
  --color-french-porcelain-clay-50: #f8f5ea;
  --color-french-porcelain-clay-100: #ece8db;
  --color-french-porcelain-clay-200: #d9d4c4;
  --color-french-porcelain-clay-300: #bdb7a3;
  --color-french-porcelain-clay-400: #a69e87;
  --color-french-porcelain-clay-500: #8f866c;
  --color-french-porcelain-clay-600: #79715b;
  --color-french-porcelain-clay-700: #615b49;
  --color-french-porcelain-clay-800: #474235;
  --color-french-porcelain-clay-900: #312d24;
  --color-french-porcelain-clay-950: #1d1a13;
}

SCSS

$french-porcelain-clay: #faf1d7;
$french-porcelain-clay-rgb: 250, 241, 215;
$french-porcelain-clay-light: mix(#fff, $french-porcelain-clay, 20%);
$french-porcelain-clay-dark: mix(#000, $french-porcelain-clay, 20%);

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