The Vision
Moving beyond random hex generators to bridge the gap between color theory and professional UI design systems.
Accessible
Balanced
Production Ready
A high-performance Color Systems Workstation designed for artists and developers to build accessible, mathematically balanced design systems.
Moving beyond random hex generators to bridge the gap between color theory and professional UI design systems.
01 / Artists
Focusing on tonal depth and visual harmony. Artists use Rang.Lab to explore complex palette interactions that standard tools simply miss.
02 / UI Designers
Testing design systems on real-world mockups. Rang.Lab handles the WCAG contrast math so designers can focus on aesthetics.
03 / Developers
Translating colors into code. Developers get clean CSS variables, JSON data, and HEX arrays ready for immediate production deployment.
Access as Guest or Register via JWT Auth to unlock cloud storage.
Synthesize palettes using LCH math to maintain constant perceptual weight.
Real-time contrast checking and live UI simulation on mockups.
Saving architecture to folders and exporting system-ready CSS/JSON files.
System Features & Functionality
A suite of professional tools designed to handle the entire color workflow from extraction to production export.
Dynamic color synthesis using LCH math to ensure every generated palette meets strict WCAG 2.1 accessibility standards out of the box.
A massive, curated library of accessible color systems. Artists can browse and implement pre-validated palettes for any project type.
Advanced extraction logic that samples real-world architecture and nature images to build harmonic palettes and custom image collages.
Integrated user accounts allow artists to save and manage their personal collections in a cloud-synced database for cross-device access.
Test how palettes behave on real UI components. Live visualization provides a preview of typography, buttons, and layouts before deployment.
Comprehensive testing suite including a built-in WCAG contrast checker and vision simulation for inclusive design verification.
I implemented high-fidelity PNG rendering for palette cards and image collages, making it easy to download and share assets for design reviews.
One-click export options for CSS Variables, JSON, and HEX data, bridging the gap between design systems and codebase implementation.
Access a growing ecosystem of community-generated palettes to find inspiration and maintain modern design trends.
WCAG Standard Color's
Unlike standard generators that pick random RGB values, RangLab utilizes a Perceptual LCH Matrix. This ensures every palette is balanced and "Artist-Grade" based on how human eyes actually perceive lightness.
01 / Perceptual Math
Calculates colors using LCH (Lightness, Chroma, Hue) rather than digital HEX pixels.
02 / Style Matrices
Specific mathematical ranges for Luxury, Retro, and Minimal aesthetics.
03 / Auto-A11y
Built-in Lightness logic that guarantees WCAG 2.1 accessibility compliance.
04 / Hue Variance
Dynamic complementary harmony calculation using modular arithmetic.
const STYLE_MATRIX = { LUXURY: { l: [10, 15, 65, 85, 95], c: [5, 10, 30, 25, 5] }, RETRO: { l: [90, 75, 65, 55, 15], c: [15, 40, 70, 80, 30] } }; export const generatePalette = () => { // 1. Pick artistic style anchor const baseHue = Math.random() * 360; // 2. Map LCH perceptual ranges return mode.l.map((lightness, index) => ({ hex: chroma.lch( lightness, mode.c[index], (baseHue + index * 20) % 360 ).hex() })); };
"I moved away from arbitrary color picking. By implementing LCH mathematics, the engine maintains consistent perceptual brightness across all UI results."
Perceptual Application / 2026
I engineered a system where color meets function. The Live Mockup Engine transforms static palettes into production-ready UI components instantly.
Automated contrast checking against AA/AAA standards. Perceptual algorithms calculate the distance between text and background to ensure absolute readability.
Built-in filters for Protanopia and Deuteranopia. I integrated vision simulation to verify that UX signals remain clear for colorblind users.
Beyond the screen. The engine generates dynamic CSS Variables and JSON schemas, bridging the gap between design theory and production code.
I engineered an expansive library of WCAG-compliant palettes, giving artists immediate access to production-ready color systems for any creative purpose.
Every card is pre-validated for accessibility standards.
Instant PNG generation for social sharing and design boards.
Intuitive "One-Click" copy-to-clipboard functionality.
Most generators use RGB which is flawed for human eyes. I implemented LCH mapping using Chroma.js to ensure lightness is consistent across all generated hues.
Managing a design system requires complex state. I used React Context and custom hooks to ensure the palette updates across mockups and sliders instantly without lag.
Built a robust backend using Node and MongoDB to handle folder-based project organization, allowing designers to categorize work for different clients.
"Separating client and server concerns ensures a highly maintainable and professional MERN architecture."
Logic, Debugging & Workflow Efficiency
| The Challenge | The Engineering Solution |
|---|---|
Visual BleedingLight hues often became invisible against the white application background. |
Developed a dynamic stroke logic. Every color pod receives a calculated 8% contrast border based on its luminance to ensure visibility across the UI. |
Responsive BreakageTablet viewports caused color pods to overflow and cut off the layout. |
Replaced static Flexbox with a fluid CSS Grid. Implemented min-w-0 constraints and dynamic column spans to keep the data container flexible. |
Perceptual VarianceStandard HEX math resulted in palettes with inconsistent visual weights. |
Migrated the engine to LCH color space. This ensures perceptual uniformity, meaning every shade in a palette feels equally bright to the eye. |
To maintain high standards of performance and design, I treat my development environment as an integrated workspace. I leverage modern tools and Generative AI as a senior pair-programmer for expert guidance on complex logic and rapid error fixing.
"I don’t apply code directly. I treat smart guidance as a resource—analyzing the logic, scanning for edge cases, and then implementing the solution that fits the project architecture."
By using AI to handle boilerplate and standard logic, I freed up time to focus on complex UX interactions and custom animations.
Collaborated with smart tools to refine HSL-to-HEX conversion math and improve the precision of the LCH color engine.
Utilized senior-level debugging guidance to identify complex race conditions in React hooks and nested CSS hierarchy conflicts.
Regularly cross-verified state management patterns to ensure the frontend remains scalable and follows the latest best practices.
Balanced LCH Color Matrices.
Fast Iteration & Debugging cycles.
100% WCAG Verified A11y.
Analyze, Refine, Implement.