Surf Rider

CSS

:root {
  --surf-rider: #0193c2;
  --surf-rider-rgb: 1 147 194;
  --surf-rider-oklch: oklch(0.621 0.123 229.9);
}

.element {
  color: var(--surf-rider);
  background-color: hsl(195 99% 38%);
  border-color: oklch(0.621 0.123 229.9);
}

Tailwind CSS v4

@theme {
  --color-surf-rider: #0193c2;
  --color-surf-rider-50: #d3fcff;
  --color-surf-rider-100: #bff0ff;
  --color-surf-rider-200: #9edeff;
  --color-surf-rider-300: #72c3ec;
  --color-surf-rider-400: #3fabd9;
  --color-surf-rider-500: #0093c7;
  --color-surf-rider-600: #007da8;
  --color-surf-rider-700: #006487;
  --color-surf-rider-800: #004a64;
  --color-surf-rider-900: #003346;
  --color-surf-rider-950: #001f2d;
}

SCSS

$surf-rider: #0193c2;
$surf-rider-rgb: 1, 147, 194;
$surf-rider-light: mix(#fff, $surf-rider, 20%);
$surf-rider-dark: mix(#000, $surf-rider, 20%);

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