Coral Coast

CSS

:root {
  --coral-coast: #068e9e;
  --coral-coast-rgb: 6 142 158;
  --coral-coast-oklch: oklch(0.592 0.101 208.8);
}

.element {
  color: var(--coral-coast);
  background-color: hsl(186 93% 32%);
  border-color: oklch(0.592 0.101 208.8);
}

Tailwind CSS v4

@theme {
  --color-coral-coast: #068e9e;
  --color-coral-coast-50: #d5feff;
  --color-coral-coast-100: #c2f2fb;
  --color-coral-coast-200: #a2e1ed;
  --color-coral-coast-300: #76c6d5;
  --color-coral-coast-400: #48afbe;
  --color-coral-coast-500: #0098aa;
  --color-coral-coast-600: #00808f;
  --color-coral-coast-700: #006773;
  --color-coral-coast-800: #004c54;
  --color-coral-coast-900: #01353b;
  --color-coral-coast-950: #002025;
}

SCSS

$coral-coast: #068e9e;
$coral-coast-rgb: 6, 142, 158;
$coral-coast-light: mix(#fff, $coral-coast, 20%);
$coral-coast-dark: mix(#000, $coral-coast, 20%);

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