Salmon Eggs

CSS

:root {
  --salmon-eggs: #f7d560;
  --salmon-eggs-rgb: 247 213 96;
  --salmon-eggs-oklch: oklch(0.88 0.14 93.1);
}

.element {
  color: var(--salmon-eggs);
  background-color: hsl(46 90% 67%);
  border-color: oklch(0.88 0.14 93.1);
}

Tailwind CSS v4

@theme {
  --color-salmon-eggs: #f7d560;
  --color-salmon-eggs-50: #fff6c8;
  --color-salmon-eggs-100: #f6e8b3;
  --color-salmon-eggs-200: #e7d48f;
  --color-salmon-eggs-300: #ceb75e;
  --color-salmon-eggs-400: #bb9c25;
  --color-salmon-eggs-500: #a68200;
  --color-salmon-eggs-600: #8c6e00;
  --color-salmon-eggs-700: #705800;
  --color-salmon-eggs-800: #543f00;
  --color-salmon-eggs-900: #3b2c00;
  --color-salmon-eggs-950: #251900;
}

SCSS

$salmon-eggs: #f7d560;
$salmon-eggs-rgb: 247, 213, 96;
$salmon-eggs-light: mix(#fff, $salmon-eggs, 20%);
$salmon-eggs-dark: mix(#000, $salmon-eggs, 20%);

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