🎯 Huegent

Huegent is a high-performance, client-side web application designed to generate and validate accessible color combinations. It evaluates color pairs against strict accessibility standards, including the traditional WCAG 2.x contrast ratio and the modern APCA-W3 perceptual algorithms.

Built with exactly zero server-side dependencies, all heavy contrast mathematics and color generation (evaluating 7,980+ HSL color permutations) are offloaded to Web Workers, ensuring a completely fluid UI experience.

✨ Features

• Dual Standard Engine: Evaluates contrast against both WCAG 2.x (AA/AAA) and the modern APCA-W3 Perceptual Contrast Algorithm (Lc scores).
• High-Performance Worker: Uses a background Web Worker to calculate, filter, and sort nearly 8,000 HSL candidate colors in under 100ms without blocking the main thread.
• Dynamic Live Preview: Interact with typography settings (size, weight) and see real-time UI components (buttons, text, cards) update magically as you hover over palettes.
• Copy & Export: One-click copying of accessible HEX colors. Bulk export the entire accessible palette to either cleanly formatted CSS Custom Properties (.css) or standard JSON mapping.
• Glassmorphism UI: Beautiful, premium dark-mode aesthetic utilizing modern glass effects, responsive grid virtualization, and sticky positioning.

🚀 Tech Stack

• Framework: React 19 + TypeScript
• State Management: Zustand
• Tooling: Vite
• Styling: Vanilla CSS (Global Design System + Tokens)
• Architecture: Strict separation of UI and heavy computational Logic (Web Workers)

🛠 Getting Started

Prerequisites

Make sure you have Node.js (v18+) installed.

Installation & Run

1. Clone the repository:

git clone https://github.com/rusli3/huegent.git
cd huegent

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

🏗 Project Architecture

/src
 ├── /components     # UI components (PreviewCanvas, ResultsGrid, ColorCard, etc.)
 ├── /lib            # Pure mathematics algorithms (ColorMath, Contrast, Generator)
 ├── /store          # Zustand global state (useStore.ts)
 ├── /workers        # Web Worker entry and React hook (colorWorker.ts)
 └── /utils          # Helpers (Clipboard, Export)

📜 Algorithms Used

• sRGB Linearization & Luminance: Precise WCAG algorithm for calculating relative luminance.
• APCA-W3 Reference: Implementations of sRGBtoY() and calcAPCA() featuring polarity detection and perceptual lightness clamping.
• Perceptual Distance Check: Sorting candidate colors not just by contrast, but by their perceptual distance using Math.sqrt(ΔH² + ΔS² + ΔL²).

📝 License

This project is open source and available under the MIT License.