DesignPicker - Color, Font & CSS Inspector

Inspect webpage colors, fonts and CSS. Copy computed styles and save design snippets locally.

NEW IN 2.0.0: Webpage references and optional Pro • Preview a selection of real webpage colors, typography, spacing and corners for free. • Pro combines editable palettes, similar palette directions, typography and style guides. • Export CSS, JSON, HTML and a design Skill ZIP (SKILL.md, design tokens and CSS). • Save schemes locally, or explicitly upload up to 100 schemes to your account cloud. Edit the original or create a named copy. • Pro requires a DesignPicker account and a one-time purchase through Creem. No recurring subscription; the current price is shown before checkout. Core color/font/CSS inspection remains free. • Selected style fields are sent to the DesignPicker server only for requested Pro processing; cloud upload is explicit. Source hostname and capture time may be included. No page HTML, text, form values, full URLs or screenshots are uploaded. DesignPicker — Color Picker, Font Detector & CSS Inspector Inspect the visual details of a webpage without interrupting your design workflow. Pick colors, identify typography and explore computed CSS in one browser extension. NEW: CSS Inspector • Hover to preview an element, then click to lock it for inspection. • Explore the box model, layout, Flex/Grid, spacing, typography, colors, borders, shadows and other computed properties. • Copy a property value, declaration, group or selected CSS. Preview the code and use manual copy when the clipboard is unavailable. • Save named CSS snippets locally without signing in. Search, rename, copy, delete and undo in Favorites. • Move or collapse the panel, inspect parent elements, refresh a snapshot and use Esc to unlock or exit. Color picking • Extract webpage colors and browse them in grouped or grid layouts. • Use the eyedropper when supported, with a screenshot-based webpage fallback. • Copy color codes in your preferred format and keep recent colors for reuse. Font detection • Inspect text to see its font family, size, weight and line height. • Save and manage recent font records for your design references. • Switch between font detection, CSS inspection and color picking with clean tool handoff. Optional account sync Sign in to synchronize saved colors, font records and supported preferences. Account collections are kept separate, and Settings provides an explicit import for colors and fonts saved while signed out. The auto-sync switch is local to each browser. CSS snippets remain local and do not join cloud sync. Get started 1. Pin DesignPicker in your toolbar and open a regular HTTP or HTTPS webpage. 2. Open the extension and select Colors, Fonts or CSS. 3. Start CSS inspection, click an element, then copy styles or save a snippet. CSS inspection shows the browser's current computed values. It is not an export of original author stylesheets or every responsive/pseudo-class state. Restricted browser pages, iframe targets and nested Shadow DOM targets are outside the current CSS inspection scope. Saved CSS snippets omit webpage HTML, input content, original element IDs/classes and resource URLs. Core color, font and CSS inspection tools remain free. Pro workspaces and exports require an optional one-time purchase. Website: https://design-picker.yisi.app Support: hi@yisi.app