Risk-Reward

CSS

:root {
  --risk-reward: #6a7e88;
  --risk-reward-rgb: 106 126 136;
  --risk-reward-oklch: oklch(0.581 0.028 229.5);
}

.element {
  color: var(--risk-reward);
  background-color: hsl(200 12% 47%);
  border-color: oklch(0.581 0.028 229.5);
}

Tailwind CSS v4

@theme {
  --color-risk-reward: #6a7e88;
  --color-risk-reward-50: #eef7fc;
  --color-risk-reward-100: #dfeaf0;
  --color-risk-reward-200: #c9d7de;
  --color-risk-reward-300: #aabac3;
  --color-risk-reward-400: #8ea2ac;
  --color-risk-reward-500: #748a95;
  --color-risk-reward-600: #62757e;
  --color-risk-reward-700: #4e5d65;
  --color-risk-reward-800: #39444a;
  --color-risk-reward-900: #272f33;
  --color-risk-reward-950: #151c1f;
}

SCSS

$risk-reward: #6a7e88;
$risk-reward-rgb: 106, 126, 136;
$risk-reward-light: mix(#fff, $risk-reward, 20%);
$risk-reward-dark: mix(#000, $risk-reward, 20%);

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