Ocean in a Bowl

CSS

:root {
  --ocean-in-a-bowl: #68dfbb;
  --ocean-in-a-bowl-rgb: 104 223 187;
  --ocean-in-a-bowl-oklch: oklch(0.825 0.12 170.8);
}

.element {
  color: var(--ocean-in-a-bowl);
  background-color: hsl(162 65% 64%);
  border-color: oklch(0.825 0.12 170.8);
}

Tailwind CSS v4

@theme {
  --color-ocean-in-a-bowl: #68dfbb;
  --color-ocean-in-a-bowl-50: #d3fff2;
  --color-ocean-in-a-bowl-100: #bff6e4;
  --color-ocean-in-a-bowl-200: #9ee6cf;
  --color-ocean-in-a-bowl-300: #71ccb1;
  --color-ocean-in-a-bowl-400: #42b595;
  --color-ocean-in-a-bowl-500: #009f7b;
  --color-ocean-in-a-bowl-600: #008668;
  --color-ocean-in-a-bowl-700: #006c53;
  --color-ocean-in-a-bowl-800: #004f3b;
  --color-ocean-in-a-bowl-900: #003728;
  --color-ocean-in-a-bowl-950: #002216;
}

SCSS

$ocean-in-a-bowl: #68dfbb;
$ocean-in-a-bowl-rgb: 104, 223, 187;
$ocean-in-a-bowl-light: mix(#fff, $ocean-in-a-bowl, 20%);
$ocean-in-a-bowl-dark: mix(#000, $ocean-in-a-bowl, 20%);

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