#F08972

CSS

:root {
  --in-for-a-penny: #f08972;
  --in-for-a-penny-rgb: 240 137 114;
  --in-for-a-penny-oklch: oklch(0.736 0.131 33.6);
}

.element {
  color: var(--in-for-a-penny);
  background-color: hsl(11 81% 69%);
  border-color: oklch(0.736 0.131 33.6);
}

Tailwind CSS v4

@theme {
  --color-in-for-a-penny: #f08972;
  --color-in-for-a-penny-50: #ffe9dc;
  --color-in-for-a-penny-100: #ffd9ca;
  --color-in-for-a-penny-200: #ffc1ae;
  --color-in-for-a-penny-300: #f29f89;
  --color-in-for-a-penny-400: #e1806a;
  --color-in-for-a-penny-500: #ce6149;
  --color-in-for-a-penny-600: #ae523f;
  --color-in-for-a-penny-700: #8c4232;
  --color-in-for-a-penny-800: #682f25;
  --color-in-for-a-penny-900: #492018;
  --color-in-for-a-penny-950: #300f09;
}

SCSS

$in-for-a-penny: #f08972;
$in-for-a-penny-rgb: 240, 137, 114;
$in-for-a-penny-light: mix(#fff, $in-for-a-penny, 20%);
$in-for-a-penny-dark: mix(#000, $in-for-a-penny, 20%);

.element {
  color: $in-for-a-penny;
  box-shadow: 0 0 0 2px rgba($in-for-a-penny, 0.35);
}