Update Notice [17-July-2024]
I’ve made significant improvements to the ColorList Script for Adobe Illustrator! The new version offers enhanced features and customization options, making it easier than ever to create beautiful color charts. Check out the Improved ColorList Script for Better Color Charts for the latest updates and download instructions.
Using this script can save you a significant amount of time and ensure consistency in your brand’s color documentation. Whether you’re a seasoned designer or new to creating style guides, automating repetitive tasks can greatly improve your productivity and accuracy.
With this script, you can quickly create a list of colours you use in a selected object or a group of objects. The ColorList combines an action and a script for Adobe Illustrator. In this blog post, I want to explain how to install and use it. Below is the video with a short introduction to how this feature works.
You are also welcome to have a look at my other scripts.
Before diving into the details, let’s talk about another script of mine, named ColorListAllinOne.jsx. This particular script incorporates ColorListAction.aia directly within it. One of the main benefits of using ColorListAllinOne.jsx is its ease of installation; you need to install this single script. However, there’s a drawback worth noting: the script can only be executed through Illustrator’s menu by navigating to File > Scripts > ColorListAllinOne.jsx. This limitation means you must exercise caution, as attempting to run this script as part of an action or through any automated process will cause Illustrator to freeze.
If you are like me and prefer to call scripts through shortcuts, stick to the ColorList.jsx and the ColorListAction.aia. Below I guide you on how to install these files on your computer.
In order to use this feature, you need to download the files here. You’ll get a ZIP folder. After unzipping the folder, you’ll get a folder with two files: ColorList Action.aia and ColorList.jsx.
Action (ColorList Action.aia) file
Step 1: Action.aia file
To begin with, save the ColorList Action file in some directory on your computer. To be sure to find it again, I suggest saving it in the Adobe Illustrator Actions folder.
Windows
C:\Program Files\Adobe\Adobe Illustrator CC 2020\Presets\en_US\Actions
Mac-OX
/Applications/Adobe Illustrator 2020/ Presets/en_US/Actions
Step 2: Load Action
Next, open the Actions Window in the Adobe Illustrator application. If it’s not open, you can easily find it. Navigate to Windows in the top bar of Illustrator and choose Actions from the drop-down menu.
When the Actions window opens, click on the burger bar in the top right corner and choose Load Actions from the drop-down menu. The picture below illustrates this.
Create a List of Colors from a Selection. Record an action.
Afterwards, navigate to the folder where you saved the ColorList Action file and open it.
As a result, you can see the action ColorList appears in the Actions window. We are almost there, but I would like to apply some custom options for a better workflow.
Step 3: Action Options
For a better workflow, you can change some options in order to use Hot Keys and Actions Button mode. Additionally, you are very welcome to read my post about how to record an action in order to run a script here.
With the ColorList action selected in the window, click the burger icon in the top right corner of the Actions window. Select Action Options from the drop-down menu as shown in the picture below.
Accordingly, the Action Options window opens, and you can set your preferable settings for a Function Key as well as choose a Color for the Button View.
ColorList.jsx
Now it’s time to save the script file ColorList.jsx file. In order to make the action work, you must save it in the Adobe Illustrator Scripts folder. Be aware that my path can vary slightly from yours.
Windows
C:\Program Files\Adobe\Adobe Illustrator CC 2020\Presets\en_US\Scripts
Mac-OX
/Applications/Adobe Illustrator 2020/ Presets/en_US/Scripts
After all, is done, restart Adobe Illustrator.
Run the ColorList Action
Finally, you can try the Color List script/action. Always start by selecting the object you want to execute colors from. In fact, there are three ways to run the action.
In case you followed the instructions in step 3, you can use the quick way to create a list of colours by pressing the Function Key you assign to the ColorList action.
Else: Open the Action window and switch it to the Button Mode, as shown in the picture below. Therefrom, you can just press the right button.
Or, with the Action window opened, choose the ColorList script and then press the Play Current Selection button, as I showed in the picture below.
Custom Form for your Swatch Icon
Alternatively, you can replace the rectangle with your own shape. You can draw your own shape and name it “myForm” in the layers panel.
The next time you run the script, the rectangle will be replaced with your shape. Keep in mind that this only works for a regular path element, a group or compound path will not work.
In the end, I want to make you aware that this script, unfortunately, cannot pull colors from placed or embedded images. This is due to the fact that Adobe Illustrator is just unable to extract colors from pixel images.
Check Out This Video Tutorial
If you prefer a visual guide, check out this video by Anne from Graphic Design How To.
She provides a detailed walkthrough on how to use the ColorList script, making it easy to follow along and understand the process. Whether you’re a visual learner or just looking for a different perspective, this video is a great resource.
I hope you’ll be happy with this script and find it beneficial in your everyday work. I’ll be happy to hear your opinion and impression of it. I’ll also be very pleased if you make me aware of some issues or if you have some ideas for improvement. So please, don’t be shy to leave a comment or write me a message.
40 Responses
Hi…is there a way of getting the web safe RGB codes for online design work? I need to use Canva for a client and want to upload a number of brand colours I’ve created for the project but it only excepts hex codes. Any ideas? Thanks, Daniel
Hi Daniel
Thank you for your comment and your interest in this script.
This is very possible and you are not the first to ask about it. 🙂 I am planning to see how to add hex colours to this script. But I am currently busy with paying clients and will be able to tackle this script when their project is complete.
This is a great script, amazing! , but as RGB values can we get hash code as well?
Hi, Jagdish. Thank you. Glad to hear that you like the ColorLIst script. I am planning to add hex colours to the script. I hope that in the near future I will have time for this.
Love the script! I’d love to get the Hex colours as well from RGB/CMYK colours! 😀
I know, I know. It’s on my to-do list. :)))
This is a fantastic script and I can see my team using this in their regular workflow.
Is there an easy change to the script to display CMYK with 2 decimal places? As currently, it rounds these up/down to the nearest whole number.
Thanks!
Hi Ben, thanks for your comment. I’m so glad to hear that you are using my script and that your team likes it. I looked to see if I could help you with your request, but unfortunately, I don’t see an easy way right now, and I don’t have time to do it. However, I will keep your request in mind for the future.
I get this error:
The object “ColorList” is not currently available.
im using an older version btw
Any clue?
Hi,
Have you moved the JSX file to the Adobe Illustrator script folder and reloaded the application?
Very usefull and thanks for the share. Could i use parts of the code?
Im working again on this Logo Packer panel ive helped with. Its a panel for quick and easy creation of logo types. It exports the logos in all kinds of formats, very handy when you need deliver these to the client.
you can find it here github com / schroef / logo-packer
sorry for the weird address, sometimes comments get deleted when they have outbound link
Hi Rombout, thank you for your comment. Sorry for the delay in replying, I was on vacation. Of course, you can use some of my code in your plugin. No problem.
My idea is to combine parts of your code with code from this Gist. That way i can add all color types and the info at once
https://gist.github.com/jmsdnns/f170599dc98f036ba72a2618797f525d
I think that will be handy and a time saver for the logo packer extension
Perhaps handy for you as well. I was looking more into return color info from swatches and for more version. One is really nice, because it adds all color types. I added HEX to it myself and did some more minor work.
Im thinking of adjusting it so i can show only those i want per run. You can find my version here; https://community.adobe.com/t5/illustrator-discussions/illustrator-javascript-render-swatch-legend-lab-colour-values-incorrect/m-p/13094886#M329919
It was originally created by Wundes, perhaps you’ve heard from him. He has some really nice scripts
Another really nice of is by
jmsdnns it exports all swatches and the color codes into a CVS. ive adjusted this so it only does the selected ones. I think ill add the code from the other one, to this one. Could become handy one day
https://gist.github.com/jmsdnns/f170599dc98f036ba72a2618797f525d/
I thought, i’d share my findings with you as you also shared you script and info
Thank you for your involvement and for sharing these links. I also know these scripts because I came across them while writing the ColorLIst script and some other swatches-related scripts. It will be interesting to write a blog on this topic.
In any case, as I see, many people are interested in an improved version of the ColorList script. So hopefully, I’ll find the time to do it, and I hope I can use a part of your code for HEX colours.
I’ve not tried this script but it sounds like just what I’ve needed for years. You should start a GoFundMe. I’m sure you’d get people to donate a little and that could help add the RGB and Hex codes. That would be incredible. Thank you for your effort!
Thank you for your comment. I’m glad to hear that the ColorList script will be helpful to you. Thanks for the donation advice. I’ll see what the possibilities are.
Thank you very much! Very cool script
Awesome script! Is there a way to create the swatch panel vertical or horizontal, according my needs? thanks!
Thank you Antonio. It’s a good idea to improve this script. If I understood you correctly, you mean that the user will be able to choose the direction in which colours are displayed?
Hi, is it possible to use the script alone without passing the action?
I tried to use the script alone, but it didn’t work.
The color block I only need square shape and no other shapes.
It’s an excellent question. The Colourlist script works without the Action, but in this case, the script takes the last swatch group. The Action creates a group of swatches from your selection.
I can create a swatch group by scripting, but then items with gradients and patterns will be excluded. Therefore I use the Action to create swatch groups.
If you don’t want to use the Action, you must create a swatch group from your selection and then run the Colourlist script.
What is the reason why you don’t want to use the action?
Hello, thank you for your reply.
Since I am used to manage some scripts with Script Manager, my idea is to just select the color I want to mark up and click on the script to generate the color list directly. Just like your other scripts, I have used your PagesDateName.jsx.
And I just need to mark the corresponding color directly, no need to name the color group name in one more step.
So I was wondering if you could change something in the script to make it possible to use the script directly instead of doing it through an action.
Thank you for your script so that I can finish my work faster. Regards!
Just wanted to point out that your tools great and you do great promotion. It would be great if it would put the list in the same order as the swatches sort order in the swatch group or sort by name it would be great at minimum it would be great. It seems to sort in no particular order.
I’m glad my script helps you. Regarding the order of the swatches. I’m not sure, I understand. The script creates a group of swatches and displays them according to the order in that swatch group.
I think I have a similar query as Dean. Firstly, thanks for creating this absolute time saver! It will shave days off my workflow!
I intend to use this script when working with colourways for fashion design. An example would be: I have designed a sock with a geometric pattern consisting of 5 colours. I have copy + pasted the sock design several times and recoloured so that there are 3 separate colourways. When I run your script it produces the lovely little group of swatch chips and their corresponding names. However, the list is in a different order for each colouway of the sock. Therefore I need to manually re-order & align the swatches so that they appear in the same order for each design. Does that make sense? It would be amazing to find a solution to this.
See example here https://bit.ly/3QFzwTC
Thank you for your feedback on my script! I’m glad to hear that it will save you time in your workflow. Regarding the issue you mentioned with the order of the colour swatches in the different colourways of your sock design, I understand your concern. Unfortunately, the order in which the colour swatches are generated is determined by the Illustrator application and is not something that can be controlled by my script. I’ll try to research what logic Adobe uses to create colour groups, but I’m not sure if I will find a proper solution. Thanks for sharing your use case and lovely socks design, by the way.
Thanks! I appreciate the time you’ve taken to read & reply 🙂
Amazing script *clapping hands*.
This will be a great deal of help, especially from a production workflow. But I do have two questions.
1. In your examples I see that the swatches are displayed horizontally, but when I run the script it stacks them vertically. Any way to adjust or control this output?
2. Would it be relatively simple to have a different version of the script to just output a list of colors for simple document pasting? Personally, I need to frequently also input the spot colors as plain text in PO forms. Example output list: PMS 186 C, PMS 123 C, PMS 299 C, White
Thank you for your feedback.
1. As the script looks now, there is no possibility of controlling it from the user side.
2. It is possible to customize the script according to your needs. I’ll send you an e-mail so we can discuss the prospect.
Hi Katja ,
I found this great tool and have two questions.
What does, in the output for RGB, the number at the end mean.
Is it possible to omit it and avoid duplicate RGB values?
Greetings Ralf
Hi Ralf, thank you for the nice words about the Colourlist script. I’m not sure; what number at the end do you mean? For example, ‘COLOR GROUP 1’: is it that number in the end you refer to?
no, I mean this number: in this example I have several colors and some have a number at the end.
R=255 G=255 B=255 3
R=255 G=255 B=255 2
R=240 G=240 B=240
R=221 G=219 B=215 3
R=221 G=219 B=215
R=221 G=219 B=215 2
R=221 G=219 B=215 4
The first two lines and the last 4 have the same RGB value, but still this number at the end.
I don’t know, but I think it has something to do with duplicating process swatches.
The script only takes the swatch names; it doesn’t give names to the swatches. The swatches are named automatically by application or manually by someone. When duplicating, the Illustrator application usually puts the word “copy” in front of the number.
Is this work from a customer or your original work?
That could be, the file is from someone else. But it is good to know. Top program, I like it very much.
This is amazing. It’s almost exactly what we’ve been looking for. We manually put proof tags with file names, dates, and color swatches on our proofs, and it’s time-consuming. We have a specific tag we use so it would be nice to get this script to work within that area. That being said, I’m still going to use it as is since it’s better than what we do now.
I can’t seem to get this to work in AI 2023. I’m receiving an error code with the ColorList.jsx
Seems as though the script placement has changed from previous versions as well. Or, it could be just me – user error.
Do you use ColorList.jsx or ColorListAllinOne.jsx? I just tried with the latest version of AI, and it works fine. What does the error say?
Can you give me the link to download this colorlist action, I can’t find it in the blog. Thank you
Int his paragraph ‘In order to use this feature, you need to download the files here. You’ll get a ZIP folder. After unzipping the folder, you’ll get a folder with two files: ColorList Action.aia and ColorList.jsx.’ If you click on ther word ‘here’ it will download a zip folder. Inside this ZIP-folder there is a needed action file ‘Colorlist.aia’.