Back to Plugins
OKChroma

OKChroma

A full accessibility-solved theming system from one brand color

Plugin Preview

OKChroma preview

About this plugin

OKChroma generates a complete, accessibility-solved color system from a single brand color. It writes it into your file as Figma variables that alias into modes for easy white labeling.Pick your primary: The engine resolves a full token scale (paper → wash → highlight → ink), the cta pair with computed on-colors, a brand-tinted neutral, and four signal families (red, yellow, green, info) that are collision-checked against your brand so a red-adjacent primary never blurs into your error color.Add a secondary: (Optional) derived from your primary as a pastel by default, or your own hex in Tint, Pastel, Outline, or Exact style.This project is an experiment in "primitives as requirements" you can learn more on the tools demo site. Text colors are chosen because they pass. Boundary stops carry their non-text contrast contract. And the whole system re-solves under your choice of contrast math: APCA (the default — the perceptual model) or WCAG (the strict ratios, every text color guaranteed to pass). Switching never mixes values. The plugin keeps one profile per collection pair and forks a clearly-labeled second pair if you change your mind mid-file.What it writes:theme + mode collections mode stores your "brands" and aliases them onto shared primitives ready for use in your system's semantic tokensper-brand ramps under brand/; neutrals and signals deduplicated across brandslight + dark values for every token; on-colors aliased to stable polesApply it twice with two brand colors and you have a multi-brand system on shared foundations.

Plugin Details

Version1
CreatedJuly 4, 2026
Last UpdatedJuly 4, 2026
Categorylibraries-other
Creatoremily gerrity
Stats0 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/plugin-ui.html
  • main:dist/plugin-code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none