Priceless Coral

CSS

:root {
  --priceless-coral: #e5a68d;
  --priceless-coral-rgb: 229 166 141;
  --priceless-coral-oklch: oklch(0.779 0.083 42.6);
}

.element {
  color: var(--priceless-coral);
  background-color: hsl(17 63% 73%);
  border-color: oklch(0.779 0.083 42.6);
}

Tailwind CSS v4

@theme {
  --color-priceless-coral: #e5a68d;
  --color-priceless-coral-50: #ffeee2;
  --color-priceless-coral-100: #ffe0d2;
  --color-priceless-coral-200: #f4cab8;
  --color-priceless-coral-300: #dcab95;
  --color-priceless-coral-400: #c98f77;
  --color-priceless-coral-500: #b57359;
  --color-priceless-coral-600: #99624c;
  --color-priceless-coral-700: #7a4e3d;
  --color-priceless-coral-800: #5b382c;
  --color-priceless-coral-900: #40271e;
  --color-priceless-coral-950: #28150e;
}

SCSS

$priceless-coral: #e5a68d;
$priceless-coral-rgb: 229, 166, 141;
$priceless-coral-light: mix(#fff, $priceless-coral, 20%);
$priceless-coral-dark: mix(#000, $priceless-coral, 20%);

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