Back to Plugins
Arrange hues

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>

sortbrand colorshuecolor arrangevectorarrangehue sortcolor sorthue arrangecolor areascolor

Plugin Preview

Arrange hues 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:

  1. Select layers of colors you want to arrange.
  2. 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

Version1
CreatedJuly 27, 2022
Last UpdatedAugust 5, 2022
Categoryshapes-colors
CreatorAnvesh Dunna
Stats159 installs, 11 likes
PricingFree

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.