ColorLens — Smart Color Picker & Design System Assistant

Capture colors from any website, understand color psychology, extract site color systems, generate design tokens & palettes.

ColorLens is the ultimate professional color picker, color system extractor, and design system assistant for designers, developers, and product teams. Effortlessly capture colors from any webpage, analyze site color systems, verify WCAG accessibility, and export design tokens in seconds. ✨ KEY FEATURES: 🎨 Precision Eyedropper & Format Converter • Instant color sampling from any web page or uploaded screenshot. • Automatic real-time conversion across HEX, RGB, HSL, HSV, and CMYK formats with one-click copy. • Human color name identification for over 1,500 curated color shades. 🌐 Website Color System DNA Extractor • Extract the full color system of any active web page in one click. • Automatically assigns color roles: Primary, Secondary, Background, Text, and Accent. • Export website color variables directly to CSS Variables or Tailwind CSS. 🧠 Color Intelligence & Psychology • Deep brand psychology analysis for any sampled color (Trust, Innovation, Luxury, Energy, etc.). • Practical web usage guidelines and curated recommended color pairings. • Automatic dark mode tone converter to transform light brand colors into accessible dark mode variants. 📊 Website Brand Audit Report • Instantly evaluate any website's color consistency and design system health score. • Checks WCAG contrast compliance across buttons, text, and interactive elements. • Generates actionable recommendations to clean up color fragmentation. ♿ WCAG Accessibility & Contrast Checker • Real-time contrast ratio calculator (WCAG 2.1 AA & AAA standards). • Live text preview on customizable backgrounds. • Smart accessible color suggestion tool when contrast ratios fall short. 🌈 Palette & Harmony Generator • Generate Complementary, Analogous, Triadic, and Monochromatic color harmonies. • Curated style presets for SaaS, Healthcare, Luxury Editorial, Corporate Finance, Minimal Clean, and Gaming. 🪄 Live Web Color Swap / Replacer • Temporarily swap colors on any live webpage in real-time. • Test custom brand palettes directly on existing websites before writing code. 📐 Developer Design Token Exporters • One-click export to modern code formats: - CSS Variables (:root) - SCSS Variables ($color-*) - Tailwind CSS Configuration & Inline Utilities - React Inline Styles - Flutter Color Classes (Color(0xFF...)) - Design Tokens JSON & Figma Variables 📁 Projects & Color History • Save color palettes into organized project folders. • Automatic color history tracking so you never lose a picked shade. -------------------------------------------------- 🔒 PRIVACY & PERMISSIONS: ColorLens operates locally inside your browser. No personal data, page contents, or color histories are sent to external servers. 🚀 Boost your design and web development workflow today with ColorLens!