Visual Design · Color Systems · Interaction Design
Platform
Web
Tools
HTML · CSS · JavaScript · Canvas · Node.js test runner · Git
Status
Working prototype · user testing planned
Actual product interface · Visual Design / Color Systems
01Extract02Name & refine03Assign roles
01 / CONTEXT & CHALLENGE
How can extracted color become a useful design material rather than a static list of swatches?
The challenge
Palette Snap organizes the work into Extract, Refine, and Export. Designers can move from image colors to names, semantic roles, contrast checks, and reusable output without an account.
Key design decision
Offer suggestions without silently replacing a selected color.
Current result
Designers can turn an image into an editable palette and export it in several formats. Uploaded and pasted images are processed locally. Time savings and ease of use have not yet been measured.
Designed for Visual and product designers turning image references into usable palettes.
The constraint
A palette alone cannot establish accessibility: contrast depends on a specific foreground and background pairing. Browser clipboard and remote-image capabilities also vary.
The design review focuses on the working product. Participant research and usability evaluation are planned next.
IMAGE → PALETTE / ACTUAL SAMPLE OUTPUT
Extraction begins the design work.
EXTRACTED IN THE PRODUCT
#0B0307#B7730E#AE8B86#572902#815B54#D8CBC1
Name, refine, assign roles, and check a pair before export. Extraction does not automatically make a palette accessible.
02 / INFORMATION ARCHITECTURE
Organize around the task.
COLOR ROLES / DESIGN ANALYSIS OF EXTRACTED OUTPUT
A color’s job depends on its context.
Deep neutral
Potential text
#0B0307
Warm accent
Selective emphasis
#B7730E
Supporting tone
Secondary grouping
#AE8B86
Light neutral
Potential surface
#D8CBC1
These are analytical role suggestions for actual extracted colors. Every intended foreground/background combination still needs evaluation.
The main product areas support different tasks; people can move between them as their needs change.
03 / DESIGN REASONING
The choices behind the experience.
DESIGN DECISION / 01
Keep refinement under the designer’s control
Observed in the product
Swatches support editing, ordering, locks, names, and editable semantic-role suggestions.
Design response
Offer suggestions without silently replacing a selected color.
Rationale
Color has contextual and expressive value. Explicit acceptance preserves authorship while exposing an accessible alternative for a particular pairing.
Tradeoff
The designer must still evaluate the suggestion in the actual interface.
Actual selected-color panel. The swatch remains connected to editable and reusable information.
01
One selected color
A large sample and repeated value keep the editing context visible.
02
Multiple representations
HEX, RGB, and HSL offer copy actions for different destinations.
03
Meaning and control
Naming, role assignment, move controls, and locking support deliberate refinement.
DESIGN DECISION / 02
Make palette changes reversible
Observed in the product
The product includes bounded undo/redo, recent history, and saved palettes.
Design response
Preserve a recovery path while designers explore colors and ordering.
Rationale
Experimentation is easier when a previous arrangement can be recovered. Keyboard move controls also offer an alternative to dragging.
Tradeoff
Local history is not a cloud backup; clearing browser storage removes saved work.
COPY INTERACTION / ACTUAL STATES
Make the result of an action visible.
Before copying: the selected value and copy action are available.
After activating Copy value in the actual product. Browser permission determines clipboard success.
Carry names and roles forward into reusable output.
Rationale
A palette becomes more useful when the result fits the next design or implementation task rather than requiring manual transcription.
Tradeoff
Multiple formats create choice; grouped export categories are needed to keep the primary action understandable.
Names and values complement color. Selection is indicated by an outline rather than a hue change alone.
04 / VISUAL & INTERACTION SYSTEM
Give the structure a visual expression.
Swatches are both visual samples and editable design data. Naming and semantic roles connect appearance to purpose; explicit contrast results describe a pairing rather than declaring an entire palette accessible. The extraction, refinement, and export sequence gives each stage a different visual priority.
RESPONSIVE BEHAVIOR / ACTUAL CAPTURES
Keep refinement available in a narrow workspace.
Desktop: related controls and output share the available width.
Mobile: actual 390px capture. Read the controls and their output in sequence.
A narrow layout trades simultaneous visibility for readable controls. The next usability check should examine whether people can connect changes with output after scrolling.
05 / INCLUSIVE INTERACTION
Behavior matters as much as appearance.
Keyboard controls offer an alternative to dragging colors. Dialogs, menus, action feedback, and contrast results support editing and recovery. Upload and manual entry remain available when browser tools are unsupported. A full accessibility review is still needed.
06 / OUTCOME & REFLECTION
What exists. What remains to learn.
Designers can turn an image into an editable palette and export it in several formats. Uploaded and pasted images are processed locally. Time savings and ease of use have not yet been measured.
What works
Color remains connected to values, names, roles, and recovery controls.
What remains limited
A suggested role or passing pair cannot guarantee that every use of the palette is accessible.
Next questions
Automatic extraction starts the work; naming, grouping, correction, and recovery make the result usable. Future testing should examine whether designers understand the difference between a visually harmonious palette and a passing contrast pair.
CONTRIBUTION & EVIDENCE
My contribution and the next questions.
My contribution
The palette-creation workflow, interaction hierarchy, editing experience, semantic color organization, and accessibility considerations.
Next user study
Participant testing is planned. The central question is: Can a designer refine an extracted palette and export the intended roles without losing work?
Constraints & priorities
The designer must still evaluate the suggestion in the actual interface.
What the design supports
Color remains connected to values, names, roles, and recovery controls. The next evaluation will look for: Correct export selection, understandable feedback, recovery from unwanted edits, and accurate interpretation of contrast results.
07 / PROPOSED RESEARCH · NOT CONDUCTED
The next questions to test.
Proposed tasks
Extract a sample palette, name and move a color, check a pair, undo an edit, and choose an export.
Research question
Can a designer refine an extracted palette and export the intended roles without losing work?
