AppKatz Kits
Small tools. Useful outcomes.
Design essentials · Kit 004

Color Palette Tools

Turn an image into a palette you can use. Refine the colors, check contrast, and see how they work together on a simple page.

Local images2–12 colorsCSS + SVG exportsOne offline HTML
Synthetic image · transparency included
Color palette workspace

1. Start with an image or the starter palette

Extraction replaces unlocked colors. Names and theme roles stay attached to their slots; review them after extraction. Locked colors stay unchanged.

A picture worth a palette

Still images only · 20 MiB maximum · 25 megapixels maximum

All alpha pixels are composited onto this background before extraction, including fully transparent pixels. Changing it takes effect on the next extraction.

No image selected. The starter palette is ready to edit.

A sampled image preview appears after successful extraction.

2. Make the palette yours

Select a swatch to edit it. Names and position numbers keep every color identifiable.

Reducing the count removes the last slots after confirmation. A locked slot cannot be removed.

Edit selected color

A lock protects color edits, extraction and removal; naming and reordering remain available.

Opaque 8-bit sRGB only. Applying RGB/HSL rounds to the nearest 8-bit channel. Input changes are applied by the matching button; the picker applies immediately.

Explore the neighbors

Select a suggestion to replace the unlocked selected swatch. HSL hue rotations and sRGB white/black mixtures are starting points, not perceptually uniform steps.

Contrast, one pair at a time

Rows are foregrounds; columns are backgrounds. Select any matrix cell for individual thresholds.

Calculated from opaque sRGB
Aa · Make room for good ideas.Sample text in your selected foreground and background.
—contrast ratio · displayed to 3 decimals
Palette contrast matrix; each button announces both colors, ratio and 4.5 threshold result.

Thresholds use the unrounded ratio. These labels assess a color pair only; they do not certify a page or product as WCAG compliant. Actual size, weight, state, transparency and context still matter.

3. Give every color a role

Assign a small theme, then export values you can carry into your own project.

Field NotesStudio / Journal / About
A sample website

Good things start
with a little space.

A quiet corner for useful ideas, considered details, and the work you want to share.

Explore the collection →
A note from the studio

This is a visual theme preview. Assign your palette roles using the controls beside it.

New ideas, thoughtfully collected.

Take your palette with you

CSS uses stable, generated property names by current position; user names never become CSS code. SVG includes color names and numeric values. The optional recipe saves colors, locks, roles and the transparency background, without image pixels or a file path.

Version 1 · max 32 KiB · replaces palette after validation

A little guidance goes a long way

Made for website starters, presentation themes, mood boards and small design handoffs.

From image to useful palette

  1. Try the synthetic example, or select a local still image. Choose the background used for transparent pixels.
  2. Set 2–12 slots. Lock any colors you need to preserve, then extract into unlocked slots.
  3. Select a numbered swatch. Edit its name, HEX, RGB or HSL; try suggestions and reorder with buttons.
  4. Inspect pair contrast and assign website roles. Download CSS, SVG, or an optional reusable recipe.

Locking does not make a color accessible; inspect each intended foreground/background pair.

Limits & color interpretation

Images are capped at 20 MiB and 25,000,000 decoded pixels. A regular grid of at most 256 × 256 pixels is sampled with smoothing off. Weighted median-cut groups 5-bit RGB bins, then reports their 8-bit means. No randomness is used. Repeated colors fill slots if there are too few distinct groups; a notice says when this happens.

Sampling can miss small details and differs from averaging every source pixel. Locks consume slots; extraction operates only on the remainder. Transparent areas can dominate when composited. The image preview shows the sampled, composited pixels.

Browser decoding/color management converts images to an sRGB canvas. ICC profiles, wide-gamut inputs, HDR, EXIF orientation and browser implementations may yield different results. This is not a color-managed print proof, CMYK converter or calibrated measurement instrument.

Verified in Windows Chrome 154: 30 engine checks and 31 browser checks passed. A real 5,000 × 5,000 PNG used 65,536 samples; a 20 MiB PNG container with padding decoded successfully. Oversized files/dimensions were rejected. Desktop and 390 px mobile layouts were checked; physical mobile devices, Firefox, Safari, ICC and EXIF-specific fixtures were not tested. The caps are safety limits, not a promise for every device or decoder.

Privacy, troubleshooting & trust

Verified from an otherwise empty folder with networking disabled: image extraction and exports worked using this HTML alone. Browser and worker request logs recorded no outgoing HTTP(S) or WebSocket requests during the tested workflows. This runtime has no uploads, analytics or external assets, and its security policy blocks connections. No persistence or automatic downloads are used.

Keep this HTML anywhere and open it directly. Recipes and exports are optional user data; no adjacent file is needed. Closing/reloading discards unsaved work. Browser extensions and your operating system are outside this tool's control.

If extraction fails, check the format, still-image status and limits; re-export to ordinary sRGB PNG/JPEG if needed. Corrupt or unsupported images leave the palette unchanged. Cancel terminates the worker; each extraction also has a 30-second timeout. Use a current desktop browser with workers, image bitmap decoding and OffscreenCanvas. Mobile memory may limit decoding below the caps.

Contrast methodology & source links

Relative luminance follows WCAG 2.2's sRGB definition, using the 0.04045 breakpoint and RGB weights 0.2126, 0.7152, 0.0722. Contrast is (lighter luminance + 0.05) / (darker luminance + 0.05). Comparisons happen before display rounding.

Normal text thresholds: AA 4.5:1, AAA 7:1. Large text: AA 3:1, AAA 4.5:1. Large means at least 18 pt, or 14 pt bold. Some UI/graphic boundaries use 3:1 with contextual requirements; a ratio alone cannot assess those requirements.

Black/white = 21:1; #777777/white ≈ 4.478 (fails 4.5); #767676/white ≈ 4.542 (passes 4.5).

Optional external references (open only when you choose): W3C relative luminance and W3C contrast guidance. No external source is required to run the Kit.

About this AppKatz Kit

Original implementation authored for AppKatz, 2026. All runtime code, documentation and styles are inline. No third-party libraries, fonts or image assets are required. The AppKatz logo and text branding identify the Kit; it is not access control. No account, remote-image URL, permission-based eyedropper, color-blindness simulation or advertising script is included.