#356D7F

CSS

:root {
  --ocean-s-embrace: #356d7f;
  --ocean-s-embrace-rgb: 53 109 127;
  --ocean-s-embrace-oklch: oklch(0.504 0.065 221.5);
}

.element {
  color: var(--ocean-s-embrace);
  background-color: hsl(195 41% 35%);
  border-color: oklch(0.504 0.065 221.5);
}

Tailwind CSS v4

@theme {
  --color-ocean-s-embrace: #356d7f;
  --color-ocean-s-embrace-50: #e2faff;
  --color-ocean-s-embrace-100: #d2edf8;
  --color-ocean-s-embrace-200: #b7dbe9;
  --color-ocean-s-embrace-300: #94bfd0;
  --color-ocean-s-embrace-400: #73a8ba;
  --color-ocean-s-embrace-500: #5190a5;
  --color-ocean-s-embrace-600: #467a8b;
  --color-ocean-s-embrace-700: #376270;
  --color-ocean-s-embrace-800: #274852;
  --color-ocean-s-embrace-900: #1a3239;
  --color-ocean-s-embrace-950: #0a1e23;
}

SCSS

$ocean-s-embrace: #356d7f;
$ocean-s-embrace-rgb: 53, 109, 127;
$ocean-s-embrace-light: mix(#fff, $ocean-s-embrace, 20%);
$ocean-s-embrace-dark: mix(#000, $ocean-s-embrace, 20%);

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