Illustrator swatches from Excel file

Community Beginner ,
Jun 25, 2021 Jun 25, 2021

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!

TOPICS
Draw and design, How to, Import and export, Scripting

Views

519

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jun 28, 2021 Jun 28, 2021
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...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

I'm looking to learn, it would be helpful for future projects too.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 25, 2021 Jun 25, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 25, 2021 Jun 25, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 26, 2021 Jun 26, 2021

Copy link to clipboard

Copied

You can do it without scripting. (Although, by all means, do try the scripting route! 🙂  )

  1. Create a PDF document where you try to get all pages on one page. (From the browser on Mac, I can 'print' to PDF. ) I choose to have 16 pages per page, so all the pages fit in one page of the PDF. It can be done on Windows too, but I do not know how)
  2. Import this PDF into Illustrator.
  3. Select ALL
  4. From the Swatches panel, choose 'New Swatch Group'. -> All colors in the document are now imported as swatches.
  5. Maybe erase some swatches that are from other parts of the webpage.

mhvandervelde_2-1624692179947.png

 

mhvandervelde_0-1624692110288.png

mhvandervelde_1-1624692135258.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 26, 2021 Jun 26, 2021

Copy link to clipboard

Copied

Oh, you should turn on 'print background colors' in the print dialogue.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 27, 2021 Jun 27, 2021

Copy link to clipboard

Copied

Thank you! The problem with this method is that I need the color names to correspond to each color

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

Yes, I understand. Especially with such a broad palette, you need those names.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2021 Jun 28, 2021

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();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 28, 2021 Jun 28, 2021

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2021 Jun 28, 2021

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 28, 2021 Jun 28, 2021

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 28, 2021 Jun 28, 2021

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 29, 2021 Jun 29, 2021

Copy link to clipboard

Copied

LATEST

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. 😉

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines