mazipan / mazipan/html-tools

feat: add Color Picker / Converter tool

Open
#122 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Summary

Add a color-picker.html tool that converts colors across HEX, RGB, HSL, and OKLCH formats with a live swatch and a mini complementary/analogous palette strip.

Motivation

Color format conversion is a daily task for designers and front-end developers. The existing Gradients tool already attracts a design audience; a dedicated Color Picker fills the natural next gap in that category. All conversion math is pure inline JS — no external library needed.

Proposed UX

  • Color input: native <input type="color"> swatch + a free-text input that accepts any of the supported formats (auto-detected on paste)
  • Live output cards for each format: HEX, RGB, RGBA, HSL, HSLA, OKLCH — each with a one-click copy button
  • Palette strip: 5 swatches showing complementary, analogous (×2), and triadic colors derived from the input hue, each copyable
  • CSS variable snippet: --color-primary: #…; and its variants ready to paste
  • Clear / random color button

Implementation notes

  • Category: Ornaments (sits alongside Gradients, Blob, Waves)
  • Slug: color-picker
  • Icon: 🎨
  • No npm dependencies — all color math (HEX↔RGB↔HSL↔OKLCH) inlined; OKLCH conversion uses the standard formulas via oklch() CSS function for preview and manual matrix math for the numeric output
  • All logic inline in <script>
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/_tool-template.html and the existing Gradients tool to understand the single-file structure, then inspect tools.json for the registration entry. Add color-picker.html with the listed conversion outputs, palette strip, copy controls, and CSS variable snippet, and run bun run generate:sections, bun run generate:index, and bun run generate:favicon to regenerate project metadata.

Written by the indexing model from the issue text.

Assessment

Tech stack
bun, html, javascript
Domain
tooling, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.