Blue Rice

CSS

:root {
  --blue-rice: #b3d9f3;
  --blue-rice-rgb: 179 217 243;
  --blue-rice-oklch: oklch(0.867 0.054 238.1);
}

.element {
  color: var(--blue-rice);
  background-color: hsl(204 73% 83%);
  border-color: oklch(0.867 0.054 238.1);
}

Tailwind CSS v4

@theme {
  --color-blue-rice: #b3d9f3;
  --color-blue-rice-50: #e8f8ff;
  --color-blue-rice-100: #d8ebf9;
  --color-blue-rice-200: #c0d8e9;
  --color-blue-rice-300: #9fbcd1;
  --color-blue-rice-400: #81a4bb;
  --color-blue-rice-500: #648ca6;
  --color-blue-rice-600: #55768c;
  --color-blue-rice-700: #445f71;
  --color-blue-rice-800: #304553;
  --color-blue-rice-900: #21303a;
  --color-blue-rice-950: #101c24;
}

SCSS

$blue-rice: #b3d9f3;
$blue-rice-rgb: 179, 217, 243;
$blue-rice-light: mix(#fff, $blue-rice, 20%);
$blue-rice-dark: mix(#000, $blue-rice, 20%);

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