On gists

CSS Colors: relative colors

CSS CSS trick

colors.css Raw #

// https://medium.com/@arnoldgunter/how-relative-colors-in-css-just-solved-one-of-the-hardest-styling-problems-24b9f5ad7b8emys

:root {
  --btn-blue: hsl(220, 100%, 50%);
  --btn-green: hsl(140, 70%, 45%);
  --btn-red: hsl(0, 80%, 55%);
  --btn-yellow: hsl(45, 100%, 50%);
}

/* Base styles for all buttons */
.button {
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Individual button base colors */
.button.blue   { --button-color: var(--btn-blue); }
.button.green  { --button-color: var(--btn-green); }
.button.red    { --button-color: var(--btn-red); }
.button.yellow { --button-color: var(--btn-yellow); }

.button.blue,
.button.green,
.button.red,
.button.yellow {
  background-color: var(--button-color);
}

/* Single hover rule using relative color */
.button:hover {
  background-color: hsl(from var(--button-color) h s calc(l + 10%));
}