Arrange hues
<p>Arrange color hues on a hue ramp and see which hues are used a lot and where there are gaps. Originally created to compare competitor brand colors and discover opportunities.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select layers of colors you want to arrange.</li><li>Run the plugin.</li></ol><p><br></p><p><strong>Limitations:</strong></p><ul><li>Can't select more than 50 layers. You will have to split it into two runs if you have more colors to arrange.</li><li>Works only with rectangles, ellipses, polygons, stars and vectors.</li><li>Won't work on layers with gradients or multiple fills in it.</li><li>If a selection has some non-compatible layer types, the plugin will just ignore those layers and still arrange the compatible ones.</li></ul><p><br></p><p><strong>Future release ideas:</strong></p><ul><li>Arrange colors based on saturation levels too.</li><li>Probably a UI to control the size of the swatches.</li><li>Show count of color swatches with same hue value (it's overlapped in the current version).</li></ul><p><br></p><p>---</p><p><strong>Credits:</strong></p><p>Used <a href="https://stackoverflow.com/a/6179495" rel="noreferrer noopener nofollow ugc" target="_blank">Marco Demaio's rgb2hsb function</a> to get hue values from Figma object RGB values.</p><p><br></p><p><strong>Got more ideas or doubts?</strong></p><p>Connect with me on <a href="https://twitter.com/anveshdunna" rel="noreferrer noopener nofollow ugc" target="_blank">twitter.com/anveshdunna</a></p>
Plugin Preview
About this plugin
Arrange color hues on a hue ramp and see which hues are used a lot and where there are gaps. Originally created to compare competitor brand colors and discover opportunities.
How to use:
- Select layers of colors you want to arrange.
 - Run the plugin.
 
Limitations:
- Can't select more than 50 layers. You will have to split it into two runs if you have more colors to arrange.
 - Works only with rectangles, ellipses, polygons, stars and vectors.
 - Won't work on layers with gradients or multiple fills in it.
 - If a selection has some non-compatible layer types, the plugin will just ignore those layers and still arrange the compatible ones.
 
Future release ideas:
- Arrange colors based on saturation levels too.
 - Probably a UI to control the size of the swatches.
 - Show count of color swatches with same hue value (it's overlapped in the current version).
 
---
Credits:
Used Marco Demaio's rgb2hsb function to get hue values from Figma object RGB values.
Got more ideas or doubts?
Connect with me on twitter.com/anveshdunna
Plugin Details
| Version | 1 | 
|---|---|
| Created | July 27, 2022 | 
| Last Updated | August 5, 2022 | 
| Category | shapes-colors | 
| Creator | Anvesh Dunna | 
| Stats | 174 installs, 14 likes | 
| Pricing | Free | 
Technical Details
- API:1.0.0
 - UI:ui.html
 - main:code.js
 - Editor Types:figma
 
More Like This
Discover other plugins in the shapes-colors category.