chroma

Control Photoshop with CSS. Our Adobe plugin lets you apply filters, transform layers, and create masks using simple text commands. Edit faster, smarter, and automate your entire creative workflow.

Comment

💡Inspiration

Designers today face a frustrating choice. Native Photoshop is powerful, but it's also click-heavy and not scalable; replicating the “look” of a film or photo requires tedious, manual editing that isn't repeatable across projects. On the other hand, AI tools are often a black box, making it hard to fine-tune results or recreate the exact same style every time.

There's no universal, reusable way to describe a visual "style"—until now.

We wanted to bridge this gap by combining the speed of AI with the customizability of manual editing, bringing modern, developer-like workflows (like copy-paste styling and readable code) into the Photoshop world.

⚙️What it does

chroma is a Photoshop plugin that extracts the visual style of a reference image and converts it into modular, CSS-like code. This code describes effects like opacity, blend modes, transforms, and color overlays in a format that's readable, editable, and reusable—making it easy to apply consistent aesthetics across layers.

By combining the speed of AI-driven style extraction with the customizability of manual editing, chroma gives designers the best of both worlds using Gemini Flash 2.5 and UXP. Effects can be tweaked directly in code, shared across teams, and scaled across projects—all without repetitive clicking.

🔑Key features:

  • Editable style code (e.g. saturation: 90%, gradient-overlay: linear(...))
  • Built-in code editor with linting
  • One-click application to any selected Photoshop layer
  • AI-powered extraction using Gemini 2.5 Flash (color palette, blur, vignette, etc.)

🛠️ How we built it

  • React + UXP (Unified Extensibility Platform)
  • Gemini 2.5 Flash For Image Analysis and CSS Generation ##😅 Challenges we ran into

Handling the complexity of Adobe UXP, which is quite obscure and unique to building Adobe Plugins

Making a live code editor that feels natural inside a visual tool

⭐Accomplishments that we're proud of

Prototyped a working Photoshop plugin from scratch

Created a modular style system that's readable by humans and computers

Made styles portable across projects and assets

Delivered a UX that feels creative, not technical—while still being developer-friendly

Took something previously unsharable (a "look") and made it copy-pasteable

📚 What we learned

AI can speed up creativity—but only when paired with transparent, editable output

Designers want speed and control—not just presets

Code-based styling in visual tools improves scalability, shareability, and repeatability

Photoshop scripting is a beast—but with UXP, you can tame it with React and modern tooling

Built With

Share this project:

Updates