Websafe color filter

index.html

<!--
SVG filter to make your images look like its 1999!

(Hi Dan!)
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 160">
  <defs>
    <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0" stop-color="#ff0000"></stop>
      <stop offset="0.2" stop-color="#ffff00"></stop>
      <stop offset="0.4" stop-color="#00ff00"></stop>
      <stop offset="0.6" stop-color="#00ffff"></stop>
      <stop offset="0.8" stop-color="#0000ff"></stop>
      <stop offset="1" stop-color="#ff00ff"></stop>
    </linearGradient>
    <filter id="websafe" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncG>
        <feFuncB type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="ultrasafe" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 1"></feFuncR>
        <feFuncG type="discrete" tableValues="0 1"></feFuncG>
        <feFuncB type="discrete" tableValues="0 1"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-weight="bold">
    <text x="0" y="20">Default (8-bit)</text>
    <rect x="0" y="30" width="100%" height="20"></rect>
    <text x="0" y="70">Web Safe (4-bit)</text>
    <rect x="0" y="80" width="100%" height="20" style="filter:url(#websafe)"></rect>
    <text x="0" y="120">Ultra Safe! (1-bit)</text>
    <rect x="0" y="130" width="100%" height="20" style="filter:url(#ultrasafe)"></rect>
  </g>
</svg>
<div>
  <img src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  <img class="websafe" src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  <img class="ultrasafe" src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>

style.css

img {
  width: 400px;
}

rect {
  fill: url(#rainbow);
}
.websafe {
  filter: url(#websafe);
}

.ultrasafe {
  filter: url(#ultrasafe);
}

websafe-color-filter.markdown

Websafe color filter

Tired of millions of colors in your images? In the good old days we had 4096 colors and glad of it! Here's a css filter to get retro web-safe 4-bit images back.

Bonus! Ultra-safe 1-bit images! 8 colors are the best colors!

A Pen by Spencer Bliven on CodePen.

License.

Inspired by Dan Q