Pigment - Color Picker & Palette Tool

Color picker with 28 formats, image color extractor, gradient generator, contrast checker, blindness simulator & palette export.

Eyedropper color picker, image color extractor, CSS gradient generator, WCAG contrast checker, color blindness simulator, and palette manager — all in Chrome's sidebar. 28 color formats, Tailwind export, fully offline. Free forever. Pigment is a complete color toolkit built into Chrome's Side Panel. Pick colors with the eyedropper, extract palettes from images or tab screenshots, convert between 28 formats instantly, generate CSS gradients, check WCAG accessibility, simulate color vision deficiencies, and organize everything into exportable palettes. No accounts, no ads, no tracking — 100% free and offline. 🎯 PERFECT FOR - Web designers picking colors from live sites and building palettes - Frontend developers who need CSS variables, Tailwind config, or gradient code - Accessibility specialists checking WCAG contrast ratios and color blindness - Brand designers creating harmonious color schemes and exporting them - Anyone who works with color and wants a tool that stays open while they browse 💡 WHY PIGMENT? Most color picker extensions are popups that disappear when you click away. Pigment lives in Chrome's sidebar, so it stays open while you browse. Pick colors, analyze them, build palettes, and reference them — all without losing your place on the page. 💧 EYEDROPPER & 2D COLOR PICKER Click the eyedropper tool, hover over any element on any webpage, and click to capture its color. Then fine-tune it with the 2D color picker — a saturation-brightness field that lets you drag to adjust both dimensions at once. Powered by the native EyeDropper API — fast and accurate. 🔢 28 COLOR FORMATS WITH INTERACTIVE SLIDERS Every color is shown across 28 formats organized into four groups: Everyday (HEX, RGB, HSL, HSB, CMYK, HWB), Perceptual (LAB, LCH, OKLAB, OKLCH, XYZ, LUV, CAM16, HSLuv), Screen & Video (Adobe RGB, ProPhoto RGB, Rec.709, Rec.2020, YUV, YCbCr, HSI), and Developer (CSS color(), Munsell, NCS, RAL, Pantone, ANSI 256, LED RGB, Print Sim). 19 formats have dedicated sliders with live gradient track previews. Click any value to copy it, or type exact values inline. 🏷️ COLOR NAMES See the nearest CSS named color and Tailwind shade for any color (e.g., "darkslategray" and "zinc-800"). Click either name to copy it to your clipboard. ♿ CONTRAST CHECKER (WCAG 2.1) Evaluate foreground and background color pairs against WCAG 2.1 accessibility standards. See the contrast ratio with a color-coded display (green for AAA, yellow for AA, orange for large text only, red for fail), pass/fail badges for Normal Text, Large Text, and UI Components at both AA and AAA levels, and a live text preview showing how readable the combination is. Swap foreground and background with one click. 👁️ COLOR BLINDNESS SIMULATOR Preview how a color appears under 8 color vision deficiencies: protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia, and achromatomaly. Each simulation shows the transformed color with a similarity percentage and a "SIMILAR" badge when the color is 95% or more similar to the original. 🌈 GRADIENT GENERATOR Create CSS gradients visually with up to 8 color stops. Choose between linear, radial, and conic gradient types. Adjust angle with a circular dial, set the center position for radial and conic gradients with an interactive position picker, and choose from 9 color interpolation spaces (OKLab, OKLCH, sRGB, Linear sRGB, Lab, LCH, HSL, HWB, or browser default) for smoother blends. Toggle repeating mode for tiled patterns. Drag-and-drop to reorder stops. Generate random gradients from curated recipes (sunset, ocean, aurora, neon, pastel, and more) or apply colors from your saved palettes. Preview in real time or go fullscreen with the CSS code overlaid. Export as PNG in four sizes (400x400 to 1600x1600) or copy the CSS. Save gradients to a personal library and reload them anytime. 🧪 COLOR MIXER Blend two colors at an adjustable ratio in three color spaces: RGB, OKLAB, and OKLCH. The gradient ratio slider shows a live preview of the blend, with 25%, 50%, and 75% preset buttons for quick access. Swap Color A and B with one click. A 9-step mix spectrum strip shows all intermediate colors — click any swatch to copy its hex value. Use the mixed result as the current color for further analysis. 📏 COLOR DIFFERENCE (Delta E) Measure the perceptual distance between two colors using three industry-standard formulas: CIE76, CIEDE2000, and OKLAB. A visual 0-100% similarity meter gives an at-a-glance overview, color-coded green, orange, or red. Each metric shows a color-coded badge with its interpretation — from "imperceptible" to "very different." 🎨 COLOR COMBINATIONS & HARMONIES Generate six harmony schemes from any color: complementary, split-complementary, triadic, analogous, monochromatic, and tetradic. All schemes are computed using HSL hue rotation and can be saved as palettes with one click. 🎚️ TINTS & SHADES Generate 10-step scales of lighter tints and darker shades from any color. Each scale preserves the original hue and saturation, only varying lightness. Save any scale as a palette instantly. 📁 PALETTE MANAGER Save colors into named palettes — "Client Project", "Personal Blog", "Inspiration", or whatever you need. Rename, reorder, and delete palettes and colors with drag-and-drop. Click any saved color to make it the active color. 🖼️ IMAGE COLOR EXTRACTOR Extract dominant colors from any image — drag and drop a file, paste from clipboard, drag an image URL from the web, or capture a screenshot of the current tab. Use "Capture selection" to draw a rectangle on the page and extract colors from just that region. Adjust the number of colors (3-10) and save the result as a palette. Expand the image preview inline for reference. 🌐 EXTRACT PAGE COLORS Automatically extract the dominant colors from any webpage by scanning computed styles. Colors refresh when you switch browser tabs so you always see the current page's palette. 🔍 SEARCH Search across all your palettes by color name, hex value, or palette name. Find any saved color instantly. 📤 EXPORT OPTIONS Export any palette as CSS custom properties, Tailwind CSS config, or JSON. Copy to clipboard or download — ready to drop into your project. ⌨️ KEYBOARD SHORTCUT Press Alt+Shift+P (Windows/Linux) or Option+Shift+P (Mac) to trigger the eyedropper from anywhere — no need to open the sidebar first. Customizable via chrome://extensions/shortcuts. ⚙️ SETTINGS & CUSTOMIZATION Choose which of the 28 color formats to display. Switch between light, dark, or system-matched themes. Toggle recent colors and auto-refresh page colors on or off. Pigment adapts to your workflow. 🔒 FAST, PRIVATE, AND OFFLINE Pigment works 100% offline using Chrome's built-in storage API. No accounts, no servers, no tracking — your color data never leaves your browser. 🔑 PERMISSIONS - Storage — save your palettes and preferences locally - Side Panel — display the color picker sidebar in Chrome - Active Tab — access the current tab for eyedropper and page color extraction - Tabs — detect browser tab switches to auto-refresh page colors - Scripting — inject the color extraction and region selection scripts into pages on demand - Host permissions (all URLs) — capture tab screenshots for the image color extractor