Back to Plugins
ProColor - 100% Accessible Color Palette Generator

ProColor - 100% Accessible Color Palette Generator

Generate accessible color palettes, from base color to shipped tokens.

Plugin Preview

ProColor - 100% Accessible Color Palette Generator preview

About this plugin

ProColor - Accessible color palettes, from base color to shipped tokens.Design-grade color generation with built-in accessibility, contrast science, and Figma-native workflows.Perfect for design systems, product teams, and anyone who needs truly reliable color.🌈 Core Palette GenerationDynamic step counts (5, 6, 8, 10, 12, 16)13 color algorithms (Tailwind, Radix UI, Ant Design, Monochromatic, Hue Shift, Analogous, Complementary, etc.)15 naming presets (50–900, 1–12, 10–100%, A–F, Material, Bootstrap, etc.)Real-time preview with hex codes and role badgesBase color picker + hex inputExtract colors directly from Figma objects♿️ Accessibility & Contrast Built InWCAG 2.2 AA / AAA contrast checkingAPCA (Advanced Perceptual Contrast Algorithm)OKLCH ΔL contrast modelPer-color contrast ratios (vs. white & dark surfaces)Manual-adjustment for failing colorsPalette validation with warningsColor Blindness Simulation (9 types)Visual Acuity Simulation (low-vision blur + reduced contrast)High-Contrast Mode Preview🎛 Fine-Tuning ControlsContrast shift (−20% to +20%)Hue shift (−30° to +30°)Luminance curve (0.5–2.0)One-click reset to defaults🎨 Color Profiles13 pre-configured profiles (Tailwind, Material, Radix UI, Fluent 2, Bootstrap, and more)Automatically sets algorithm, naming preset, and steps🧩 Semantic Color MappingAssign roles: Primary, Secondary, Warning, Success, NeutralAuto-generate semantic tokens for design systems📤 Export & IntegrationGenerate palettes as Figma framesCreate local color stylesCreate Figma Variables (scoped folder structure)Export to:• CSS Variables• JSON• Tailwind config• SCSS / SASSBuilt-in code drawer with copy buttons🎚 Gradient GeneratorPick any two palette colorsLive gradient previewCreate gradient layers in FigmaCreate gradient local styles🔗 Color RelationshipsComplementaryTriadicAnalogousGenerate derived palettes from relationships💡 Inspiration Library21 system palettes (Material, Radix, Tailwind, etc.)36 industry palettes (Healthcare, Finance, Tech, E-commerce, Education, Creative)Use any as a base color seed👁 Visual FeaturesHue cards with contrast badgesAccessibility warningsSmart tooltips with adjustment suggestionsVisual acuity simulationColor blindness preview overlay☕️ Support the projectIf ProColor helps your workflow, you can say thanks ☕️https://buymeacoffee.com/hakanertan👋 Connect with MeLinkedIn: https://www.linkedin.com/in/hakanertann/About Me: https://hakan-ertan.com/about-me/

Plugin Details

Version4
CreatedNovember 24, 2025
Last UpdatedDecember 2, 2025
CategoryAccessibility tools
CreatorHakan Ertan
Stats260 installs, 52 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none