ChromaFlow Pro — Color Toolkit

ChromaFlow Pro — Color Toolkit is the ultimate color companion for web designers, UI/UX professionals, front-end developers, and digital artists. Get instant access to a full suite of professional-grade color tools right from your browser toolbar — no sign-ups, no subscriptions, no internet connection required. Whether you're fine-tuning a design system, building a brand palette, crafting beautiful gradients, or ensuring your website meets accessibility standards, ChromaFlow Pro has everything you need in one sleek, fast, and intuitive interface. 🎨 COLOR PICKER Pick any color with precision using the interactive HSL color picker: • Visual color preview — A large, dynamic color preview circle with a beautiful animated hue ring shows your selected color in real time. • HSL sliders — Precisely adjust Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) with smooth, responsive sliders featuring gradient tracks that update dynamically. • HEX input — Type or paste any hex color code directly for instant selection. • Multiple format output — View your selected color simultaneously in three formats: HEX, RGB, and HSL. Click any format card to instantly copy the value to your clipboard. • Recent colors — Access your last 10 recently used colors in a convenient row of color dots at the bottom of the picker tab. Click any dot to jump back to that color instantly. 🔍 EYEDROPPER — PICK COLORS FROM ANY WEBPAGE Capture any color directly from any webpage with the built-in eyedropper tool: • Click the eyedropper icon in the extension header to activate the color picker overlay. • A full-page crosshair cursor appears with a floating magnified preview showing the color under your cursor and its hex value in real time. • Click anywhere on the page to capture that exact color — it instantly becomes your active color in the picker. • Press Escape at any time to cancel without selecting a color. • Works on any webpage — captures actual rendered colors including images, gradients, and CSS-styled elements. • The captured screenshot exists only in memory and is immediately discarded after use — your privacy is fully protected. 🎭 PALETTE GENERATOR Generate professional color harmonies based on color theory with a single click: • Complementary — Two colors opposite on the color wheel for maximum contrast and visual impact. • Analogous — Three adjacent colors that create smooth, harmonious combinations perfect for subtle designs. • Triadic — Three evenly spaced colors that provide vibrant, balanced color schemes. • Split-Complementary — A base color paired with the two colors adjacent to its complement, offering contrast with less tension. • Square (Tetradic) — Four colors evenly spaced around the color wheel for rich, diverse palettes. • Monochromatic — Five shades of the same hue at different lightness levels, ideal for clean, cohesive designs. Each palette is displayed as a beautiful, interactive swatch bar. Hover over any swatch to see it expand with its hex code. Click any color to copy it. • Save Palette — Save any generated palette to your personal library for later use. • Copy CSS — Export the entire palette as CSS custom properties (CSS variables) with one click, ready to paste into your stylesheet: :root { --color-1: #6366f1; --color-2: #f16366; } 📐 GRADIENT BUILDER Design stunning CSS gradients visually and export production-ready code: • Three gradient types — Choose between Linear, Radial, and Conic gradients with instant visual preview. • Angle control — Adjust the gradient angle from 0° to 360° with a smooth slider (for linear and conic gradients). • Color stops — Configure two color stops with individual color pickers and position sliders (0–100%). • Live preview — See your gradient rendered in real time in a large preview panel. • CSS output — The complete CSS gradient code is displayed below the preview, ready to copy. • One-click copy — Click the "Copy" button to copy the full CSS gradient declaration to your clipboard. Example output: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); ♿ WCAG CONTRAST CHECKER Verify that your color combinations meet web accessibility standards: • Foreground and background inputs — Enter any two hex colors to check their contrast ratio. • Swap colors — Instantly swap foreground and background with the swap button. • Live text preview — See a real-time preview showing both large and small text rendered with your chosen color combination. • Contrast ratio display — The calculated contrast ratio is displayed prominently (e.g., "21.0 : 1"). • WCAG compliance grid — Four clear pass/fail indicators show compliance with: - AA Normal text (requires 4.5:1) - AA Large text (requires 3:1) - AAA Normal text (requires 7:1) - AAA Large text (requires 4.5:1) • Accurate calculation — Uses the official WCAG 2.1 relative luminance formula for precise contrast ratio computation. This tool helps you ensure your websites and applications are accessible to users with visual impairments, meeting legal requirements and best practices for inclusive design. 📚 COLOR LIBRARY Save and organize your favorite colors and palettes: • Saved colors — Click the heart icon in the header to save the current color to your library. Click again to remove it. Your saved colors appear as interactive swatches that you can click to load. • Saved palettes — Save generated palettes from the Palette tab. Each saved palette displays as a compact color bar showing all its colors. • Click to load — Click any saved color or palette swatch to instantly load it into the picker. • Delete — Hover over any saved item to reveal the delete button for easy cleanup. • Persistent storage — Your entire library is saved locally using Chrome's storage API and persists across browser sessions. • Empty state — Clear, friendly empty-state messages guide you when your library is empty. ✨ DESIGN AND USER EXPERIENCE ChromaFlow Pro features a premium, modern dark interface designed for extended use: • Dark theme — A carefully crafted dark UI with subtle transparency and blur effects that's easy on the eyes during long design sessions. • Animated background — Beautiful, subtle animated gradient blobs that respond to your selected color, creating a dynamic, living interface. • Smooth animations — Every interaction is animated with carefully tuned cubic-bezier curves for a fluid, responsive feel. • Tab navigation — A sleek bottom navigation bar with an animated indicator that slides between tabs. • Toast notifications — Elegant, non-intrusive confirmation messages appear when you copy values or save items. • Compact size — The extension popup is optimized at 380×560 pixels — large enough to be functional, small enough to stay out of your way. • Zero external dependencies — Built entirely with vanilla HTML, CSS, and JavaScript. No frameworks, no libraries, no bloat. Lightning-fast performance. 🚀 WHO IS THIS FOR? • Web designers who need quick access to color tools while working. • UI/UX designers building design systems and brand palettes. • Front-end developers who need to grab colors, generate CSS gradients, or check contrast ratios. • Accessibility specialists verifying WCAG compliance. • Digital artists and illustrators looking for color harmony inspiration. • Students learning about color theory and web accessibility. • Anyone who works with color on the web. 💡 KEY FEATURES AT A GLANCE ✓ Interactive HSL color picker with live preview ✓ HEX, RGB, and HSL format output with one-click copy ✓ Eyedropper tool to pick colors from any webpage ✓ 6 color harmony modes (Complementary, Analogous, Triadic, Split, Square, Mono) ✓ Visual gradient builder (Linear, Radial, Conic) with CSS export ✓ WCAG 2.1 contrast checker with AA/AAA compliance indicators ✓ Personal color and palette library with persistent storage ✓ Recent colors history ✓ CSS custom properties export for palettes ✓ Beautiful dark-themed UI with smooth animations ✓ Zero external dependencies — works 100% offline ✓ No data collection, no tracking, no ads ✓ Lightweight and fast — instant popup load