<h1>Darkening 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 darken a dark green color in increments of 10%.</p>

<p><strong>Note: This demo should now work on all browsers. Test your work to make sure it does what you need in your target browsers.</strong></p>

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

:root {
  --color-mint: #98ecc3;

  --dark-text1: color-mix(in srgb, var(--color-mint) 10%, black);
  --dark-text2: color-mix(in srgb, var(--color-mint) 20%, black);
  --dark-text3: color-mix(in srgb, var(--color-mint) 30%, black);
  --dark-text4: color-mix(in srgb, var(--color-mint) 40%, black);
  --dark-text5: color-mix(in srgb, var(--color-mint) 50%, black);
  --dark-text6: color-mix(in srgb, var(--color-mint) 60%, black);
  --dark-text7: color-mix(in srgb, var(--color-mint) 70%, black);
  --dark-text8: color-mix(in srgb, var(--color-mint) 80%, black);
  --dark-text9: color-mix(in srgb, var(--color-mint) 90%, black);
}
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 black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

div {
  color: white;
}

.mint {
  background-color: var(--color-mint);
  color: black;
}

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

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

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

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

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

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

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

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

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