I have a CP437 tileset:

which I want to use as a CSS sprite on a webpage Currently, I have a very simple markup and css:

.tile {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.cp437-0 {
    background: url('tileset/tileset.png') 0 0;
}

.cp437-1 {
    background: url('tileset/tileset.png') 16px 0;
}

// ...

<span class="tile, cp437-0">&nbsp;</span>

This works very well, but I'd also like to add color to these grayscale sprites. How can I do this with using HTML/CSS or Javascript?

Is it possible to set background color for the resulting image?

Clarification:

I'd like to be able to draw things like these to the browser window using the sprite:

I have a CP437 tileset:

which I want to use as a CSS sprite on a webpage Currently, I have a very simple markup and css:

.tile {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.cp437-0 {
    background: url('tileset/tileset.png') 0 0;
}

.cp437-1 {
    background: url('tileset/tileset.png') 16px 0;
}

// ...

<span class="tile, cp437-0">&nbsp;</span>

This works very well, but I'd also like to add color to these grayscale sprites. How can I do this with using HTML/CSS or Javascript?

Is it possible to set background color for the resulting image?

Clarification:

I'd like to be able to draw things like these to the browser window using the sprite:

• javascript
• html
• css
• colors
• sprite

• What do you mean by "background color"? There is a simple CSS property called background-color that will do it. Please clarify your question. As it stands everyone, me included, seems to have understood you wanted to change the white to black into some other shade. Is it so? And then, since your image is made of a shade of color, what should be the master one? I.e, if you set it to color1 should it be white to color1 or color1 to black or color1 to color2 maybe? – Kaiido Commented Sep 28, 2018 at 14:54
• I have a single file (pasted into my question) and I want to use it as you would use a Text Icon (FontAwesome for example). I would also like to set the background and foreground (this is what color the grayscale sprite will get converted to) individually. I've updated my question for clarification. – Adam Arold Commented Sep 28, 2018 at 21:26
• So from color1 to black no background on your example (well the ivory one but I hope you know how to make it). Why do you use a css spritesheet if what you want is actually a font? What doesn't work with Lazar's solution? – Kaiido Commented Sep 28, 2018 at 23:42
• Because fonts are not pixel perfect. I tried that approach before. – Adam Arold Commented Sep 29, 2018 at 0:20
• Possible duplicate of How to transform black into any given color using only CSS filters – mbomb007 Commented Oct 31, 2023 at 19:50

4 Answers 4

You can abuse the fact that the sepia filter can saturate a grayscale input:

.blue {
  filter: sepia(100%) hue-rotate(150deg) brightness(80%) saturate(420%);
}

.red {
  filter: sepia(100%) hue-rotate(300deg) brightness(80%) saturate(420%);
}

<img src="https://i.sstatic.net/nQET4.png" class="blue" />
<img src="https://i.sstatic.net/nQET4.png" class="red" />

Tuning the filters to get the desired results is tricky, but as you can see in this example, it's doable just fine.

There's no pure CSS way to do this -- you'll need at least some SVG magic. For example, you can define a filter. It's, however, tricky to nail the color as it requires some not-so-trivial knowledge of maths, matrices and how computers work with colors.

Here's an example with golden images.

.defs-only {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: -1;
  width: 1px;
  height: 1px;
}

img {
  filter:  url(#monochrome);
}

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

<img src="https://i.sstatic.net/nQET4.png">

Check out, for example, this article for more info.

You could also use blend-modes but since your image is transparent, it will unfortunately apply the background-color to the... background, as well. If you can get the same image with the black background, it would work. A full list of blend modes if available at MDN, so you can play with different values.

.sprite {
  width: 256px;
  height: 256px;
  background-image: url(https://i.sstatic.net/nQET4.png);
  background-color: #ab1248;
  background-blend-mode: hard-light;
  
}

<div class="sprite">

If you work with transparent png, you can combine mask and mix-blend-mode

.bubble{
  display: inline-block;
  float: left;
  -webkit-mask: url(https://i.sstatic.net/og0JD.png);
  mix-blend-mode: normal;
  width:20px;
  height:20px;
}

#color1{
  background-color:blue;
}

#color2{
  background-color:red;
}

#color3{
  background-color:green;
}
#color4{
  background-color:yellow;
}
#color5{
  background-color:pink;
}

<div id="color1" class="bubble"></div>
<div id="color2" class="bubble"></div>
<div id="color3" class="bubble"></div>
<div id="color4" class="bubble"></div>
<div id="color5" class="bubble"></div>