Pattern Colorizer

Pick a pattern, tweak the colors, or upload your own SVG / PNG.

No uploaded patterns yet

PNG

Norwegian Rose

SVG

Nordic Cross

SVG

Fjord Waves

Background color

Recolor patterni

Pattern color

Tile size (px)

Recoloring works via alpha-masking for PNGs and a forced-fill override for SVGs — best results with simple, flat, single-tone source files. Turn "Recolor pattern" off to show a file's original colors as-is. Uploads are saved to your own inventory and persist across sessions.

CSS for this background

.pattern-bg {
  background-color: #38a0b7;
  position: relative; /* needed for the ::after mask layer */
}
.pattern-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1b3b40;
  -webkit-mask-image: url("norwegian-rose.png");
  mask-image: url("norwegian-rose.png");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 48px 48px;
  mask-size: 48px 48px;
}
/* Replace "norwegian-rose.png" with your self-hosted copy of the uploaded file */