QUBU / GAME DEVELOPMENT
Find your game’s colors.
Five colors. A practical interface preview. Ready-to-use exports.
Images stay on your device. No account needed.
Static PNG, JPEG, WebP · 10 MiB · 16 MP · maximum 8192 pixels per side.
Game UI preview
A new route
Prepare your expedition. The next stop is waiting.
Button text automatically uses black or white. This is a visual sample.
Text contrast
Quest complete. A new region is unlocked.
WCAG AA: normal text 4.5:1; large text 3:1. Large: at least 24 px or about 18.67 px bold. Pass/fail uses the unrounded ratio. Only the selected two opaque colors are evaluated.
Palettes in this browser
Stored only when you press Save. Up to 10 palettes. Clearing browser data removes saves; download JSON as a backup.
Choose a seed color or select an image.
Build a color palette for a game interface
A useful game palette helps players read text, find actions and distinguish panels from the background. This tool assigns five editable colors to background, surface, text, accent and secondary roles. Inspect HEX, RGB and HSL values, then measure text contrast between any two palette colors.
From a seed color to an interface
- Choose a seed color that fits your game.
- Generate complementary or analogous harmony. The secondary accent shifts by 180 or 30 degrees on the HSL hue wheel. Dark surfaces and light text are starting values.
- Edit each card with a six-digit HEX value or the color picker.
- Check text against the panel in the preview. Test additional pairs, such as accent text on the surface, separately.
- Export CSS variables, JSON data or a 1000 × 320 PNG swatch strip.
Example: an expedition quest panel
The initial green accent marks the continue action. A dark surface carries light body text, while the secondary accent identifies the chapter. If you change the chapter label color, test the secondary/surface pair too. Passing body-text contrast does not establish accessibility for the whole screen. Communicate success and errors with labels or symbols as well as color.
How image extraction works
Static PNG, JPEG and WebP files are decoded in your browser. Limits are 10 MiB, 16 million pixels and 8192 pixels per side. The image is reduced to at most 128 × 128 samples. RGB channels are grouped into 32-level intervals; the five most frequent groups provide their mean colors. Samples with alpha below 128 are ignored. If fewer than five colors are found, existing colors repeat. Results follow frequency order and are not automatically suitable for their interface roles.
This is an approximate palette extractor, not an exact pixel picker. Resizing, partial transparency and browser color management can affect results. Animated images and SVG are unsupported. Fully transparent images yield no palette.
Reading the contrast result
The tool calculates the WCAG relative luminance ratio for opaque sRGB colors. AA requires 4.5:1 for normal text, or 3:1 for large text: at least 24 px, or about 18.67 px bold. Pass/fail uses the unrounded ratio. Image backgrounds, gradients, color vision differences and whole-interface accessibility are outside this check. See the W3C explanation of text contrast.
Exports and saved palettes
CSS contains five named variables. JSON includes roles, HEX, RGB and HSL values. PNG exports a swatch strip for design notes, not a screenshot of the game preview. Save stores up to ten palettes in this browser only. A JSON download is a portable record; this version does not import JSON.
Frequently asked questions
Are images stored on a server? No. File processing stays on your device, and images are not written to browser storage either.
Does color harmony guarantee readable text? No. Hue relationships and contrast are different properties. Test each text/background pair you use.
Can I use the colors in a game engine? Transfer the HEX or RGB values and check your engine’s sRGB/linear settings. This tool does not generate shaders or engine materials.
Related tools
Build animation frames with the Sprite Sheet Generator, inspect palette data with the JSON Formatter, or browse QUBU Tools.