Duotone UI components
Duotone maps an image or UI to just two contrasting colors for a striking, cohesive look. Apply the effect with these free React and Tailwind components and a duotone generator.
Duotone components
- ✓ Unlimited components
- ✓ All 41 styles
- ✓ Figma export
About duotone
Duotone maps an image or UI to just two contrasting colors for a striking, cohesive look. Apply the effect with these free React and Tailwind components and a duotone generator. Two strong colors, halftone blend.
All Duotone blocks are free, MIT-licensed and copy-paste ready in React & Tailwind. Need raw CSS? Try the free generators, or browse every look in the full collection.
FAQ
Duotone maps an image or UI to just two contrasting colors for a striking, cohesive look. Apply the effect with these free React and Tailwind components and a duotone generator.
Duotone is defined by two strong colors, halftone blend. Use the shared color, radius, border, shadow and motion tokens in the examples above to reproduce the look consistently in React and Tailwind.