renk · palette
OKLCH palette generator: design tonal scales, drop in your brand colors, ship variables
Plugin Preview
About this plugin
renk · palette turns a single matrix into a complete, perceptually-even color system — then builds a semantic layer on top and writes it all straight to Figma variables.Start with primitives. Build your palette as a live hue × lightness grid. Every cell is computed in OKLCH, so lightness steps look even across all hues and colors stay inside the sRGB gamut. Tune it visually, then create variables in one click. Re-run it any time — variables with the same name are updated in place, so your palette stays in sync.Then generate a semantic layer. Switch to the Semantic tab and scaffold semantic tokens that alias your primitives, with Light and Dark modes built in — the layer where you manage theming. Pick a preset, toggle domains, and create the whole set in one click.Primitives- 🎚 Live matrix editor — type exact values, drag swatches to reorder hues (↔) and lightness steps (↕)- 🌈 OKLCH engine — perceptually uniform tonal scales, gamut-safe by construction- 🎯 Drop in your brand colors — each key color snaps into the matrix and is highlighted where it lands- 🪄 Brand-adaptive saturation — match the whole palette's vibrancy to your brand colors' average in one click- 🧪 Multiple chroma layers — vivid, muted, etc. — switch which one the matrix previews- 📐 Per-hue lightness bias — keep yellows/greens readable in the dark steps- 🌗 Tinted neutrals — add warm/cool grey scales, plus white/black alpha rampsSemantic layer- 🧩 Structured tokens — a {domain}/{layer}/{category}/{intensity}/{state} model across base, graph and product- 🌓 Light & Dark modes — every token aliases a primitive per mode (single-mode fallback on free plans)- 🎛 Presets — Minimal / Standard / Full, plus editable categories, layers, intensities and states- 🔗 Auto-aliased to primitives — tokens with no match fall back to raw colors you can rebind later- 👁 Live preview — see every token resolved in both Light and Dark before you create- ✍️ One-click Figma variables — create a new collection or update an existing one in placePerfect for kicking off a design system: generate your primitives, then a semantic layer with dark mode on top — all as Figma variables, kept in sync.
Plugin Details
| Version | 4 |
|---|---|
| Created | June 8, 2026 |
| Last Updated | June 21, 2026 |
| Category | shapes-colors |
| Creator | Vladyslav Hryhorenko |
| Stats | 36 installs, 3 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:
- none
More Like This
Discover other plugins in the shapes-colors category.