PHP-Noise

Make noise background images with PHP-Noise, the free and open source generator at php-noise.com. Give it a colour, or let it pick one, and get back a square PNG of small tiles in shades of that colour: a texture for a web page, a slide, an email header or a social post. Choose how many tiles and how big, whether a grid runs between them, and whether the tiles vary in brightness or in hue. Make one image, a matching set from a palette, or an image encoded inline for a stylesheet. No account or API key required.

Actions

Action	What it does
Create a noise background	Make a square PNG of small tiles in shades of one colour: a texture for a web page, a slide, an email header or a social post.
Create a noise background as a data URI	Make a noise background and get it back inline, as a data URI and as a ready-made CSS background-image line, for a stylesheet, an HTML email or a page built in a later step where the picture has to travel inside the text rather than as a file.
Create several noise backgrounds	Make a matching set of noise backgrounds in one step: one for each colour in a palette, or a handful in random colours to choose between.

Create a noise background

Make a square PNG of small tiles in shades of one colour: a texture for a web page, a slide, an email header or a social post. Give it a colour or let it pick one, choose how many tiles and how big, and whether they vary in brightness or in hue. The image is saved so later steps can attach or upload it, and the colour used is reported. No account or API key required.

Inputs

Colourcolortext: Optional. The colour to build the noise from, as a hex colour. Leave it blank and a random colour is picked; the colour used is reported either way, so a later step can match text or a border to it.
Tiles acrosstilesnumber: How many tiles across and down. The image is always square: at the default tile size, 50 tiles make a 350 pixel image and 10 make a 70 pixel one.From 1 to 50. Default: 50.
Tile sizetile_sizenumber: How many pixels each tile is across. Small tiles read as a fine grain, big ones as a bold mosaic.From 1 to 20. Default: 7.
Grid widthborder_widthnumber: Width in pixels of the grid drawn between the tiles. 0 means no grid, so the tiles touch. In Brightness mode the grid is drawn in your colour itself, with the tiles in its shades.From 0 to 15. Default: 0.
Colour modemodetext: How the tile colours are made from your colour. Brightness keeps the hue and varies how light each tile is, for a subtle texture; Around picks colours near yours, which reads as more colourful.One of: brightness (Brightness, lighter and darker shades of your colour), around (Around, colours close to yours, which reads as more colourful). Default: brightness.
Shade spacingshade_spacingnumber: Brightness mode only. How far apart the shades are, as a percentage of brightness per step. 1.5 gives a subtle grain; 5 or more gives a bold one.From 0.1 to 20.0. Default: 1.5.
Shades each wayshade_stepsnumber: Brightness mode only. How many shades to make lighter than your colour, and how many darker, so 5 gives up to 11 colours in all.From 1 to 50. Default: 5.
Save asfilenametext: Optional. The name to save the image under. Named after the colour by default, e.g. noise-0b2545.png.

Outputs

bluenumber: The blue part of that colour, 0 to 255.
border_widthnumber: Width in pixels of the grid between the tiles; 0 for none.
colortext: The colour the noise was built from, as a hex colour such as #0b2545. The one that was picked, when it was left to chance.
content_typetext: File type of the saved image, always image/png.
document_reftext: Reference to the saved image, for use by a later step.
documentslist: The saved image, in the shape steps that send or upload files expect.
filenametext: Name the image was saved under.
greennumber: The green part of that colour, 0 to 255.
heightnumber: The image's height in pixels, the same as its width.
modetext: The colour mode the tiles were made in: brightness or around.
random_colortrue/false: Whether the colour was picked at random because none was given.
rednumber: The red part of that colour, 0 to 255.
shade_spacingnumber: How far apart the shades are, in Brightness mode. Empty in Around mode.
shade_stepsnumber: How many shades were made each way, in Brightness mode. Empty in Around mode.
size_bytesnumber: Size of the saved image in bytes.
tile_sizenumber: How many pixels each tile is across.
tilesnumber: How many tiles across and down.
urltext: Download link for the saved image.
widthnumber: The image's width in pixels.

Example output

{
  "blue": 69,
  "border_width": 0,
  "color": "#0b2545",
  "content_type": "image/png",
  "document_ref": "doc_5e6f708192a3b4c55e6f708192a3b4c5",
  "documents": [
    {
      "content_type": "image/png",
      "document_ref": "doc_5e6f708192a3b4c55e6f708192a3b4c5",
      "filename": "noise-0b2545.png",
      "size_bytes": 28711,
      "url": "/actions/core/serve-document/doc_5e6f708192a3b4c55e6f708192a3b4c5?teamId=6512a1b2c3d4e5f600000001"
    }
  ],
  "filename": "noise-0b2545.png",
  "green": 37,
  "height": 350,
  "mode": "brightness",
  "random_color": false,
  "red": 11,
  "shade_spacing": 1.5,
  "shade_steps": 5,
  "size_bytes": 28711,
  "tile_size": 7,
  "tiles": 50,
  "url": "/actions/core/serve-document/doc_5e6f708192a3b4c55e6f708192a3b4c5?teamId=6512a1b2c3d4e5f600000001",
  "width": 350
}

Create a noise background as a data URI

Make a noise background and get it back inline, as a data URI and as a ready-made CSS background-image line, for a stylesheet, an HTML email or a page built in a later step where the picture has to travel inside the text rather than as a file. Best for small images: the text is a third longer than the image itself. No account or API key required.

Inputs

Colourcolortext: Optional. The colour to build the noise from, as a hex colour. Leave it blank and a random colour is picked; the colour used is reported either way, so a later step can match text or a border to it.
Tiles acrosstilesnumber: How many tiles across and down. The image is always square: at the default tile size, 50 tiles make a 350 pixel image and 10 make a 70 pixel one.From 1 to 50. Default: 50.
Tile sizetile_sizenumber: How many pixels each tile is across. Small tiles read as a fine grain, big ones as a bold mosaic.From 1 to 20. Default: 7.
Grid widthborder_widthnumber: Width in pixels of the grid drawn between the tiles. 0 means no grid, so the tiles touch. In Brightness mode the grid is drawn in your colour itself, with the tiles in its shades.From 0 to 15. Default: 0.
Colour modemodetext: How the tile colours are made from your colour. Brightness keeps the hue and varies how light each tile is, for a subtle texture; Around picks colours near yours, which reads as more colourful.One of: brightness (Brightness, lighter and darker shades of your colour), around (Around, colours close to yours, which reads as more colourful). Default: brightness.
Shade spacingshade_spacingnumber: Brightness mode only. How far apart the shades are, as a percentage of brightness per step. 1.5 gives a subtle grain; 5 or more gives a bold one.From 0.1 to 20.0. Default: 1.5.
Shades each wayshade_stepsnumber: Brightness mode only. How many shades to make lighter than your colour, and how many darker, so 5 gives up to 11 colours in all.From 1 to 50. Default: 5.

Outputs

bluenumber: The blue part of that colour, 0 to 255.
border_widthnumber: Width in pixels of the grid between the tiles; 0 for none.
colortext: The colour the noise was built from, as a hex colour such as #0b2545. The one that was picked, when it was left to chance.
content_typetext: File type of the picture, always image/png.
csstext: A complete background-image declaration holding the picture, ready to paste into a stylesheet or a style attribute.
data_uritext: The whole picture as a 'data:image/png;base64,...' string, ready to use as the src of an img tag or inside a CSS url().
greennumber: The green part of that colour, 0 to 255.
heightnumber: The image's height in pixels, the same as its width.
modetext: The colour mode the tiles were made in: brightness or around.
random_colortrue/false: Whether the colour was picked at random because none was given.
rednumber: The red part of that colour, 0 to 255.
shade_spacingnumber: How far apart the shades are, in Brightness mode. Empty in Around mode.
shade_stepsnumber: How many shades were made each way, in Brightness mode. Empty in Around mode.
size_bytesnumber: The picture's size in bytes before encoding. The data URI is roughly a third longer again.
tile_sizenumber: How many pixels each tile is across.
tilesnumber: How many tiles across and down.
widthnumber: The image's width in pixels.

Example output

{
  "blue": 143,
  "border_width": 0,
  "color": "#2a9d8f",
  "content_type": "image/png",
  "css": "background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1SzTZAAAAB3RJTUUH6gkMBhAAKKQ2yAAAAAlw\");",
  "data_uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1SzTZAAAAB3RJTUUH6gkMBhAAKKQ2yAAAAAlwSFlzAAALEwAACxMBAJqcGAAA",
  "green": 157,
  "height": 60,
  "mode": "brightness",
  "random_color": false,
  "red": 42,
  "shade_spacing": 1.5,
  "shade_steps": 5,
  "size_bytes": 1846,
  "tile_size": 6,
  "tiles": 10,
  "width": 60
}

Create several noise backgrounds

Make a matching set of noise backgrounds in one step: one for each colour in a palette, or a handful in random colours to choose between. Every image is saved and comes back with the colour it was made in, in the order you gave them. Up to ten at a time. No account or API key required.

Inputs

Colourscolorslist: Optional. One background is made for each colour here: a list from an earlier step, or hex colours typed one per line or separated by commas. Leave it blank to make the number of random colours set below instead. Up to 10.
How manycountnumber: How many backgrounds to make, each in its own random colour, when no colours are listed above. Ignored when colours are listed.From 1 to 10. Default: 3.
Tiles acrosstilesnumber: How many tiles across and down. The image is always square: at the default tile size, 50 tiles make a 350 pixel image and 10 make a 70 pixel one.From 1 to 50. Default: 50.
Tile sizetile_sizenumber: How many pixels each tile is across. Small tiles read as a fine grain, big ones as a bold mosaic.From 1 to 20. Default: 7.
Grid widthborder_widthnumber: Width in pixels of the grid drawn between the tiles. 0 means no grid, so the tiles touch. In Brightness mode the grid is drawn in your colour itself, with the tiles in its shades.From 0 to 15. Default: 0.
Colour modemodetext: How the tile colours are made from your colour. Brightness keeps the hue and varies how light each tile is, for a subtle texture; Around picks colours near yours, which reads as more colourful.One of: brightness (Brightness, lighter and darker shades of your colour), around (Around, colours close to yours, which reads as more colourful). Default: brightness.
Shade spacingshade_spacingnumber: Brightness mode only. How far apart the shades are, as a percentage of brightness per step. 1.5 gives a subtle grain; 5 or more gives a bold one.From 0.1 to 20.0. Default: 1.5.
Shades each wayshade_stepsnumber: Brightness mode only. How many shades to make lighter than your colour, and how many darker, so 5 gives up to 11 colours in all.From 1 to 50. Default: 5.

Outputs

backgroundslist: One entry per image, in the same order: where it was saved and the recipe it was made with, including its colour.
colorslist: The colour of each image as a hex colour, in order.
countnumber: How many images were made.
documentslist: The saved images, in the shape steps that send or upload files expect, in the order the colours were given.

Example output

{
  "backgrounds": [
    {
      "blue": 69,
      "border_width": 0,
      "color": "#0b2545",
      "content_type": "image/png",
      "document_ref": "doc_5e6f708192a3b4c55e6f708192a3b4c5",
      "filename": "noise-0b2545.png",
      "green": 37,
      "height": 250,
      "mode": "brightness",
      "random_color": false,
      "red": 11,
      "shade_spacing": 1.5,
      "shade_steps": 5,
      "size_bytes": 9411,
      "tile_size": 10,
      "tiles": 25,
      "url": "/actions/core/serve-document/doc_5e6f708192a3b4c55e6f708192a3b4c5?teamId=6512a1b2c3d4e5f600000001",
      "width": 250
    },
    {
      "blue": 143,
      "border_width": 0,
      "color": "#2a9d8f",
      "content_type": "image/png",
      "document_ref": "doc_6f708192a3b4c5d66f708192a3b4c5d6",
      "filename": "noise-2a9d8f.png",
      "green": 157,
      "height": 250,
      "mode": "brightness",
      "random_color": false,
      "red": 42,
      "shade_spacing": 1.5,
      "shade_steps": 5,
      "size_bytes": 9704,
      "tile_size": 10,
      "tiles": 25,
      "url": "/actions/core/serve-document/doc_6f708192a3b4c5d66f708192a3b4c5d6?teamId=6512a1b2c3d4e5f600000001",
      "width": 250
    }
  ],
  "colors": [
    "#0b2545",
    "#2a9d8f"
  ],
  "count": 2,
  "documents": [
    {
      "content_type": "image/png",
      "document_ref": "doc_5e6f708192a3b4c55e6f708192a3b4c5",
      "filename": "noise-0b2545.png",
      "size_bytes": 9411,
      "url": "/actions/core/serve-document/doc_5e6f708192a3b4c55e6f708192a3b4c5?teamId=6512a1b2c3d4e5f600000001"
    },
    {
      "content_type": "image/png",
      "document_ref": "doc_6f708192a3b4c5d66f708192a3b4c5d6",
      "filename": "noise-2a9d8f.png",
      "size_bytes": 9704,
      "url": "/actions/core/serve-document/doc_6f708192a3b4c5d66f708192a3b4c5d6?teamId=6512a1b2c3d4e5f600000001"
    }
  ]
}

ActionsCopy Anchor Link

Create a noise backgroundCopy Anchor Link

Inputs

Outputs

Create a noise background as a data URICopy Anchor Link

Inputs

Outputs

Create several noise backgroundsCopy Anchor Link

Inputs

Outputs

On this page

Actions

Create a noise background

Create a noise background as a data URI

Create several noise backgrounds