Blue Kelp

CSS

:root {
  --blue-kelp: #1d7881;
  --blue-kelp-rgb: 29 120 129;
  --blue-kelp-oklch: oklch(0.526 0.082 205);
}

.element {
  color: var(--blue-kelp);
  background-color: hsl(185 63% 31%);
  border-color: oklch(0.526 0.082 205);
}

Tailwind CSS v4

@theme {
  --color-blue-kelp: #1d7881;
  --color-blue-kelp-50: #dbfcff;
  --color-blue-kelp-100: #c9f0f6;
  --color-blue-kelp-200: #acdfe6;
  --color-blue-kelp-300: #85c4cd;
  --color-blue-kelp-400: #5fadb5;
  --color-blue-kelp-500: #3496a0;
  --color-blue-kelp-600: #2e7f87;
  --color-blue-kelp-700: #25656c;
  --color-blue-kelp-800: #184b4f;
  --color-blue-kelp-900: #103437;
  --color-blue-kelp-950: #021f22;
}

SCSS

$blue-kelp: #1d7881;
$blue-kelp-rgb: 29, 120, 129;
$blue-kelp-light: mix(#fff, $blue-kelp, 20%);
$blue-kelp-dark: mix(#000, $blue-kelp, 20%);

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