📖 Overview
แยกสีจากรูป · K-means · ส่งออก CSS
🛠️ Tech Stack
Canvas
🏷️ Tags
- color
- design
v1.0
Color Palette
released 2026-07-08🗣️ User Command
ขอไอเดียทำเพิ่ม ship auto ด้วย
🤖 AI Response
Created single-file vanilla HTML/JS app (16KB) that uses canvas getImageData + k-means clustering to extract dominant colors from any image. Quantizes to 24 levels per channel for speed. Renders swatches with HEX/RGB/HSL. Supports copy as JSON, copy as CSS variables, download as palette PNG.
✅ What Changed
- ["\ud83c\udf89 v1.0 \u2014 Initial Release", "\ud83c\udfa8 Image \u2192 Color Palette extraction", "- Drag-drop or click to load any image (JPG/PNG/WEBP)", "- K-means clustering on canvas pixel data (100x100 sampled for speed)", "- 24-level quantization per channel for fast convergence", "- Sorts by frequency (largest cluster first)", "- Displays 3-8 dominant colors depending on image", "- Each swatch shows: HEX, RGB, HSL + percentage", "- Click swatch or button to copy (HEX/RGB/HSL)", "- Re-extract button for new random seed", "- Copy all as JSON button", "- Copy as CSS variables button (--color-1, --color-2, ...)", "- Download palette as PNG (200x[N] strip)", "- 100% client-side \u2014 image never leaves browser", "- Vanilla JS, no dependencies, 16KB single file", "- Pink kawaii theme matching CodeHub", "- Tested: pink/purple/cyan test image \u2192 3 swatches 50/25/25% \u2713"]
