Bright and Breezy

CSS

:root {
  --bright-and-breezy: #b5ddeb;
  --bright-and-breezy-rgb: 181 221 235;
  --bright-and-breezy-oklch: oklch(0.873 0.046 221.1);
}

.element {
  color: var(--bright-and-breezy);
  background-color: hsl(196 57% 82%);
  border-color: oklch(0.873 0.046 221.1);
}

Tailwind CSS v4

@theme {
  --color-bright-and-breezy: #b5ddeb;
  --color-bright-and-breezy-50: #e8f8ff;
  --color-bright-and-breezy-100: #d8ecf3;
  --color-bright-and-breezy-200: #c0d9e3;
  --color-bright-and-breezy-300: #9fbdc9;
  --color-bright-and-breezy-400: #81a5b2;
  --color-bright-and-breezy-500: #648e9c;
  --color-bright-and-breezy-600: #557884;
  --color-bright-and-breezy-700: #44606a;
  --color-bright-and-breezy-800: #30464d;
  --color-bright-and-breezy-900: #213136;
  --color-bright-and-breezy-950: #101d21;
}

SCSS

$bright-and-breezy: #b5ddeb;
$bright-and-breezy-rgb: 181, 221, 235;
$bright-and-breezy-light: mix(#fff, $bright-and-breezy, 20%);
$bright-and-breezy-dark: mix(#000, $bright-and-breezy, 20%);

.element {
  color: $bright-and-breezy;
  box-shadow: 0 0 0 2px rgba($bright-and-breezy, 0.35);
}