ColorAlias — Design Tokens & Contrast Studio

Description

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 & SEO