Summer of ’82

CSS

:root {
  --summer-of-82: #74cdd8;
  --summer-of-82-rgb: 116 205 216;
  --summer-of-82-oklch: oklch(0.797 0.087 205.9);
}

.element {
  color: var(--summer-of-82);
  background-color: hsl(187 56% 65%);
  border-color: oklch(0.797 0.087 205.9);
}

Tailwind CSS v4

@theme {
  --color-summer-of-82: #74cdd8;
  --color-summer-of-82-50: #dafdff;
  --color-summer-of-82-100: #c7f1f7;
  --color-summer-of-82-200: #a9dfe8;
  --color-summer-of-82-300: #81c4cf;
  --color-summer-of-82-400: #5aadb8;
  --color-summer-of-82-500: #2996a2;
  --color-summer-of-82-600: #267f89;
  --color-summer-of-82-700: #1e666e;
  --color-summer-of-82-800: #134b50;
  --color-summer-of-82-900: #0c3438;
  --color-summer-of-82-950: #011f22;
}

SCSS

$summer-of-82: #74cdd8;
$summer-of-82-rgb: 116, 205, 216;
$summer-of-82-light: mix(#fff, $summer-of-82, 20%);
$summer-of-82-dark: mix(#000, $summer-of-82, 20%);

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