Back to Plugins
PencilColor (BETA) — Smart OKLCH Figma Color Palette Generator

PencilColor (BETA) — Smart OKLCH Figma Color Palette Generator

Accessible Figma color palettes with OKLCH & WCAG

Plugin Preview

PencilColor (BETA) — Smart OKLCH Figma Color Palette Generator 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

  1. Smart Palette Generation – Create perceptually uniform OKLCH ramps (Tailwind-compatible 50 → 950) with real-time updates and advanced gamut mapping.
  2. Built-in Accessibility – WCAG 2.1 and APCA contrast checks with automatic best text color suggestions (black/white).
  3. Figma Variables & Tokens – Instantly generate structured Figma variables for brand, neutral, system, and custom palettes.
  4. Local Style: Now you can generate local style and guide.
  5. Style Guide Generator – Auto-create light/dark style guide frames with swatches, hex codes, contrast badges, and accessibility indicators.
  6. Color Harmonies – Generate complementary, analogous, triadic, split-complementary, square, and tetradic ramps from any base color.
  7. Functional & Neutral Palettes – System colors (Success, Warning, Error, Info) and professional grayscale palettes ready to use.
  8. Intelligent Color Naming – Human-friendly names with mood, accessibility rating, and cultural associations.
  9. Theme Management – Build complete light and dark theme variants with consistent spacing and balance.
  10. Flexible Export Options – Export colors to CSS, SCSS, JSON, Tailwind config, iOS Swift, and Android XML.
  11. Advanced Controls – Adjust global lightness, contrast, and chroma with real-time OKLCH previews.
  12. Image to Color - Upload via drag-and-drop, file browser, or select from Figma canvas.
  13. Rename: You can rename the color palette.


✨ New update:

  1. Image to color
  2. Color palette save and load
  3. 4,500+ unique color names
  4. Local styles & style guide
  5. Rename color palette
  6. Plugin theme switcher with auto, light, and dark modes
  7. Local style


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

Version9
CreatedAugust 29, 2025
Last UpdatedNovember 1, 2025
Categorydesign-tools-other
CreatorMehedi Hasan
Stats299 installs, 77 likes
PricingFree

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