Good-Looking

CSS

:root {
  --good-looking: #edd2a7;
  --good-looking-rgb: 237 210 167;
  --good-looking-oklch: oklch(0.876 0.064 79.3);
}

.element {
  color: var(--good-looking);
  background-color: hsl(37 66% 79%);
  border-color: oklch(0.876 0.064 79.3);
}

Tailwind CSS v4

@theme {
  --color-good-looking: #edd2a7;
  --color-good-looking-50: #fff4e1;
  --color-good-looking-100: #f3e6d0;
  --color-good-looking-200: #e2d2b6;
  --color-good-looking-300: #c8b593;
  --color-good-looking-400: #b39b74;
  --color-good-looking-500: #9d8154;
  --color-good-looking-600: #856e48;
  --color-good-looking-700: #6a5839;
  --color-good-looking-800: #4f4029;
  --color-good-looking-900: #372c1b;
  --color-good-looking-950: #22190c;
}

SCSS

$good-looking: #edd2a7;
$good-looking-rgb: 237, 210, 167;
$good-looking-light: mix(#fff, $good-looking, 20%);
$good-looking-dark: mix(#000, $good-looking, 20%);

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