Copy link to clipboard
Copied
Hello everybody!
I have this table : http://my.crazyartzone.com/dmc.asp that I can reduce to keep only the color names and the Hex values on an excel file and I would like to know if it is possible to take that data and get swatches from it instead of making each color one by one.
I know zero things about scripting and the only threads I found are from few years ago and involve the RGB values (which in this case would be almost the same like adding colors one by one)
Thank you in advance for your help!
Ok check this out. Let me know if you find this helpful, or if you have any questions or if none of this makes any sense at all.
function swatchesFromCsvWithHex()
{
//If you read this from top to bottom, it should hopefully explain everything as it happens
//this is intended more as a presentation and an educational tool than a comprehensive
//tool for performing this task quickly and efficiently.
//example CSV file
// swatch name,hex value
// mySwatch1,#123456
// mySwatch2,#987654
...
Copy link to clipboard
Copied
Are you looking for help learning how to write something like this? Or are you looking for someone to write this?
Copy link to clipboard
Copied
I'm looking to learn, it would be helpful for future projects too.
Copy link to clipboard
Copied
fantastic! I don't know how to handle hex colors at this moment either, but ultimately it's all just math and we have the whole internet at our fingertips. we can work through it together. I'll take a look tonight or tomorrow at how we can get started. We could post the whole learning experience here on this thread for posterity.
Copy link to clipboard
Copied
That would be great! Thank you so much for the help.
I just noticed that the link I left here has the RGB values too ( I mixed it with another site that I was checking earlier) and could make the csv file with the vlues and names but it's quite often that I have to deal with hexa values too
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thank you! your first link did the trick!
However I still want to learn how to do them, seems that will be a great practice
Copy link to clipboard
Copied
You can do it without scripting. (Although, by all means, do try the scripting route! 🙂 )
Copy link to clipboard
Copied
Oh, you should turn on 'print background colors' in the print dialogue.
Copy link to clipboard
Copied
Thank you! The problem with this method is that I need the color names to correspond to each color
Copy link to clipboard
Copied
Yes, I understand. Especially with such a broad palette, you need those names.
Copy link to clipboard
Copied
Ok check this out. Let me know if you find this helpful, or if you have any questions or if none of this makes any sense at all.
function swatchesFromCsvWithHex()
{
//If you read this from top to bottom, it should hopefully explain everything as it happens
//this is intended more as a presentation and an educational tool than a comprehensive
//tool for performing this task quickly and efficiently.
//example CSV file
// swatch name,hex value
// mySwatch1,#123456
// mySwatch2,#987654
//get the data file
//you could hard code a path to the file like this
// var myCsvFile = File("~/Desktop/temp/hex_to_rgb/test.csv");
//or use a dialog so the user can select a file
var myCsvFile = File.openDialog("Select a CSV File");
//check to see if no file was selected
if(!myCsvFile)
{
//the user cancelled the dialog.
//exit the script
return;
}
//open and read the contents of the data file
//save the contents into the variable colorData
myCsvFile.open("r");
var colorData = myCsvFile.read();
myCsvFile.close();
//now, use javascript's String.split() method to convert
//"colorData" from a regular string into an array of lines
//we want split to look for any "\n" or newline characters
//as that will indicate when we've reached the next color/row
var lines = colorData.split("\n");
//at this point lines will look something like this:
// [
// "swatch name,hex value",
// "mySwatch1,#123456",
// "mySwatch2,#987654"
// ]
//so now we want to loop the lines array and create
//a new swatch for each line.
//we will initialize c to 1 so that we don't create
//a swatch for the title row
for(var c=1;c<lines.length;c++)
{
//wait what's going on down here?! what is "createNewSwatch(lines[c])"???
//keep reading. we're going to define this function below
//for now, see that we're passing in the current line
//to the createNewSwatch function. inside that function,
//we'll parse the data to make the swatch
createNewSwatch(lines[c]);
}
//this function will create a new swatch
//with the name and color value dictated by
//the argument "data"
function createNewSwatch(data)
{
//split data by comma to get an array that holds
//the name and color value, like this:
// ["mySwatch1","#123456"]
data = data.split(",");
//set the swatch name to a variable
var swatchName = data[0];
//set the swatch hex value to a variable
var hexValue = data[1];
//ok we're making great progress here. Now we need to
//convert our hex value to RGB so that we can create our swatch
//since illustrator doesn't support hex swatches.
//lets convert our hexValue to RGB
var rgbValue = hexToRgb(hexValue);
//now we have an rgb value like this:
//rgbValue = {r:50,g:100,b:255}
//so we can use this nice little object to create our new swatch.
var newSwatch = app.activeDocument.swatches.add();
newSwatch.name = swatchName; //set the name of the swatch
//now let's create a new rgb color so we can assign it to newSwatch
var newColor = new RGBColor();
//now we can set the rgb values of newColor
//with our rgbValue object like this:
newColor.r = rgbValue.r;
newColor.g = rgbValue.g;
newColor.b = rgbValue.b;
//now assign newColor as the color for newSwatch
newSwatch.color = newColor;
//and that's it. we're done creating this swatch. on to the next one
}
//i stole this function from here:
//https://www.w3docs.com/snippets/javascript/how-to-convert-rgb-to-hex-and-vice-versa.html
function hexToRgb(hex) {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
}
swatchesFromCsvWithHex();
Copy link to clipboard
Copied
Thank you so much!
I have some experience with js but didn't know the right way to apply it for illustrator. Please correct me if I am wrong, basically you get the csv file (and do a check to see if a file was called) then split the contents to use them to fill an array that contains all of them, then pick the first position of the array and use it as a name and and for the next position of the array you called a function to turn the hexa values to rgb ones and use those to fill the array right?
Copy link to clipboard
Copied
Yup. The check after getting the csv file is just to see if the user canceled the file select dialog. If the user cancels the dialog the result will be undefined which makes that condition true and triggers the the script to exit.
So you might be able to imagine how this could be expanded a bit to accommodate more than just hex. You could create rgb, cmyk, spot, or gradient colors using the same techniques here.
Copy link to clipboard
Copied
Thank you so much!
I'll give it a try adding a check for Hexa, RGB and CMYK colors before the process start and then to apply the proper algorithm to take the values and create the swatches.
Copy link to clipboard
Copied
Great, very educational script and clean script, thank you so much!
I would have 1 question and 1 comment 🙂
Comment: how to turn an HTML table into a CSV file?
I must say that I find this problem not so trivial, but appearently you ( @Galphath ) have a solution for it. What works for me quite efficiently is select and copy all the cells of the table and pasting them in a new Google Sheets document. (Not Excel, not Pages either) This works like a charm, Google Sheets will just paste it cell-by-cell into a spreadsheet, from which we can easely save as CSV.
Or, we could use a tool like https://www.convertcsv.com/html-table-to-csv.htm (I did not try)
Question: if we have the table, why not use the R, G & B values from it?
Colors are defined by their RGB values, and we have them in the DMC table in the link. Why use the HEX-color through a conversion function and not the RGB-values?
(Both are honest questions, not rhetorical ones)
Copy link to clipboard
Copied
I'm not sure the best way to convert the html to csv. I've focused more on how to handle a csv after it's been created. I rarely have a need to generate my own data.
If it works to copy/paste the table into google sheets, then that would be my vote for easiest. Because once you have it in sheets, you have all the necessary tools to edit and reformat the data however you want. So that's exciting if it's as easy as copying and pasting.
To your question.. OP originally posted asking for help on converting a table of hex values to swatches in illustrator. They realized that the table they posted included the necessary rgb info, but they said they occasionally have data that is only hex. So it's good to cover one's bases and plan for many different eventualities. As i said, this was more of an educational presentation for a specific task (to someone who said they were inexperienced with scripting).
Basically I wanted to explore how to use hex values to create swatches in illustrator since i've never done that before, and now that I have, I've learned a little bit more and I've become just a little bit more valuable.
I'm rambling at this point so feel free to check out.. haha.
Sometimes my wife will ask what i'm working on when i have my computer out. And often times i'll just reply "just playing". And I don't mean playing games. I truly enjoy just sitting down and testing out different algorithms or exploring new topics. Even if i never end up using many of those tests, each time you go through the process of coding up a solution, you're practicing a ton of really important things which will ultimately make you a better programmer, and a better problem solver in general. Athletes practice daily to get better at what they do. Programmers who do the same will stand out. And I'm looking to stand out. 😉
Copy link to clipboard
Copied
Copy link to clipboard
Copied
I fixed bugs in William's script and combined the automatic detection of rgb, cmyk and hex columns into one script. https://gist.github.com/creold/a605cd81a89e9884c384df1683c20654.
Direct download link (zip archive)
Copy link to clipboard
Copied
Adobe should turn the ideas in this thread into a new menu: File > Import file to swatches.