Derek's OKLCH Variables

About this plugin

Derek's OKLCH Variables -

Figma OKLCH Token Conversion

Transform your color workflow with vibrant, perceptually uniform OKLCH colors!

Derek's OKLCH Variables makes it easy to sync OKLCH color tokens between your CSS files and Figma variables. Built with a bold, comic book-inspired interface that makes color management actually fun.

✨ Features

📥 Import OKLCH Variables

1. Paste CSS variables in OKLCH format directly into Figma
2. Automatically updates existing variables or creates new ones
3. Supports the modern oklch(L C H) CSS format
4. Batch import hundreds of color tokens at once

📤 Export to OKLCH CSS

1. Export Figma color variables back to OKLCH CSS format
2. Choose specific collections or export everything
3. One-click copy to clipboard
4. Perfect for keeping design tokens in sync

🎨 Accurate Color Conversion

1. Precise OKLCH ↔ RGB conversion using OKLab color space
2. Perceptually uniform color adjustments
3. Maintains color accuracy through round-trip conversions
4. No more RGB/HSL headaches

⚡ Lightning Fast

1. Optimized batch operations
2. Updates variables in seconds, not minutes
3. Smart collection scoping prevents conflicts
4. Handles large design systems with ease

🎯 Perfect For

1. Design systems using OKLCH color tokens
2. Teams syncing colors between code and design
3. Anyone working with modern CSS color formats
4. Designers who want better color perception

💡 How to Use

Import:

1. Click the giant IMPORT button
2. Select your target collection
3. Paste your OKLCH CSS variables
4. Hit IMPORT NOW!

Export:

1. Click the giant EXPORT button

2. Choose a collection

3. Click EXPORT NOW!

4. Copy to clipboard and you're done

📝 Supported Format

Works with any valid OKLCH color format including alpha channels.

🎨 Why OKLCH?

OKLCH is a perceptually uniform color space that makes color adjustments predictable and consistent. Unlike RGB or HSL, changes in lightness, chroma, and hue feel natural to the human eye.

🦸‍♂️ About

Designed with love by Delightful Derek, Inc. for designers who appreciate both great tools and great design.

License: Your mom.