Color Analyzer

Context

Project Brief

A Figma plugin that analyzes any selected element and returns its full color profile — HEX, RGB, CMYK — plus WCAG 2.1 contrast ratios and an opacity scale on both white and black surfaces. Built to eliminate context switching during accessibility audits.

My Role UX Developer

Team Solo project

Duration 4 weeks

Platform Figma Plugin API

Discovery

What I Found

Observation and testing with design teams revealed three core friction points.

Context switching kills flow

Designers leave Figma 15–20× per day to check contrast ratios in browser tools. Each interruption breaks the creative flow and adds up to hours lost weekly.

Raw HEX isn't enough

Teams need RGB for developer handoff, CMYK for print, and opacity variations for design systems. No single Figma-native tool provided all three in one view.

Opacity scales are built manually

Creating tint/shade scales is done color by color, manually. Designers described it as "the most tedious part of building a design system."

Problem Statement

"How might we give designers instant, complete color intelligence — without ever leaving Figma?"

Root Cause

Accessibility color tools exist outside the design environment. This external dependency creates friction that slows teams and quietly discourages WCAG compliance.

Workflow Impact

Before & After

The same task — checking one screen for WCAG compliance — before and after the plugin.

Before — without plugin

1Select element in Figma
2Copy the fill color
3Open browser — switch context
4Paste into contrast checker tool
5Note WCAG result manually
6Go back to Figma
7Repeat for every element

After — with Color Analyzer

1Select element in Figma
2Click "Get color from element"
✓HEX · RGB · CMYK — instant
✓WCAG contrast ratio — instant
✓Full opacity scale — instant

Design Rationale

Key UX Decisions

Three choices that define the plugin's experience — and the thinking behind each.

Decision 01

Single screen, no navigation

Problem:

Plugins with multiple tabs add cognitive load to an already complex workflow.

Choice:

Everything in one scrollable, linear view.

Why:

Users are mid-task in Figma — the plugin is a tool, not a destination. Minimal UI means faster access to the answer they need.

Decision 02

Show all color formats simultaneously

Problem:

Getting HEX, then switching tools for CMYK wastes time and breaks focus.

Choice:

Display HEX + RGB + CMYK in a single output panel, always visible.

Why:

One glance satisfies web developers, print teams, and design system owners. No extra clicks, no cognitive switching.

Decision 03

Auto-generate the opacity scale

Problem:

Building tint/shade scales manually is tedious and error-prone.

Choice:

Automatically compute and display 10%–90% steps on both white and black on every analysis.

Why:

This became the plugin's defining feature — users didn't ask for it, but it's the most cited reason for installation and retention.

Solution

The Plugin

One-click color intelligence, directly inside Figma.

1Color Analysis — clear section context at a glance
2Optional color name — for team reference, never blocking
3One-click extraction — reads selected Figma element fill
4Auto opacity scale — #FFF & #000 surfaces, 10–90%

Output

Color Analysis Output

Every analysis instantly produces a full opacity scale — something no other Figma tool does automatically.

Pink

HEX: #FFA5EA

RGB: (255, 165, 234)

CMYK: 0%, 35%, 8%, 0%

Contrast with #FFF: 1.78 FAIL

Contrast with #000: 11.82 AAA

Pink #FFA5EA — blended with #FFFFFF surface

Base#FFA5EA

#FFA5EAOriginal

10%#FFF3FC

#FFF3FC10%

20%#FFE8F9

#FFE8F920%

30%#FFDCF6

#FFDCF630%

40%#FFD1F3

#FFD1F340%

50%#FFC5EF

#FFC5EF50%

60%#FFBAEC

#FFBAEC60%

70%#FFAEE9

#FFAEE970%

80%#FFA3E6

#FFA3E680%

90%#FF97E3

#FF97E390%

Pink #FFA5EA — blended with #000000 surface

Base#FFA5EA

#FFA5EAOriginal

10%#1A1017

#1A101710%

20%#33202E

#33202E20%

30%#4D3146

#4D314630%

40%#66425D

#66425D40%

50%#805275

#80527550%

60%#99638C

#99638C60%

70%#B273A4

#B273A470%

80%#CC84BB

#CC84BB80%

90%#E594D3

#E594D390%

Technical

Under the Hood

Designed and coded end-to-end as a UX Developer.

Stack

JavaScript HTML CSS Figma Plugin API

No frameworks. No build tools. Vanilla everything.

Architecture

Two-layer Figma plugin model:

Sandbox layer — reads figma.currentPage.selection, extracts fill color
iframe layer — receives color via postMessage, computes all values and renders UI

Color Math

WCAG: (L1 + 0.05) / (L2 + 0.05)

CMYK: 1 − R/255 → C, M, Y, K

Blend: color × α + surface × (1−α)

Reflection

What I'd do differently

Test with real accessibility workflows earlier — I discovered the opacity scale need only after initial launch, through user feedback.
Add copy-to-clipboard for each value — manual text selection is friction I underestimated from the user's perspective.
Support multiple selected elements — single selection is a constraint users hit quickly when auditing full screens.

Project Brief

What I Found

Context switching kills flow

Raw HEX isn't enough

Opacity scales are built manually

Before & After

Key UX Decisions

Single screen, no navigation

Show all color formats simultaneously

Auto-generate the opacity scale

The Plugin

Color Analysis Output

Results & Impact

Under the Hood

Stack

Architecture

Color Math

What I'd do differently