Explore, harmonize, and export colors with mathematical precision β fully offline and security-hardened. The ultimate color system design tool for UI designers, frontend developers, and power users.
Quick Start β’ Features β’ Workflows β’ Technical β’ Math & Precision
- Open ColorForge.
- Pick a base color using the wheel (or image picker).
- Use Harmony Palette to generate matching colors.
- Check readability in Accessibility Rating.
- Copy values from Color Values (HEX/RGB/HSL/CMYK/LAB/LCH).
- Reuse colors from History.
That's the core workflow. β
- Designers: Who want fast visual harmony + accessibility confidence.
- Developers: Who need accurate color values and conversion formats.
- Power Users / Modders: Who want to understand internals and rebuild/extend the app.
- Interactive Hue Ring + Saturation/Value square for precise selection.
- Optional Image / Eyedropper picker flow for sampling from external sources.
Generate balanced palettes including:
- Monochromatic, Complementary, Triadic, Analogous, Split Complementary, Tetradic.
- Lock Palette: Keep your base color stable while exploring variants.
- Enforce WCAG: Push harmony choices toward better contrast automatically.
Real-time contrast previews for white and black text on your selected color.
- AAA / AA / AA Large / Fail ratings based on WCAG 2.1.
Copy directly as: HEX, RGB, HSL, CMYK, LAB, LCH.
- Undo / Redo (UI buttons +
Ctrl+Z/Ctrl+Y). - Randomize color for quick inspiration.
- Persistent color history stored locally.
- Theme support (Dark/Light) and resizable sidebar.
- Drag around the Hue Wheel.
- Drag inside the SV Square to tune saturation and brightness.
- Go to the Harmony Palette section.
- Switch tabs until it "feels right."
- Click swatches to set them as the active color.
- Look at the Accessibility Rating cards.
- Prefer AA or AAA for normal text.
- In Color Values, click the copy icon next to your needed format.
- Start with your brand seed color.
- Open Triadic and Analogous tabs.
- Lock palette to compare options.
- Keep one vibrant accent + one support tone.
- Check contrast before finalizing.
- Pick your primary hue.
- Use Monochromatic for depth (cards, hover states, borders).
- Use Complementary/Split for call-to-action accents.
- Check black/white text grades for each critical background.
- Export HEX + HSL for design/dev handoff.
- Enable Enforce WCAG.
- Iterate until major UI surfaces pass AA or AAA.
- Validate manually for key text sizes and weights.
- Export implementation-ready values.
| Action | Shortcut |
|---|---|
| Undo | Ctrl+Z (or Cmd+Z) |
| Redo | Ctrl+Y (or Ctrl+Shift+Z) |
| Format | Best For |
|---|---|
| HEX | Quick dev/design handoff. Usually the default. |
| RGB | Canvas, dynamic UI rendering logic. |
| HSL | Thematic tuning (same hue, different lightness). |
| CMYK | Print-adjacent workflows (approximation). |
| LAB / LCH | Perceptual handling for harmony logic and visual balance. |
- React 19: Modern UI library.
- Vite: Ultra-fast build tool.
- Electron: Cross-platform desktop runtime.
- Vanilla CSS: Performance-first styling.
Canonical color state is maintained in HSV (Hue, Saturation, Value).
- Why? It maps naturally to wheel + SV square interactions, keeping UI logic predictable.
- All other spaces (RGB, HEX, CMYK, HSL, LAB, LCH) are derived values.
- LCH-based generation for perceptual consistency.
- Constrains lightness/chroma ranges to avoid unusable extremes.
- Optional contrast nudging for dark/light theme context.
ColorForge operates with restricted privileges:
nodeIntegration: false,contextIsolation: true,sandbox: true.
This section outlines the mathematical foundation and precision characteristics of the ColorForge engine.
- sRGB: Implements IEC 61966-2-1 with correct linear/gamma transforms.
- Illuminant: Uses D65 as the reference white point.
- LAB/LCH: Follows the CIE 1976 LAB specification.
- Contrast: Implements WCAG 2.1 Relative Luminance formula exactly.
- Integer LAB Storage: LAB/LCH components are stored as integers (L: 0β100, a/b: -128 to 127). This introduces a Β±0.5 unit error in LAB, which can amplify to Β±10 units in RGB for highly saturated colors.
- Gamma Correction: Uses the full sRGB companding curve instead of a simple 2.2 power law to avoid errors in dark tones.
| Section | Tests | Status | Notes |
|---|---|---|---|
| HEX β RGB | 9 | β Pass | Exact mapping, no rounding loss. |
| RGB β HSV | 10 | β Pass | Round-trip Ξ β€ 1. |
| RGB β HSL | 10 | β Pass | Verified against CSS spec. |
| RGB β CMYK | 8 | β Pass | Handles K=100 edge case. |
| RGB β LAB | 5 | β Pass | Matches D65 sRGB references. |
| LAB β RGB | 4 | β Pass | Verified within quantization limits. |
| RGB β LCH | 2 | β Pass | Verified polar mapping. |
| WCAG Contrast | 4 | β Pass | Exact to 4 decimal places. |
| Edge Cases | 4 | β Pass | Invalid HEX returns null; no NaNs. |
- "Eyedropper not available": Some environments lack the native EyeDropper API. Use image upload + click sampling fallback.
- "My pasted format did not update color": Input parser expects full format (e.g.,
hsl(180, 50%, 50%)). - "Why did harmony swatches change slightly?": Engine may apply small variations for natural-looking exploration.
- "Copied value failed": Clipboard permissions can fail in restricted environments; retry in desktop context.
- Local-first: No account, no cloud, no tracking.
- Offline: Core features require zero internet connection.
- Restricted: Desktop runtime uses restricted renderer privileges.
| Layer | Status | Technical Detail |
|---|---|---|
| Offline Mode | 100% | No external network requests; zero tracking or telemetry. |
| Execution | Sandboxed | Renderer process is strictly isolated from the operating system. |
| Node Integration | Disabled | Prevents arbitrary filesystem or shell access from the UI. |
| Context Isolation | Active | Separates renderer logic from internal app APIs via a secure IPC bridge. |
| CSP | Strict | Blocks unauthorized scripts and all non-system external assets. |
Important
Windows Security Notice: As ColorForge is an open-source, community-driven tool, Windows may flag the installer as "unsigned." This is expected. The source code is fully transparent and available here for audit. To install, click More info β Run anyway.
- Strict deterministic harmony mode (remove randomness).
- Improved parser validation (decimals, stricter HEX).
- Expanded accessibility simulation (text sizes/weights).
- Palette export presets (JSON/Tailwind/CSS variables).
- HSV: Hue, Saturation, Value (interaction-friendly).
- HSL: Hue, Saturation, Lightness (styling-friendly).
- LAB / LCH: Perceptual spaces for visually consistent operations.
- Contrast Ratio: Readability metric between text and background.
- WCAG: Web Content Accessibility Guidelines.
- Node.js (Latest LTS)
- Windows 10/11 (Recommended for native EyeDropper support)
# Clone the repository
git clone https://github.com/azsoftstudio/colorforge.git
# Install dependencies
npm install
# Launch development environment (Vite + Electron)
npm run dev# Generate a standalone Windows installer (.exe)
npm run make-exeLooking for more depth? Master the LCH workflow with our Official Documentation:
- Mini-tutorials on accessible palette design.
- Technical deep-dives into LCH Color Theory.
- Developer API references for internal utilities.
Developed with β€οΈ by AZSoftStudio. Licensed under MIT β we welcome community contributions and feedback!
- Website: colorforge.azsoftstudio.workers.dev
- Documentation: Full Guide
ColorForge β’ Professional Color Engineering