<h1>Lightening colors with <code>color-mix()</code></h1>

<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to lighten a black-like colors in increments of 10%.</p>

<p><strong>Note: This demo should now work in all major browsers</strong></p>

<div class="color-container">
  <div class="color-item charcoal">charcoal<br /><strong>#222023</strong></div>
  <div class="color-item dark-text9">charcoal<br /><strong>10% lighter</strong></div>
  <div class="color-item dark-text8">charcoal<br /><strong>20% lighter</strong></div>
  <div class="color-item dark-text7">charcoal<br /><strong>30% lighter</strong></div>
  <div class="color-item dark-text6">charcoal<br /><strong>40% lighter</strong></div>
  <div class="color-item dark-text5">charcoal<br /><strong>50% lighter</strong></div>
  <div class="color-item dark-text4">charcoal<br /><strong>60% lighter</strong></div>
  <div class="color-item dark-text3">charcoal<br /><strong>70% lighter</strong></div>
  <div class="color-item dark-text2">charcoal<br /><strong>80% lighter</strong></div>
  <div class="color-item dark-text1">charcoal<br /><strong>90% lighter</strong></div>
</div>

:root {
  --color-charcoal: #222023;
  --color-black: #111111;

  --text1: color-mix(in srgb, var(--color-charcoal) 10%, white);
  --text2: color-mix(in srgb, var(--color-charcoal) 20%, white);
  --text3: color-mix(in srgb, var(--color-charcoal) 30%, white);
  --text4: color-mix(in srgb, var(--color-charcoal) 40%, white);
  --text5: color-mix(in srgb, var(--color-charcoal) 50%, white);
  --text6: color-mix(in srgb, var(--color-charcoal) 60%, white);
  --text7: color-mix(in srgb, var(--color-charcoal) 70%, white);
  --text8: color-mix(in srgb, var(--color-charcoal) 80%, white);
  --text9: color-mix(in srgb, var(--color-charcoal) 90%, white);
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 1.25rem;
  padding: 2em;
}

.color-container {
  margin-bottom: 1em;
  margin-top: 2em;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
}

.color-item {
  border: 2px solid var(--color-black);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

div {
  color: white;
}

.charcoal {
  background-color: var(--color-charcoal);
}
.dark-text1 {
  background-color: var(--text1);
  color: var(--color-black);
}

.dark-text2 {
  background-color: var(--text2);
}

.dark-text3 {
  background-color: var(--text3);
}

.dark-text4 {
  background-color: var(--text4);
}

.dark-text5 {
  background-color: var(--text5);
}

.dark-text6 {
  background-color: var(--text6);
}

.dark-text7 {
  background-color: var(--text7);
}

.dark-text8 {
  background-color: var(--text8);
}

.dark-text9 {
  background-color: var(--text9);
}