Promise Keeping

CSS

:root {
  --promise-keeping: #afc7e8;
  --promise-keeping-rgb: 175 199 232;
  --promise-keeping-oklch: oklch(0.823 0.053 256.4);
}

.element {
  color: var(--promise-keeping);
  background-color: hsl(215 55% 80%);
  border-color: oklch(0.823 0.053 256.4);
}

Tailwind CSS v4

@theme {
  --color-promise-keeping: #afc7e8;
  --color-promise-keeping-50: #ecf6ff;
  --color-promise-keeping-100: #dde9fa;
  --color-promise-keeping-200: #c7d5ec;
  --color-promise-keeping-300: #a7b9d3;
  --color-promise-keeping-400: #8aa0be;
  --color-promise-keeping-500: #6f88aa;
  --color-promise-keeping-600: #5e738f;
  --color-promise-keeping-700: #4b5c73;
  --color-promise-keeping-800: #364455;
  --color-promise-keeping-900: #252f3b;
  --color-promise-keeping-950: #131b25;
}

SCSS

$promise-keeping: #afc7e8;
$promise-keeping-rgb: 175, 199, 232;
$promise-keeping-light: mix(#fff, $promise-keeping, 20%);
$promise-keeping-dark: mix(#000, $promise-keeping, 20%);

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