A solid color image is a raster file in which every pixel shares one exact six-digit hex color, and you can create one in Photoshop through File > New with a Background Color, a Solid Color fill layer, or the Edit > Fill command, or in your browser with the Solid Color Image Generator.
Photoshop offers at least three reliable paths to a flat-color image. The fastest is File > New, which lets you set a Background Color before the canvas exists, so the new document is already filled when it opens. The most flexible route is a Solid Color fill layer, added from the Layers panel as an adjustment layer, because the color is reusable and the layer sits above any underlying content for easy masking. Edit > Fill paints a flat color directly into an existing selection or layer and is the right choice when you already have a working document and want to overwrite the pixels. All three end at the same place: a canvas where every pixel matches one RGB value, with no gradient, no texture, and no transparency by default.
A browser-based generator reproduces the same end product by filling a canvas with the requested hex color and encoding the result locally. Nothing leaves the page, no source file is opened, and the tool needs no Photoshop license. That makes it practical whenever the flat-color asset is the entire deliverable rather than one step inside a larger edit.
What a "Solid Color Image" Actually Means
A solid color image is defined by three properties: exact pixel dimensions, one fill color expressed as a six-digit sRGB hex value, and a chosen raster format. Each pixel of the canvas — top-left to bottom-right — carries that color value with no variation. There is no alpha channel acting as partial transparency, no noise, no border, and no embedded profile. The result is the smallest possible distinguishable asset at its target size and the most predictable input for any downstream image pipeline that expects a known color.
Solid color files are routinely used as video mattes for green-screen-style tests that do not need a real key color, as test fixtures for image processing pipelines that need a known input before cropping, resizing, filtering, or format conversion, and as blank canvas backgrounds that you layer other work on top of in Photoshop or another editor. They also act as color reference swatches when you need to communicate a specific hex code in writing rather than describe it verbally.
Photoshop's Method for Making a Solid Color Image
Photoshop has more than one solid-color workflow, and the right pick depends on whether you already have a document open. The three methods below cover the typical cases — a brand-new canvas, an existing layer or selection, and a reusable fill layer.
Method 1 — File > New with a Background Color
- Choose File > New. In the dialog, set Width, Height, Resolution, and Color Mode to match the intended use.
- Open the Background Contents menu and pick Background Color (or White, Background Color, Transparent, depending on your version of Photoshop).
- Click the Background color swatch in the toolbar and enter the hex code in the Color Picker (for example, #2563eb), then press OK.
- Click Create. The new canvas is already filled with that color when it appears on screen.
- Use File > Export > Export As… to save as PNG, JPEG, or another format. Pick the dimensions, format, and quality, then click Export.
Method 2 — Edit > Fill
- Open or create a document at the target width and height.
- Press Ctrl/Cmd + A to Select All, or use a marquee tool to select a sub-region of the canvas.
- Double-click the foreground color swatch in the toolbar, enter the hex code in the Color Picker, and click OK.
- Choose Edit > Fill. Set Contents to Foreground Color (or choose Color… to pick a new hex), then click OK.
- Save the file with File > Save As or File > Export > Export As… as a PNG, JPEG, or other format.
Method 3 — Solid Color Fill Layer
- In the Layers panel, click the Create new fill or adjustment layer icon and choose Solid Color….
- In the Color Picker, enter the hex code and click OK. A new layer filled with that color appears above the current content.
- If a flat raster is needed rather than a layered PSD, right-click the fill layer and choose Rasterize Layer, then flatten if required.
- Use File > Export > Export As… to save the final flat-color image as PNG, JPEG, or another format.
The Photoshop path is the right choice when the file is one step inside a larger composition, such as a hero panel, matte, or mockup. When the flat-color file is the entire deliverable, a browser tool like the Solid Color Image Generator is faster because it skips the New Document, Fill, and Export dialogs.
Generate a Solid Color Image in Your Browser
The browser path is a direct substitute for the Photoshop methods above. It fills a canvas with the requested hex color, encodes the result locally, and offers the file as a download without uploading anything.
- Open the Solid Color Image Generator in your browser.
- Enter the exact width and height as whole numbers from 1 to 10,000 pixels. For a 1920 × 1080 canvas, the inputs are 1920 and 1080.
- Type a six-digit hex color such as #2563eb, or use the color picker to choose one. The value is normalized into a six-digit lowercase form.
- Pick an output format: PNG for lossless output, JPEG for smaller files with adjustable quality, or WebP for modern browsers.
- For JPEG or WebP, set a whole-number quality from 1 to 100 percent. PNG ignores the quality field.
- Click Create Image. The tool reports the exact pixel dimensions, the MIME type, the normalized hex value, and an approximate file size.
- Click Download. The filename follows the pattern solid-2563eb-1920x1080.png, with .jpg used for JPEG output and the standard WebP extension for WebP.
The canvas size limit is 40 megapixels. A 1920 × 1080 background uses 1920 × 1080 = 2,073,600 pixels, or about 2.07 megapixels — well below the cap, so the canvas is accepted without complaint.
Dimensions, Formats, and Quality Controls
Three formats cover most flat-color deliverables. The differences matter when you care about losslessness, file size, or web compatibility, and the tool exposes a different control for each case.
| Format | Quality Control | Best For | Notes |
|---|---|---|---|
| PNG | Not applicable — always lossless | Test fixtures, archival assets, predictable inputs | File size scales only with dimensions; the quality slider is ignored |
| JPEG | 1 to 100 percent | Compact placeholders, social previews | Uses the .jpg extension; encoder varies by browser |
| WebP | 1 to 100 percent | Modern web delivery, smaller files at high quality | Availability depends on the browser's encoder support |
The canvas is filled at the natural size you entered. The on-screen preview is scaled down only to fit the page and is never the source of the downloaded file. Quality controls do not change the requested width, height, or the color token in the filename — they only shape the encoded byte stream. Because JPEG and WebP encoders are browser-provided, two browsers may produce different byte counts for the same width, height, color, and quality setting.
Practical Uses for Exact-Size Solid Color Files
A flat-color image at exact pixel dimensions is one of the most useful "blank" assets you can keep ready. It can sit underneath a layout mock, fill a video timeline as a matte, replace a missing product photo in a wireframe, or stand in as a deterministic input for image processing tests. Because every pixel carries the same value, any downstream crop, resize, or format conversion has a known starting point — useful when you want to isolate the effect of a single transform rather than debug both the transform and the input.
For a stand-in that needs a label inside the canvas, the Placeholder Image Generator adds centered text on a flat background. The Image Placeholder for Photoshop, Without the App guide covers the same workflow in more depth. Browser tools fill a real niche for users who do not have a Photoshop license or simply want a file faster than opening a desktop editor.
Solid Color vs. Other Flat-Color Generators
The browser generator is deliberately narrow. It does not produce transparency, gradients, patterns, noise, text, logos, palettes, ICC profiles, or CMYK output, and it cannot batch multiple sizes in one run. Those limits are intentional: focused tooling avoids hidden defaults and keeps the output byte-exact to the inputs you supplied. When you need a gradient, use a gradient tool; when you need a labeled placeholder, use the Placeholder Image Generator linked above; when you need print-managed color, use a color-managed editor.
The flat fill is produced through the browser's standard Canvas 2D API using the fillRect primitive documented on MDN, so each pixel of the natural-size canvas receives the requested color with no hidden overlay or built-in correction. PNG handles the lossless case, JPEG and WebP handle the compact lossy case, and the reported MIME type tells you exactly what the browser produced. A failed or unsupported encoding returns an explicit error rather than a silent fallback, so you can fix the input rather than live with a degraded output.