See Color

A visual reference tool for CSS named colors.

Features

• Browse all 148 CSS named colors in a visual interface
• Colors grouped by hue into 10 categories (Reds, Oranges, Yellows, Greens, Cyans, Blues, Purples, Magentas, Pinks, Neutrals), sorted by lightness within each group
• Click any color name to see its Hex, RGB, and HSL values in real time
• Search bar to filter colors by name or hex value
• Custom color preview with HEX / RGB / HSL input
• Light / dark theme toggle
• One-click hex copy

Usage

Open with an HTTP server (ES Modules don't work with file:// protocol):

# Python
python -m http.server 8080

# Node.js
npx serve .

Then visit http://localhost:8080 in your browser.

Project Structure

see-color/
├── index.html          # Entry point
├── css/
│   └── style.css       # All styles
├── js/
│   ├── colors.js       # 148 color dataset + HSL conversion
│   ├── grouping.js     # Color grouping logic
│   ├── ui.js           # DOM rendering and event handling
│   └── app.js          # Entry module
└── WORK-REQUIREMENT.md # Original requirements (Chinese)

Tech Stack

Vanilla HTML + CSS + JavaScript (ES Modules). Zero build step, works out of the box.

Browser Support

All modern browsers (Chrome 61+, Firefox 60+, Safari 11+, Edge 16+).

License

MIT