Promise

CSS

:root {
  --promise: #acc0e2;
  --promise-rgb: 172 192 226;
  --promise-oklch: oklch(0.804 0.053 261);
}

.element {
  color: var(--promise);
  background-color: hsl(218 48% 78%);
  border-color: oklch(0.804 0.053 261);
}

Tailwind CSS v4

@theme {
  --color-promise: #acc0e2;
  --color-promise-50: #edf6ff;
  --color-promise-100: #dfe8fa;
  --color-promise-200: #c8d5ec;
  --color-promise-300: #a9b8d3;
  --color-promise-400: #8d9fbe;
  --color-promise-500: #7287aa;
  --color-promise-600: #617290;
  --color-promise-700: #4d5b73;
  --color-promise-800: #374355;
  --color-promise-900: #262e3b;
  --color-promise-950: #141b25;
}

SCSS

$promise: #acc0e2;
$promise-rgb: 172, 192, 226;
$promise-light: mix(#fff, $promise, 20%);
$promise-dark: mix(#000, $promise, 20%);

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