OKLCH Palette Penpot plugin

Contribution Plugins
1

Hey everyone!

I’m excited to share my latest plugin: OKLCH-Palette, a plugin for Penpot that helps you generate perceptually uniform and accessible color palettes using the OKLCH color space.

oklch-palette-01
oklch-palette-012254×1930 303 KB

What does it do?

  • Picks the base color from your selected object or lets you pick one yourself

  • Uses OKLCH color space, so your palettes feel more natural instead of random RGB magic

  • Offers multiple generation curves: Linear, Sine, Quadratic, Arctangent, Exponential… you name it

  • Lets you adjust parameters in real time and manually tweak lightness via sliders

  • Works in separate tabs for Lightness, Chroma, and Hue

  • Drops color rectangles directly into your canvas (if you want), and can even add them to your color library

Why OKLCH?

Because it’s perceptually uniform, which basically means color steps look evenly spaced to our eyes, unlike typical RGB or HSL-based palettes. More accessible, more elegant.

Tech stuff (if you care):

  • Built with TypeScript and Vite

  • Uses Culori.js for precise color conversions

  • Supports gamut clipping, so it won’t give you weird out-of-gamut colors

  • Follows the Penpot Plugin API

Wanna try it?

  • Go grab it on the Penpot Hub: “OKLCH-Palette”

  • Or check the source code on GitHub: OKLCH-Palette repo (MIT licensed, so feel free to fork or suggest stuff)

Your feedback is more than welcome!

Please let me know:

  • Does the curve generator make any sense for your workflow?

  • Any weird bug or UI behaviour (it’s early, but I hope not too buggy!)

  • Features you’d love to have (gradients? export formats? presets?)

Would really appreciate your thoughts, honest feedback, feature ideas, or approval. Whatever you’ve got. Thank you!

10 Likes
2

:heart_eyes: Can’t wait to try this out tomorrow!

I think there’s an issue with the URLs in the Install in Penpot.app and and Copy install URL buttons. Looks like they’re http:// not https:// and this causes an error in Penpot if you try to install from those buttons.

The plugin does not exist or the URL is incorrect.
The plugin does not exist or the URL is incorrect.868×178 12.5 KB

The plugin URL is incorrect.
The plugin URL is incorrect.548×132 3.59 KB

I could install it when I copied the Install URL URL from the Details section of the plugin page:

https://oklch-palette.pages.dev/manifest.json for anyone else looking to try out the plugin!

1 Like
3

Fixed!!!

Thank you so much @LauraKalbag

1 Like
4

@juan.delacruz it’s so good! I love that it creates a sensible scale regardless of what base colour you through at it, and being able to tweak either the curve or the individual values is sooo helpful.

A couple of things that confused me slightly. The text that says “Vary the Parameters on the right, to modify the Curve”… the parameters/sliders are below the text not on the right? Also the proximity of the reset button to the formula made me think that you could make changes to the formula (like I’d know what I was doing there anyway :rofl: ) rather than resetting the values I had adjusted with the slider. Does that make sense?

Thank you for this fabulous plugin! Previously I was using GitHub’s old Primer Prism tool to generate palettes like this, and now I can do it without leaving Penpot :partying_face: And it pairs perfectly with the Color Styles to JSON file plugin for design tokens goodness.

5

@juan.delacruz OMG I’ve just seen the Semantic Tagger plugin… you are my new favourite person!

6

Thank you for your feedback!!

I’ll keep it in mind for the next update I’m planning :slight_smile:

1 Like
7

Thank you so much!

I hope to improve it with some ideas users have shared with me. If you have any feedback, please let me know!

1 Like