Skip to content

README.md

Latest commit

Β 

History

History
69 lines (51 loc) Β· 2.88 KB

README.md

File metadata and controls

69 lines (51 loc) Β· 2.88 KB
Raw

🎯 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
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. 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.