feat: add Color Picker / Converter tool
Nobody has claimed this yet.
- 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.htmland runbun run generate:sections,bun run generate:index,bun run generate:faviconafter adding totools.json
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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