Back to Plugins
ColorsMine — Accessible Color Variables

ColorsMine — Accessible Color Variables

A full light + dark variable collection from one brand colour — every pairing checked against WCAG b

Plugin Preview

ColorsMine — Accessible Color Variables preview

About this plugin

Type one brand hex. Get 8 primitive ramps and 57 semantic variables —surface, text, border, primary, secondary, accent, and all four states —in Light and Dark modes, scoped to where each one belongs and aliasedback to the primitives. Not a palette. A collection you can build on.Name your secondary and accent too, or leave them out and they arederived. Success, info, warning and danger are assigned for you, eachanchored to its own hue so a red still reads as an error no matter whatyour brand is.── GRADE WHAT YOU ALREADY SHIPPED ──Point it at any existing collection and get a score out of 100 acrossfive weighted parts: contrast, colour-blind safety, harmony,distinctness, tonal range. Every mode is graded, because the theme thatholds in Light and collapses in Dark is the normal failure.Then scan the canvas. Real ratios on real layers, against what the textactually sits on — not what you think it does. And one named fix: thesingle smallest change that moves the grade most, found by searchingevery colour in every direction.── PROVE IT, IN BOTH THEMES ──Drop a proof frame on the canvas: your system as an interface someonewould ship, rendered Light and Dark side by side, with the hexes andthe ratios on it. Contrast you can see in a layout, not asserted nextto a swatch.Or a WCAG compliance frame for the accessibility file, a shade sheet ofevery ramp and stop, or a shareable report card.── TEN MILLION PALETTES, ZERO NETWORK CALLS ──The catalogue is a seeded generator rather than a fetched list, so all10,368,048 palettes are twelve kilobytes in the bundle. Search bycolour, mood or hex. Filter to what harmonizes with your brand, whathas enough AA pairs to build a UI, and what survives red–green colourblindness. Any result becomes a full collection.── STANDARDS ──WCAG 2.2 — 4.5:1 body text (1.4.3), 3:1 large text and non-textcontrast (1.4.11). APCA Lc alongside it, because the perceptual modeldisagrees with the ratio and both are worth knowing. Protanopia,deuteranopia, tritanopia, and greyscale.── NOTHING LEAVES YOUR FILE ──No network access at all — the manifest declares none. No account, noupload, no AI API. Enterprise files that block plugin traffic workexactly the same.── THE SAME ENGINE, OUTSIDE FIGMA ──Dev Mode codegen for CSS variables, Tailwind v4, DTCG tokens andshadcn/ui. And the identical grading engine runs in CI:npx colorsmine check --min B --wcagso the grade can be a build condition rather than a screenshot.Free. colorsmine.com

Plugin Details

Version2
CreatedJuly 31, 2026
Last UpdatedAugust 4, 2026
CategoryAccessibility tools
CreatorKemal Salih Carfi
Stats0 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    Everything runs locally. The 10.4M-palette catalog is generated from a seeded algorithm rather than fetched, and grading is pure math, so no image or color ever leaves the file.

  • Editor Types:
    figma
  • Allowed Domains:
    • none
  • Codegen Languages:
    • CSS variables(css)
    • Design tokens (DTCG)(dtcg)
    • Tailwind v4(tailwind)
    • shadcn/ui(shadcn)