A solid color image is a raster file in which every pixel carries the same RGB value, typically expressed as a six-digit hexadecimal code such as #2563eb, and the file's pixel dimensions (for example 1920 by 1080) define its exact size on screen. In Adobe Photoshop, "solid color" usually refers to a Solid Color fill layer, which is a non-destructive adjustment layer that paints a single flat color over the entire canvas and can have its opacity, blend mode, and masking changed later. That is a useful editing construct, but it is not the same thing as a finished flat-color file. If the goal is simply a single-color raster at precise dimensions for a presentation, a CSS test fixture, a social preview base, or a placeholder, launching Photoshop and saving a layered PSD is often more than the job needs. A browser-side generator can produce that flat-color file directly, locally, and in a single pass.
Solid Color in Photoshop: What the Term Actually Means
Photoshop has two distinct features that match the words "solid color", and they produce different artifacts. The first is the Solid Color fill layer, found under the Layers panel's adjustment layer menu. A Solid Color fill layer is an adjustment object that covers the entire canvas with one sRGB color, sits above the layers below it, and can be masked, blended, or have its opacity reduced without touching the underlying pixels. The second is the Edit > Fill command, which paints the currently selected pixels or layer with the foreground color, the background color, a black, 50% gray, or white preset, or a custom color from the color picker.
Both approaches live inside a Photoshop document. Neither one produces, on its own, a downloaded flat-color image file in a specific format at specific pixel dimensions. To get that, you typically also choose File > Save a Copy or File > Export > Export As and pick PNG, JPEG, or another format. For many tasks, including the layers and dialog steps is more workflow than the deliverable needs.
How to Add a Solid Color Fill Layer in Photoshop
These are the standard in-app steps for creating the non-destructive Solid Color fill layer that the term "solid color in Photoshop" most often refers to:
- Open the document, or create a new one at the target pixel dimensions via File > New.
- In the Layers panel, click the half-filled circle icon labeled Create new fill or adjustment layer.
- Choose Solid Color from the pop-up menu. Photoshop opens the Color Picker (拾色器) on top of the new layer.
- Type or pick the desired six-digit hexadecimal value, for example #2563eb, then click OK.
- If the fill needs to cover only part of the canvas, add a layer mask and paint with black to hide the rest.
- Adjust Opacity and Blend mode in the Layers panel if a translucent or blended result is wanted.
- Export the result with File > Export > Export As, picking PNG, JPEG, or another format and the exact width and height.
For a one-shot fill on an existing selection or layer, Edit > Fill opens a dialog with the same color choices, applies them directly to pixels, and is destructive. Either method produces the same hex value as a flat fill, but only the fill-layer method remains editable once it has been applied.
When the Job Is Just a Flat-Color File, Not a Layer
Plenty of everyday tasks never need a fill layer, a mask, blend modes, or a PSD file. They only need a flat raster at exact pixel dimensions in a common format. Typical cases include:
- A 1920 by 1080 background panel for a slide deck mock-up.
- A 1200 by 630 base for a social-share preview before the real artwork is ready.
- A 1 by 1 pixel tracking-test fixture used by a render or pipeline test.
- A 512 by 512 swatch tile for a color comparison grid.
- A flat backdrop or matte plate that an editing script will overwrite later.
For each of these, the Photoshop route still works but adds at least seven menu clicks, a Save or Export dialog, and a round-trip through a layered document. A browser tool that produces the same flat file directly skips all of that. The Solid Color Image Generator is built exactly for this case: enter width, enter height, pick a hex color, pick a format, click create, and download. For the full in-app walkthrough of the Photoshop-only path, including masking and the Export As dialog, see How to Make an Image a Solid Color in Photoshop; the rest of this guide focuses on the flat-file alternative.
Generate the Same Flat-Color File in Your Browser
The browser tool follows a strict, narrow contract: one color, exact dimensions, one of three formats, and a local download. There is no upload, no account, no remote render, and no preset aspect ratio. The steps mirror what the in-app Photoshop flow would produce once you skip the layers.
- Enter the exact output width and height in whole pixels. Both fields accept integers from 1 to 10,000, and the combined canvas is bounded to 40 megapixels so that a normal browser tab can hold the resulting bitmap. A 1920 by 1080 background, a 1200 by 630 social preview base, a 512 by 512 swatch, and a 1 by 1 test fixture are all well within the limit, and the tool does not pretend any of those dimensions are recommended for a particular platform.
- Choose a six-digit color, output format, and JPEG or WebP quality when applicable. The color control normalizes to a six-digit sRGB-style hexadecimal value such as #2563eb. PNG is the lossless default; JPEG and WebP expose a whole-number quality control from 1% to 100% that the browser's encoder interprets as a compression setting. PNG ignores the quality field entirely, which is the expected behavior for a lossless format.
- Select Create image, check the dimensions, MIME type, and color, then download the file. The result line repeats the normalized hex and reports exact dimensions, the MIME type the browser returned, and an approximate byte size. Compare the repeated hex with the input to confirm there was no hidden palette shift. The preview shown on the page is scaled only to fit; it is never the source for the downloaded file, so the saved PNG, JPEG, or WebP always has the requested natural dimensions.
The download is named with the chosen color token and the exact width by height, for example solid-2563eb-1920x1080.png. JPEG uses the .jpg extension, while WebP and PNG keep their standard extensions. That naming convention makes the file easy to locate later when many flat-color fixtures are stored in the same folder.
Settings, Limits, and What the Result Line Tells You
The table below summarizes what the tool accepts, what it ignores, and how the result line is constructed. Every entry is defined by the tool's documented contract rather than inferred from category norms.
| Control | Accepted range | Behavior |
|---|---|---|
| Width | 1 to 10,000 pixels, integer | Combined with height, must fit the 40 MP canvas budget |
| Height | 1 to 10,000 pixels, integer | Combined with width, must fit the 40 MP canvas budget |
| Color | Six-digit sRGB-style hex (for example #2563eb) | Normalized; no contrast, gradient, or palette adjustment applied |
| Format | PNG, JPEG, WebP | WebP availability depends on the browser's encoder |
| Quality | 1% to 100%, integer | Used only for JPEG and WebP; PNG ignores it |
| Result line | Normalized hex, exact dimensions, MIME type, byte size | Repeats the chosen color so it can be verified before download |
| Filename | solid-XXXXXX-WIDTHxHEIGHT.ext | JPEG uses .jpg, WebP and PNG use their standard extensions |
Two consequences are worth flagging up front. First, the canvas is filled with the normalized hex value once, with no gradient, texture, alpha control, border, color correction, or overlay; the implementation uses the browser's canvas fillStyle and fillRect to paint every pixel of the natural-size canvas at full opacity. If any of those extras are needed, this is the wrong tool. Second, JPEG and WebP are encoded by the browser, and different browsers may produce different byte sizes at the same quality. A failed or unsupported encoding produces an explicit error rather than a silent empty file.
Browser canvas color management and display calibration still affect how a color looks on a particular screen, so the generated file is not a substitute for a print color-managed workflow that uses embedded ICC profiles or CMYK output. The tool is built for screen-first single-color raster needs.
Where a Single-Color Image File Is Useful
Once the flat file is downloaded, it tends to slot into a small set of recurring workflows:
- Presentation backgrounds. A 1920 by 1080 PNG or JPEG in a brand color becomes the bottom layer of a slide without any visible banding from screenshotting a fill layer.
- CSS-independent test fixtures. A 1 by 1 or 800 by 600 single-color file lets a render, parser, or pipeline test run without depending on a CSS color value or a screenshot capture.
- Social preview bases. A 1200 by 630 background in the right hex saves a placeholder before the final creative is delivered.
- Color comparison assets. Two or three flat files in adjacent hex values can be opened side by side without the bias of two layers in a single Photoshop document.
- Image pipeline inputs. Cropping, resizing, filtering, and format-conversion steps behave more predictably when the starting raster is a known single color.
For tasks that need centered text, gradients, multiple colors, transparency, a printable CMYK file, or byte-for-byte deterministic JPEG output across browsers, the Solid Color Image Generator is not the right tool; it does one thing only, and does that one thing consistently. When the deliverable is a finished flat-color raster at known pixel dimensions, the browser workflow replaces most of what a Photoshop session would do for that single step.