Back to Plugins

PencilColor (BETA) — Smart OKLCH Figma Color Palette Generator
Accessible Figma color palettes with OKLCH & WCAG
Plugin Preview
About this plugin
PencilColor is a professional-grade Figma plugin that generates production-ready, accessible color systems in seconds. Powered by OKLCH color science, it creates perceptually uniform ramps, WCAG/APCA-compliant palettes, auto-linked variables, and ready-to-use style guides. Export to CSS, SCSS, Shadcn, Tailwind, JSON, iOS, and Android formats — all without leaving Figma.
✨ Key Features of PencilColor
- Smart Palette Generation – Create perceptually uniform OKLCH ramps (Tailwind-compatible 50 → 950) with real-time updates and advanced gamut mapping.
- Built-in Accessibility – WCAG 2.1 and APCA contrast checks with automatic best text color suggestions (black/white).
- Figma Variables & Tokens – Instantly generate structured Figma variables for brand, neutral, system, and custom palettes.
- Style Guide Generator – Auto-create light/dark style guide frames with swatches, hex codes, contrast badges, and accessibility indicators.
- Color Harmonies – Generate complementary, analogous, triadic, split-complementary, square, and tetradic ramps from any base color.
- Functional & Neutral Palettes – System colors (Success, Warning, Error, Info) and professional grayscale palettes ready to use.
- Intelligent Color Naming – Human-friendly names with mood, accessibility rating, and cultural associations.
- Theme Management – Build complete light and dark theme variants with consistent spacing and balance.
- Flexible Export Options – Export colors to CSS, SCSS, JSON, Tailwind config, iOS Swift, and Android XML.
- Advanced Controls – Adjust global lightness, contrast, and chroma with real-time OKLCH previews.
✨ New update:
- UI Improvement
- Accessibility
- Local Styles
- Local Styles & Style Guide
- Color adjustment slider range for fine-tuning within an optimal range.
- Custom color picker with a built-in option to copy the color code.
We're Here for You:
Questions? Ideas? Just want to chat about colors? Drop us a line at [email protected] – we're all ears and always here to help.
Plugin Details
Version | 6 |
---|---|
Created | August 29, 2025 |
Last Updated | October 8, 2025 |
Category | design-tools-other |
Creator | Mehedi Hasan |
Stats | 234 installs, 61 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://api.lemonsqueezy.com
- https://connect.pabbly.com
More Like This
Discover other plugins in the design-tools-other category.