Item logo image for Designer Toolkit

Designer Toolkit

Item media 4 (screenshot) for Designer Toolkit
Item media 1 (screenshot) for Designer Toolkit
Item media 2 (screenshot) for Designer Toolkit
Item media 3 (screenshot) for Designer Toolkit
Item media 4 (screenshot) for Designer Toolkit
Item media 1 (screenshot) for Designer Toolkit
Item media 1 (screenshot) for Designer Toolkit
Item media 2 (screenshot) for Designer Toolkit
Item media 3 (screenshot) for Designer Toolkit
Item media 4 (screenshot) for Designer Toolkit

Overview

Toolkit for designers and developers. Pick colors, grab fonts, check WCAG contrast, simulate color blindness and more.

Everything you need to design and build with confidence. Designer Toolkit is a focused browser extension that brings essential design and development utilities into one clean, fast workflow. Inspect real websites, extract accurate values, validate accessibility, and turn visual decisions into production-ready output — without leaving the page. Built for designers, developers, and modern web teams. 🎨 Colors Pick colors from any website and instantly get clean, usable values. Save colors to collections, work with multiple formats (HEX, RGB, HSL, OKLCH), generate consistent shade scales, and reuse everything across your design system. 🔤 Fonts Instantly identify fonts used on any website. Inspect full typography properties including size, weight, leading, tracking, and color. Copy production-ready values. ♿ Accessibility Make sure accessibility isn’t an afterthought. Check WCAG contrast ratios for normal and large text, and simulate color vision deficiencies in real time. Catch accessibility issues early and design experiences that work for everyone. 🧩 Styles Inspect the full CSS of any element on a website. Click any element to instantly view its complete set of computed styles, including layout, spacing, typography, colors, and more — all in a clean, readable format without digging through dev tools. ⚙️ Workflow-focused settings Customize formats, defaults, and behavior to match how you work. Designer Toolkit adapts to your workflow instead of forcing one on you. 🚀 Pro features Unlock advanced tools designed for real projects: - Save and organize colors into reusable collections - Generate consistent shade scales - Unlimited color and font history - Export to CSS variables, JSON, and Tailwind v4 @theme One-time purchase. No subscriptions. Designer Toolkit is built for real-world design and development workflows. Instead of juggling multiple extensions and tools, you get a focused set of utilities that work together. Everything is designed to be fast, accurate, and out of your way — so you can stay focused on the work that matters.

Details

  • Version
    1.2.0
  • Updated
    January 2, 2026
  • Features
    Offers in-app purchases
  • Size
    434KiB
  • Languages
    English
  • Developer
    Email
    andreas@katzmann.dk
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Color Picker - Eyedropper Tool

4.8

Pick colors from web pages with Eyedropper. Picker, gradient generator, palette. Quickly grab HEX, RGB.

CSS Pully – Font & Color & Style Inspector

5.0

Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers.

CSS Peek: Element Inspector

5.0

Instantly inspect elements and explore CSS properties, XPath, and more. Easily export assets, color palettes, and typography.

Color Buddy

5.0

Color selection tool

Peek - Design & Asset Toolkit

4.6

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit.

HEX Color Picker

4.9

Use Hex Color Picker from image to quickly identify and use colors for your projects. Easily pick hex color from any image.

WCAG Contrast Checker

5.0

Use WCAG Contrast Checker to easily check color contrast ratio and for online accessibility testing with WCAG contrast standards.

Hex code picker

5.0

Use Hex code picker to grab hex color codes from any webpage. Quickly identify colors and copy hex codes for all your design needs!

ColorFont | Color Picker and Font Picker

3.5

Color Picker, Font Picker, and design toolbox

color contrast checker

5.0

Ensure accessibility with Color Contrast Checker. Easily check color contrast with contrast checker for compliance!

Color Finder

4.3

Install Color Finder with eyedropper tool to activate color identifier online with RGB and HEX code finder from screen.

Color Code Picker

5.0

Use Color Code Picker as hex identifier and picture color picker from screen to find RGB color from image and webpage online.

Color Picker - Eyedropper Tool

4.8

Pick colors from web pages with Eyedropper. Picker, gradient generator, palette. Quickly grab HEX, RGB.

CSS Pully – Font & Color & Style Inspector

5.0

Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers.

CSS Peek: Element Inspector

5.0

Instantly inspect elements and explore CSS properties, XPath, and more. Easily export assets, color palettes, and typography.

Color Buddy

5.0

Color selection tool

Peek - Design & Asset Toolkit

4.6

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit.

HEX Color Picker

4.9

Use Hex Color Picker from image to quickly identify and use colors for your projects. Easily pick hex color from any image.

WCAG Contrast Checker

5.0

Use WCAG Contrast Checker to easily check color contrast ratio and for online accessibility testing with WCAG contrast standards.

Hex code picker

5.0

Use Hex code picker to grab hex color codes from any webpage. Quickly identify colors and copy hex codes for all your design needs!

Google apps