#F4897A

CSS

:root {
  --in-for-a-penny: #f4897a;
  --in-for-a-penny-rgb: 244 137 122;
  --in-for-a-penny-oklch: oklch(0.743 0.133 29);
}

.element {
  color: var(--in-for-a-penny);
  background-color: hsl(7 85% 72%);
  border-color: oklch(0.743 0.133 29);
}

Tailwind CSS v4

@theme {
  --color-in-for-a-penny: #f4897a;
  --color-in-for-a-penny-50: #ffe8de;
  --color-in-for-a-penny-100: #ffd8cd;
  --color-in-for-a-penny-200: #ffc0b2;
  --color-in-for-a-penny-300: #f49d8d;
  --color-in-for-a-penny-400: #e27e70;
  --color-in-for-a-penny-500: #cf5e50;
  --color-in-for-a-penny-600: #af5045;
  --color-in-for-a-penny-700: #8d4036;
  --color-in-for-a-penny-800: #692d28;
  --color-in-for-a-penny-900: #4a1f1b;
  --color-in-for-a-penny-950: #300e0b;
}

SCSS

$in-for-a-penny: #f4897a;
$in-for-a-penny-rgb: 244, 137, 122;
$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);
}