Dreams of Peach

CSS

:root {
  --dreams-of-peach: #ffd29d;
  --dreams-of-peach-rgb: 255 210 157;
  --dreams-of-peach-oklch: oklch(0.89 0.085 71);
}

.element {
  color: var(--dreams-of-peach);
  background-color: hsl(32 100% 81%);
  border-color: oklch(0.89 0.085 71);
}

Tailwind CSS v4

@theme {
  --color-dreams-of-peach: #ffd29d;
  --color-dreams-of-peach-50: #fff2db;
  --color-dreams-of-peach-100: #fae4ca;
  --color-dreams-of-peach-200: #ebcfad;
  --color-dreams-of-peach-300: #d2b187;
  --color-dreams-of-peach-400: #be9666;
  --color-dreams-of-peach-500: #aa7c43;
  --color-dreams-of-peach-600: #8f693a;
  --color-dreams-of-peach-700: #73542e;
  --color-dreams-of-peach-800: #563d20;
  --color-dreams-of-peach-900: #3c2a15;
  --color-dreams-of-peach-950: #251707;
}

SCSS

$dreams-of-peach: #ffd29d;
$dreams-of-peach-rgb: 255, 210, 157;
$dreams-of-peach-light: mix(#fff, $dreams-of-peach, 20%);
$dreams-of-peach-dark: mix(#000, $dreams-of-peach, 20%);

.element {
  color: $dreams-of-peach;
  box-shadow: 0 0 0 2px rgba($dreams-of-peach, 0.35);
}