Integrations

How to use OmniColor alongside the tools you already work with. No plugins or extensions required — OmniColor is designed to complement, not replace, your existing workflow.

Figma

Use OmniColor to:

Generate palettes, then copy the HEX values into Figma's color styles
Convert Figma colors to CMYK for print via our HEX to CMYK converter
Check contrast for any Figma color combination with our contrast checker
Extract colors from screenshots via our image color picker

Adobe Photoshop / Illustrator

Convert Adobe RGB colors to sRGB for web use via our color converter
Generate harmonious palettes for illustration with our color wheel
Preview CMYK colors on-screen with our CMYK to RGB converter

VS Code / IDEs

Generate CSS custom properties with our CSS variables generator — paste directly into your stylesheet
Build Tailwind color configs with our Tailwind color reference
Design token export from any base color via our design token generator

Tailwind CSS

Build your own Tailwind palette from a brand color:

Go to UI Color Palette Generator
Enter your base color
Download the CSS tokens or copy the values
Paste into your tailwind.config.js colors object

Material UI / Chakra / Other React Systems

Use our Material Color Generator or the reference palettes for the framework you use. Copy the HEX values into your theme configuration.

Browser Extensions

OmniColor does not require any browser extension. But we offer bookmarklets — one-click JavaScript bookmarks that add quick color-picking tools to any page.

Command-Line Tools

If you work primarily in the terminal, our documented color algorithms are implementable in any language. Many developers port our conversion functions into their own CLI tools.

Design Systems (Style Dictionary, etc.)

Use our design token generator to produce tokens, then convert the CSS output into any format your design system expects via Style Dictionary or a similar tool.

Penpot

Penpot is a free, open-source Figma alternative. OmniColor works with it exactly the same way — copy HEX values, use the palette generators to plan color, check contrast for accessibility. Our values are compatible with any design tool that uses standard CSS colors.

Build Your Own Integration

Because OmniColor is fully client-side, all our color data is accessible via standard browser APIs. The easiest way to integrate is:

Open the relevant OmniColor tool in a browser
Copy the HEX values you need
Paste into your tool

If you want programmatic integration, use the algorithms documented in our API documentation.

Request an Integration

If you maintain a tool and want to integrate with OmniColor, email developers@omnicolor.pages.dev with:

Your tool name and website
What integration you are proposing
What would help OmniColor users

We are a small team, so we cannot integrate with everything — but we respond to every inquiry.