Item logo image for ColorAlias — Design Tokens & Contrast Studio

ColorAlias — Design Tokens & Contrast Studio

Item media 2 (screenshot) for ColorAlias — Design Tokens & Contrast Studio
Item media 1 (screenshot) for ColorAlias — Design Tokens & Contrast Studio
Item media 2 (screenshot) for ColorAlias — Design Tokens & Contrast Studio
Item media 1 (screenshot) for ColorAlias — Design Tokens & Contrast Studio
Item media 1 (screenshot) for ColorAlias — Design Tokens & Contrast Studio
Item media 2 (screenshot) for ColorAlias — Design Tokens & Contrast Studio

Overview

Project palettes with semantic tokens, live WCAG contrast checking on real pages, and 1-click export to Tailwind, CSS & JSON.

ColorAlias is the ultimate precision workspace for UI/UX designers, frontend developers, and creators who need to capture, organize, and export project colors effortlessly. Designed with a sleek high-contrast aesthetic (Ink & Brass), ColorAlias unifies your entire design-to-code workflow inside a single Chrome side panel. KEY FEATURES Fast Precision Capture: Use the native Eyedropper API to pick and save any color directly from your screen. Smart Bulk Import: Paste CSS (:root), JSON, or raw text containing HEX/RGB values and let ColorAlias detect and add them instantly. Semantic Token Organization: Assign design roles (such as backgrounds, text, borders, surfaces, or custom categories) to your colors. Live WCAG 2.1 Contrast Inspector: Test contrast ratios (AA and AAA compliance) for your color pairs with dynamic text size preview. Live Contrast Lens: Inject and preview your contrast text/background combinations directly onto the active webpage's DOM in 1 click. 1-Click Exports: Generate clean, production-ready code for Tailwind CSS v4, Tailwind v3, CSS Variables (:root), SCSS, or W3C Standard JSON. HOW TO GET STARTED Click the ColorAlias icon to open the Chrome side panel. Use the Eyedropper to pick a color or click "Import" to paste an existing palette. Organize your colors into projects and assign semantic roles. Export your code in your preferred framework format. SECURITY & PRIVACY ColorAlias stores your palettes and projects locally in your browser. We respect your privacy: we do not sell, track, or share your data with third parties. Category Developer Tools Single Purpose Organizes project colors as design tokens with semantic roles, inspects accessibility contrast on live webpages, and exports them to code.

Details

  • Version
    1.0.0
  • Updated
    August 5, 2026
  • Offered by
    Aidially
  • Size
    1.41MiB
  • Languages
    2 languages
  • Developer
    Email
    info@aidially.com
  • 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

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

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

Stylus

4.5

Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.

Clear Cache

4.5

Powerful, user-friendly browser data management, right from your toolbar.

SEO META in 1 CLICK

4.9

Displays all meta data and main SEO information for the best SEO

ColorPick Eyedropper

4.2

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

ColorZilla

4.6

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

Tag Assistant

3.9

The Tag Assistant extension works with Tag Assistant to help troubleshoot installation of gtag.js and Google Tag Manager.

User-Agent Switcher for Chrome

3.9

Spoofs & Mimics User-Agent strings.

Lighthouse

4.4

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

Similarweb - Website Traffic, AI Traffic & SEO Checker

4.6

Instant website analysis, AI traffic insights, and SEO metrics at your fingertips.

Web Developer

4.5

Adds a toolbar button with various web developer tools.

Eye Dropper

4.3

Pick colors from any website.

SEOquake: On-Page SEO Checker

4.5

Run page-level SEO audits, check technical issues, analyze links and keyword density, and view Semrush metrics.

Stylus

4.5

Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.

Clear Cache

4.5

Powerful, user-friendly browser data management, right from your toolbar.

SEO META in 1 CLICK

4.9

Displays all meta data and main SEO information for the best SEO

ColorPick Eyedropper

4.2

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

ColorZilla

4.6

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

Tag Assistant

3.9

The Tag Assistant extension works with Tag Assistant to help troubleshoot installation of gtag.js and Google Tag Manager.

User-Agent Switcher for Chrome

3.9

Spoofs & Mimics User-Agent strings.

Lighthouse

4.4

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

Google apps