Statue of Liberty

CSS

:root {
  --statue-of-liberty: #376d64;
  --statue-of-liberty-rgb: 55 109 100;
  --statue-of-liberty-oklch: oklch(0.495 0.06 181.6);
}

.element {
  color: var(--statue-of-liberty);
  background-color: hsl(170 33% 32%);
  border-color: oklch(0.495 0.06 181.6);
}

Tailwind CSS v4

@theme {
  --color-statue-of-liberty: #376d64;
  --color-statue-of-liberty-50: #e3fbf7;
  --color-statue-of-liberty-100: #d3efea;
  --color-statue-of-liberty-200: #b9ddd7;
  --color-statue-of-liberty-300: #96c2ba;
  --color-statue-of-liberty-400: #77aaa1;
  --color-statue-of-liberty-500: #579389;
  --color-statue-of-liberty-600: #4a7d74;
  --color-statue-of-liberty-700: #3b645d;
  --color-statue-of-liberty-800: #2a4943;
  --color-statue-of-liberty-900: #1c332e;
  --color-statue-of-liberty-950: #0c1e1b;
}

SCSS

$statue-of-liberty: #376d64;
$statue-of-liberty-rgb: 55, 109, 100;
$statue-of-liberty-light: mix(#fff, $statue-of-liberty, 20%);
$statue-of-liberty-dark: mix(#000, $statue-of-liberty, 20%);

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