Male Betta

CSS

:root {
  --male-betta: #347699;
  --male-betta-rgb: 52 118 153;
  --male-betta-oklch: oklch(0.539 0.086 234.7);
}

.element {
  color: var(--male-betta);
  background-color: hsl(201 49% 40%);
  border-color: oklch(0.539 0.086 234.7);
}

Tailwind CSS v4

@theme {
  --color-male-betta: #347699;
  --color-male-betta-50: #dffaff;
  --color-male-betta-100: #ceedff;
  --color-male-betta-200: #b2dbf5;
  --color-male-betta-300: #8dbfde;
  --color-male-betta-400: #6aa7ca;
  --color-male-betta-500: #458fb7;
  --color-male-betta-600: #3c799a;
  --color-male-betta-700: #30617c;
  --color-male-betta-800: #20475b;
  --color-male-betta-900: #153140;
  --color-male-betta-950: #061d29;
}

SCSS

$male-betta: #347699;
$male-betta-rgb: 52, 118, 153;
$male-betta-light: mix(#fff, $male-betta, 20%);
$male-betta-dark: mix(#000, $male-betta, 20%);

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