substitute colors for red (like: crimson, firebrick, etc...)

Substitute more subtle color for red;

by Konstantin Rouda

HTML

<button class="crimson-color">Crimson</button>

<button class="crimson-light-color">Crimson Light</button>

<button class="firebrick-color">Firebrick</button>

CSS

HTML {
  font-size: 150%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #000;
}

*, *::before, *::after {
  box-sizing: inherit;
}

* + * {
  margin-top: 1.5rem;
}

BUTTON {
  display: block;
  margin: 1rem auto 0;
  padding: 1rem 2rem;
  border: 1px solid;
  color: rgb(239, 232, 232);
  background: var(--bg-color);
}

.crimson-color {
  --bg-color: crimson;
}

.crimson-light-color {
  --bg-color: rgb(215, 93, 116);
}

.firebrick-color {
  --bg-color: firebrick;
}