Build any solid color field
Custom Color Screen
Enter a six digit HEX value or choose a color visually, then open it fullscreen, compare it with the previous choice and export a matching PNG. The tool keeps the selected color visible while showing its HEX, RGB and HSL forms.
- Input
- Picker or six digit HEX
- Readouts
- HEX, RGB, HSL and calculated brightness
- History
- Four recent browser colors
- Maximum image
- 7680 × 4320
Build a Custom Color Screen from any HEX value
Begin with a known value when accuracy matters, or explore visually when you are choosing a mood.
Enter the color
Type a value such as #3AB0A2, use the picker, or use the eyedropper when the browser offers it.
Review its values
Check the RGB and HSL color values, calculated brightness and suggested high contrast text color.
Compare your options
Choose another color and enable Compare A/B to place it beside the earlier selection.
Use or save it
Open the field fullscreen or download a solid PNG at the required dimensions.
Use one value across design and display
A HEX code gives collaborators a clear digital reference. Copy RGB for image or application controls and HSL when you prefer to adjust hue, saturation and lightness separately.
The screen is a preview, not proof that every device will reproduce the value identically. Panel type, device color settings, brightness and room light can all change its appearance.
A practical color comparison workflow
Set the first candidate, then choose the second and open Compare A/B. Judge both at the same time instead of relying on color memory. Check the contrast readout before placing text over the color.
When you need a neutral reference, compare the choice with pure black or a white field. Those links also provide page specific presets for testing and lighting.
What the color controls do
The settings cover selection, comparison, browser behavior and file creation.
Custom presets
After a pick, the tool creates as picked, dimmed, deep and pale versions from that color.
Brightness and text
LUM shows the calculated relative brightness used in web accessibility checks. TEXT shows whether black or white gives stronger contrast.
Recent colors
Up to four valid colors are stored locally so you can return to recent work.
Match my screen
The export uses the dimensions reported by the browser. It also accounts for the pixel ratio, which is the number of physical pixels used for one screen unit.
Important: The contrast hint is a calculation for black or white text. Check the complete interface against the accessibility requirements that apply to your project.
Custom Color Screen questions
Which HEX formats are accepted?
Enter a hash followed by six hexadecimal characters, for example #1A2B3C.
Are recent colors uploaded?
No. The recent list is stored in local browser storage on the current device.
Can the tool calibrate my monitor?
No. It displays requested browser colors but cannot measure or correct the physical output of the panel.