Interesting Aqua

CSS

:root {
  --interesting-aqua: #9bafb2;
  --interesting-aqua-rgb: 155 175 178;
  --interesting-aqua-oklch: oklch(0.74 0.023 207.6);
}

.element {
  color: var(--interesting-aqua);
  background-color: hsl(188 13% 65%);
  border-color: oklch(0.74 0.023 207.6);
}

Tailwind CSS v4

@theme {
  --color-interesting-aqua: #9bafb2;
  --color-interesting-aqua-50: #eef7f9;
  --color-interesting-aqua-100: #e0eaec;
  --color-interesting-aqua-200: #cad7d9;
  --color-interesting-aqua-300: #abbbbe;
  --color-interesting-aqua-400: #90a2a5;
  --color-interesting-aqua-500: #758b8e;
  --color-interesting-aqua-600: #647578;
  --color-interesting-aqua-700: #4f5e60;
  --color-interesting-aqua-800: #3a4546;
  --color-interesting-aqua-900: #273031;
  --color-interesting-aqua-950: #161c1d;
}

SCSS

$interesting-aqua: #9bafb2;
$interesting-aqua-rgb: 155, 175, 178;
$interesting-aqua-light: mix(#fff, $interesting-aqua, 20%);
$interesting-aqua-dark: mix(#000, $interesting-aqua, 20%);

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