MARD Bead Explorer
Overview
MARD 拼豆官方颜色数据库与图纸验证工具集。内置 291 种官方拼豆颜色（标识符 ↔ HEX 完整映射，覆盖 A/B/C/D/E/F/G/H/M/P/Q/R/T/Y/ZG 共 15 个色系），提供可视化色卡、结构化数据文件（JSON/CSV/TXT），以及一个四模式交互验证工具，覆盖从颜色查询、图纸校验到图片转像素风的全流程。
数据来源：https://www.pixel-beads.com/mard-bead-color-chart（2026 Revised Edition）
When to Use
This skill should be triggered when users:
- Query MARD bead color codes by identifier (e.g., "A1 是什么颜色", "H7 的 HEX 是多少")
- Extract or export MARD bead color data (HEX codes, color charts)
- Verify accuracy of a bead pixel pattern / sprite chart (拼豆图纸)
- Convert an image to pixel art or bead pattern (图片转像素风/拼豆图纸)
- Generate a color usage list for a bead project (用色清单)
- Discuss fuse beads / perler beads / pixel art color mapping
Resources
All deliverables are bundled in assets/:
| File | Purpose |
|---|---|
assets/mard-bead-colors.json |
Structured color database (291 colors, 15 series). Fields: id, hex, series, series_name. Use for programmatic lookup. |
assets/mard-bead-colors.html |
Visual color chart page — 291 swatches grouped by 15 series, hover to zoom. Open in browser to browse/verify colors. |
assets/mard-bead-colors.csv |
CSV format (UTF-8-BOM), 4 columns: identifier / HEX / series prefix / series name. Import to spreadsheets. |
assets/mard-bead-colors.txt |
Human-readable text, grouped by series. |
assets/mard-bead-verifier.html |
Four-mode interactive verification tool (see below). Pure frontend, no server needed. |
How to Use
1. Query a Color by Identifier
To look up the HEX code for a bead identifier (e.g., A1, B10, H7):
- Read
assets/mard-bead-colors.json, find the entry whereidmatches. - Return the
hexfield and theseries_name. - Example: A1 →
#FAF4C8(黄色系).
2. Browse the Full Color Chart
To let the user visually browse all 291 colors:
- Open
assets/mard-bead-colors.htmlin the browser (use the present_files tool with the file path — it auto-opens in the preview panel). - The page groups swatches by 15 series; hover any swatch to see its identifier and HEX.
3. Verify a Bead Pattern (Four-Mode Tool)
Open assets/mard-bead-verifier.html in the browser. The tool has four tabs:
Mode 1 — Identifier Check (标识符校验)
Paste a list of identifiers from a pattern (space/comma/newline separated). The tool checks each against the 291-color database, renders the real swatch for valid ones, and flags invalid identifiers (wrong/non-official codes). Use this to catch mislabeled or non-official colors in a pattern.
Mode 2 — Pattern Sampling (图纸采样比对)
Upload a pattern image, set grid columns/rows and a tolerance. The tool samples the center pixel of each cell, finds the nearest official color via RGB Euclidean distance, and reports match rate + highlights anomalous cells (potential color drift / off-palette colors) with a detailed anomaly table. Recommended tolerance: 30 for screen patterns, 40–50 for printed/photo patterns.
Mode 3 — Quantization Preview (颜色量化预览)
Upload any image, set output dimensions. The tool simulates "image → bead pattern" quantization (each pixel mapped to nearest official color), outputs a preview + sorted color usage list. Use this to reverse-check whether the palette covers the image well.
Mode 4 — Image to Pixel Art (图片转像素风)
Upload an image, adjust pixel block size (2–40px slider), optionally toggle "limit to MARD official colors". Outputs a side-by-side comparison (original vs pixel art), color usage list (when palette-limited), and a download-PNG button. When palette-limited, the result is directly usable as a bead pattern.
4. Export Color Data
To give the user the color data in a specific format:
- JSON (programmatic): copy
assets/mard-bead-colors.json - CSV (spreadsheet): copy
assets/mard-bead-colors.csv - TXT (human-readable): copy
assets/mard-bead-colors.txt
Color Matching Algorithm
The verifier uses RGB Euclidean distance for nearest-neighbor matching:
distance = sqrt((r1-r2)² + (g1-g2)² + (b2-b2)²)
Tolerance 0–100 maps to distance 0–442 (max RGB distance = √(255²×3) ≈ 441.67). This is simple and effective for bead color matching. For more perceptual accuracy, upgrade to CIEDE2000 / Delta E — but Euclidean is sufficient for the official palette's distinctness.
Data Coverage
- Total: 291 colors
- 15 series: A 黄色系(26) · B 绿色系(32) · C 青蓝色系(29) · D 紫色系(26) · E 粉红色系(24) · F 红色系(25) · G 橙色系(21) · H 灰黑白系(23) · M 莫兰迪系(15) · P 珠光系(23) · Q 荧光系(5) · R 彩虹系(28) · T 白色系(1) · Y 马卡龙系(5) · ZG 珠光渐变系(8)
- All HEX codes validated (format
#XXXXXX, no duplicates, 100% mapping accuracy)
Notes
- The verifier HTML is fully self-contained (color data inlined). No network or server required.
- When rendering canvas-based outputs, always convert via
toDataURL()to<img>— never serialize canvas elements throughouterHTML+innerHTML(pixel data lives in GPU memory and is lost on serialization). - For printed/photo patterns, raise tolerance to 40–50 to account for color drift.
