PaletteDock

Inspiration

A photo may contain appealing colors, but turning those pixels into usable interface roles is still a manual design decision. PaletteDock makes that decision visible and testable.

What it does

Upload an image in the browser. PaletteDock samples it and extracts five representative colors. Assign colors to background, surface, text, primary, and accent roles, then inspect a live page preview. Text contrast guidance updates as roles change. Copy the generated CSS variables or download a CSS file. The image stays in the browser; there is no account, server upload, or paid API.

How it was built

A small static app uses HTML, CSS, JavaScript, Canvas image sampling, and client-side color and contrast calculations. It runs directly from the repository or a local static server. The Devpost Learn Skill Pack guided the scope, PRD, and spec documents in the public repository. Codex assisted with planning, implementation, and validation; the documents label agent-proposed assumptions rather than presenting them as a personal learning interview.

Challenge and development takeaway

A frequent sampled color can still be a poor choice for readable text. Keeping palette extraction separate from semantic role assignment makes the contrast consequence clear in the live preview. The end-to-end flow was tested with a built-in sample and a separate uploaded PNG: image extraction, role editing, contrast feedback, and CSS download.

Run and test

Open index.html in a modern desktop browser, or serve the repository with python3 -m http.server 8000 and open http://localhost:8000. Try the included sample image, change a role, and download CSS.

Repository

https://github.com/estona815/palettedock-learn-ai-basics-2026

Newly created for Build With AI: Basics during its submission period. The repository includes devpost/scope.md, devpost/prd.md, devpost/spec.md, source code, sample asset, instructions, and an MIT license.

Built With

• canvas-api
• codex
• css
• html
• javascript