Tinctly - Color Picker & Studio

从任何网页挑选颜色、在 9 种格式之间进行转换、构建调色板、生成渐变并检查 WCAG 对比度。

Tinctly is a professional color toolkit for Chrome — pick any color from any webpage, convert between 9 formats instantly, build palettes, generate CSS gradients, check WCAG accessibility, and redesign any website's color scheme live in your browser. Whether you're a UI/UX designer, front-end developer, or digital artist, Tinctly gives you a complete color workstation right inside Chrome — no separate app, no subscription, no account required. ━━━ PICK COLORS FROM ANYWHERE ━━━ • Eyedropper — Click any pixel on any webpage to capture its exact color. The precision crosshair cursor and magnifier zoom give pixel-perfect accuracy on high-DPI displays. • Advanced Grid Sampler — Average colors across 1×1, 3×3, 5×5, 11×11, or 25×25 pixel areas to smooth anti-aliasing noise and get true representative values. • Full-Screen Color Picker — Sample colors from anywhere on your screen, including native applications, desktop UI elements, and content outside the browser window. • Dynamic State Capture — Freeze :hover and :focus state colors that are normally invisible to standard eyedroppers. Analyze tab-focus rings, dropdown highlights, and button hover states in real time. ━━━ 9 COLOR FORMATS, ONE CLICK ━━━ Instantly switch between every format designers and developers actually use: HEX · RGB · RGBA · HSL · HSLA · HSV · CMYK · LAB · CSS Variable Auto-copy to clipboard on every pick. Manual input in HEX, RGB, or HSL tabs with live preview. ━━━ FULL-FEATURED COLOR PICKER ━━━ • HSV color wheel with saturation/value canvas • Hue bar, opacity/alpha slider, lightness slider • HEX, RGB, and HSL manual input with live preview • Tint, shade, and tone generator strip — 10 levels at a glance • Nearest color name badge with Delta-E perceptual distance • Dark mode preview panel — see how your color looks on dark backgrounds instantly • Persistent color history — recent picks saved automatically, click any swatch to restore ━━━ PALETTE MANAGER ━━━ • Built-in design system palettes ready to reference without leaving the browser • Create unlimited custom palettes with individually named color swatches • Import palettes from ASE (Adobe Swatch Exchange), GPL (GIMP/Inkscape), and JSON files • Export as ASE, GPL, JSON, or image swatches for use in your design tools and code • Share any palette via a URL — no account required, no external server ━━━ WEBPAGE COLOR ANALYZER ━━━ Analyze any webpage with one click. Tinctly scans every visible element and extracts the complete color palette in use — backgrounds, text colors, borders, shadows, and more. Colors are organized by role (Text / Background / Border) and mapped to their exact DOM elements. Hover over any color to highlight its element on the page and see its CSS selector, tag, class, and dimensions. Essential for auditing a design system, reverse-engineering a brand palette, or preparing a redesign. ━━━ COLOR HARMONY GENERATOR ━━━ Generate balanced color schemes from any base color using proven color theory rules: • Complementary — maximum contrast, ideal for CTAs and accent colors • Analogous — adjacent hues for natural, cohesive interfaces • Triadic — three balanced hues for vibrant, structured palettes • Tetradic — four hues for rich, layered color systems • Split Complementary — softer contrast alternative to pure complementary • Monochromatic — single hue across multiple lightness values for depth and hierarchy Each scheme shows the full palette with tints, shades, and tones. Click any swatch to copy in your chosen format. ━━━ CSS GRADIENT GENERATOR ━━━ Build production-ready CSS gradients without writing a line of code: • Linear gradients at any angle (0°–360°) • Radial gradients — circle and ellipse shapes • Conic gradients — pie charts, color wheels, decorative patterns • Visual color stop editor — add, drag, and remove stops with live preview • One-click CSS code copy — paste directly into your stylesheet • Export as CSS snippet, SVG file, or PNG image for design assets ━━━ WCAG ACCESSIBILITY TOOLS ━━━ Ensure your color choices are accessible for all users: • Instant contrast ratio calculation for any foreground/background pair • WCAG 2.1 AA (4.5:1) and AAA (7:1) compliance badges with real-time feedback • Visual text preview at normal and large font sizes on your chosen colors • Color blindness simulation: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind) • One-click accessible color suggestion — finds the nearest hue-compatible color that passes 4.5:1 contrast • Redesign Studio runs live contrast checks as you recolor elements, warning before you create an inaccessible combination ━━━ REDESIGN STUDIO — RECOLOR ANY WEBSITE ━━━ Tinctly's Redesign Studio is a powerful in-page color editor. Press Alt+Shift+R or click the toolbar icon to open a floating dock on any webpage. Non-destructive — changes only affect your view and are never saved to the actual site. Click any element to select it, then change its color with the built-in picker. Or target by semantic role — swap every Link, Heading, Button, Background, or Border color across the entire page in seconds. Save your recolored layouts as templates that auto-apply every time you visit a site. Smart one-tap operations (no color knowledge required): 🌑 Dark Mode — Generate a complete dark theme for any light-colored website instantly 🔆 High Contrast Boost — Automatically push every text/background pair to WCAG AA compliance 🎨 Hue Shift — Rotate the entire color palette by any degree to explore alternatives 🔍 Find & Replace — Replace every instance of one color with another, with ΔE tolerance for near-matches ⬜ Grayscale — Strip all color for distraction-free reading or print preview 🌸 Pastel / Vivid — Soften or intensify the entire site's color saturation in one click 👁 Color-Blind Safe Adjust — Automatically fix indistinguishable color pairs using Brettel simulation matrices 🌅 Mood Presets — Sunset, Sepia, Solarized, Halloween, Winter, Y2K — atmospheric one-tap transformations ━━━ ACTIVITY & ACHIEVEMENTS ━━━ Track your color habits with a privacy-first local analytics dashboard: • Summary cards: total colors picked, current day streak, top format, most-used feature • Weekly bar chart — 7-day pick history at a glance • Feature usage and format usage breakdowns • Achievement series with downloadable shareable certificates: → Color Picker Series (Bronze: 10 picks · Silver: 100 picks · Gold: 1,000 picks) → Streak Master Series (Bronze: 7 days · Silver: 30 days · Gold: 100 days) → Palette Artist, Page Analyst, Studio Explorer series All analytics data stays on your device. Nothing is ever sent to any server. ━━━ KEYBOARD SHORTCUTS ━━━ • Alt+Shift+E — Activate the eyedropper • Alt+Shift+C — Copy the last picked color to clipboard • Alt+Shift+F — Cycle through color formats • Alt+Shift+P — Open Tinctly popup • Alt+Shift+R — Toggle Redesign Studio on the current page Customize any shortcut at chrome://extensions/shortcuts ━━━ SETTINGS ━━━ • Default color format — synced across all your Chrome devices • Default pixel sampling size (1×1 to 25×25) • Auto-copy color to clipboard on every pick • Copy notification toggle • Theme: System / Light / Dark ━━━ PRIVACY ━━━ Tinctly does not collect, transmit, or share any user data. Color history, custom palettes, settings, and activity data are stored entirely on your device using Chrome's built-in storage APIs. No accounts. No sign-in. No external servers. No tracking. ━━━ BUILT FOR ━━━ ✔ UI/UX Designers — Build, browse, and manage design system palettes without leaving the browser ✔ Front-End Developers — Copy exact CSS color values from any element on any site ✔ Accessibility Auditors — WCAG contrast checking and color blindness simulation in one tool ✔ Brand & Marketing Designers — Analyze color palettes and prototype brand refreshes ✔ Digital Artists — Sample from reference images and web graphics with precision ✔ Content Creators — Identify and reproduce any color seen on the web instantly