Pale Seafoam

CSS

:root {
  --pale-seafoam: #c3e7e8;
  --pale-seafoam-rgb: 195 231 232;
  --pale-seafoam-oklch: oklch(0.903 0.038 198.6);
}

.element {
  color: var(--pale-seafoam);
  background-color: hsl(182 45% 84%);
  border-color: oklch(0.903 0.038 198.6);
}

Tailwind CSS v4

@theme {
  --color-pale-seafoam: #c3e7e8;
  --color-pale-seafoam-50: #e9f9f9;
  --color-pale-seafoam-100: #daeced;
  --color-pale-seafoam-200: #c3d9db;
  --color-pale-seafoam-300: #a2bebf;
  --color-pale-seafoam-400: #85a6a7;
  --color-pale-seafoam-500: #698e8f;
  --color-pale-seafoam-600: #597879;
  --color-pale-seafoam-700: #476061;
  --color-pale-seafoam-800: #334747;
  --color-pale-seafoam-900: #233131;
  --color-pale-seafoam-950: #121d1d;
}

SCSS

$pale-seafoam: #c3e7e8;
$pale-seafoam-rgb: 195, 231, 232;
$pale-seafoam-light: mix(#fff, $pale-seafoam, 20%);
$pale-seafoam-dark: mix(#000, $pale-seafoam, 20%);

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