Back to Plugins
Fluid Color Palettes

Fluid Color Palettes

Fully variable-based colors. TailwindCSS-styled palettes. shadcn/ui color theme.

design-to-devpaletteaccessibilitybrand palettedark modepalette generatorcolor palettevariable colorsdesign systemcolorapca

Plugin Preview

Fluid Color Palettes preview

About this plugin

Unleash the Power of Dynamic, Variable-Based Color Palettes in Figma


---

Generator your palettes: https://colors.fluid-design.io

Then paste the figma link into the plugin - And you're done!

---


When it comes to design, color is king—but managing your color palette shouldn't be a royal pain. Our Figma plugin simplifies the process like never before, allowing you to:


  1. Generate 1000+ Dynamic Variables with stepped-opacity: Instead of static color codes, receive variable-based palettes for total design flexibility. Switch between light and dark modes with zero manual adjustments. Then you can use your colors as variables like: color/primary/50, color/gray/100 or with opacity color/accent/500/95 or brand/foreground/70!
  2. One-Click Brand Palette Customization: Automatically generate a 'Brand Palette' designed for diverse use-cases like background, foreground, and more—all based on your chosen base colors.
  3. Seamless Design-to-Development Workflow: With one generated link, effortlessly integrate your palette into Figma and simultaneously generate color tokens for TailwindCSS and shadcn/ui. Ensure design consistency across platforms and speed up project timelines.


Close the Gap Between Design and Development

Our plugin doesn't just save designers time—it builds bridges between design and development teams. By generating unified color tokens, we ensure consistency and ease-of-use across various platforms. No more back-and-forths over color codes; just a single, harmonious workflow.


Affordable, One-Time Purchase

For a fixed one-time payment, gain lifetime access to all premium functionalities. Say goodbye to manual adjustments and accelerate your design workflow—it's a game-changing investment that pays off instantly.


The Science Behind the Palette—Simplified

We employ advanced color science to make sure your palettes are not just stunning, but functional. And for those concerned with accessibility, rest assured: our colors meet WCAG 2.1 and APCA standards. But don't worry about the complexities—our plugin does all the heavy lifting, so you can focus on what you do best: designing. And for those who're interested digging how these colors were picked, checkout the color science page.


Effortless Updates

Update your palette via our website at any time.


Ready to elevate your design workflow? Install our plugin today and experience the future of color management in Figma.

Plugin Details

Version12
CreatedOctober 17, 2023
Last UpdatedJuly 5, 2024
Categorydesign-tools-other
CreatorOliver Pan
Stats143 installs, 25 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Network Access:

    Plugin queries palettes from the web application

  • Editor Types:
    figma
  • Allowed Domains:
    • https://colors.fluid-design.io
    • https://docs.google.com
    • https://fluid-colors.vercel.app