Script: Create the new RGB swatch from HEX value

[sergio-cz]

Hello,

I'm looking for InDesign script, which creates a new RGB swatch with HEX value from clipboard. So lets say I copy to clipboard the value ff0000, then run the script and it will create the new RGB swatch with values 255/0/0. Is it possible?

[Laubender]

Hi Sergio,

see into this script by Harbs from in-tools:

http://in-tools.com/article/scripts-blog/hexadecimal-swatches-in-indesign/

Regards,
Uwe Laubender

( ACP )

[Laubender]

In case someone wonders how to install Harbs' script with InDesign 2022 on Windows 10:

Do the "manual" installation by moving the Create Hex Swatch folder that comes with the downloaded zip file to:

Adobe InDesign 2022 > Scripts

The needed folder structure now is:

Adobe InDesign 2022 > Scripts > Create Hex Swatch > startup scripts > CreateHexSwatch.jsx

Restart InDesign and you will notice that there is a new menu entry at your Swatches panel "New Hex Swatch…".

Here a screenshot from my German InDesign 2022 on Windows 10:

If you activate the menu command you see this script interface:

Step 1: Enter the Hex Value.

Step 2: Use the tab key to go forward.

The interface will show you the suggested RGB values and a suggested name for the swatch:

Step 3: Press the "Add" button ("Hinzufügen" in my German GUI) to add the RGB values to a new swatch.

Note: If you have no Admin rights you should not be able to move the Create Hex Swatch folder to the Scripts folder of your InDesign application folder. In this case try to move it to the Scripts folder in your InDesign's preferences folder. In my German Windows 10 I can find this one here:

Users > Username > AppData > Roaming > Adobe > InDesign > Version 17.0 > de_DE > Scripts

The needed folder structure now is:

Users > Username > AppData > Roaming > Adobe > InDesign > Version 17.0 > de_DE > Scripts > Create Hex Swatch > startup scripts > CreateHexSwatch.jsx

Restart InDesign and the menu command "New Hex Swatch…" is available with your Swatches panel.

Regards,
Uwe Laubender

( ACP )

[Manan Joshi]

Try the following. No elaborate error handling is done. Make sure you have document open and the clipboard has a text selected which is a valid hex number with 6 digits.

app.paste()
var cVal = app.selection[0].contents
app.selection[0].remove()
if(!parseInt(cVal, 16))
	exit()

var c = [parseInt(cVal.substring(0,2), 16), parseInt(cVal.substring(2,4), 16), parseInt(cVal.substring(4,6), 16)]
app.documents[0].colors.add({space:ColorSpace.RGB, colorValue:c})

 -Manan

[rob day]

Hi @Manan Joshi , I’m getting an error with your script, I think because app.paste() doesn’t result in a selection.

This seems to work:

var cVal = getClipboard()
if(!parseInt(cVal, 16))
	exit()

var c = [parseInt(cVal.substring(0,2), 16), parseInt(cVal.substring(2,4), 16), parseInt(cVal.substring(4,6), 16)]
app.documents[0].colors.add({space:ColorSpace.RGB, colorValue:c})

function getClipboard(){
    var tf = app.activeDocument.pages[0].textFrames.add()
	tf.parentStory.texts[0].select()
	app.paste()
	var cb = tf.parentStory.contents.toString();
    tf.remove()
    return cb
}

[Manan Joshi]

Thanks for testing it @rob day. That's interesting, for me app.paste was creating a textframe with the clipboard text and also selecting it so I preferred it due to its conciseness over creating a frame and then pasting into it. Don't know why it behaves differently on your end. Anyhow, we have both the approaches posted now in addition to the Harb's version posted by Uwe. So the OP has lots of choices to pick and choose from 🙂

-Manan

[rob day]

Don't know why it behaves differently on your end

Maybe OS or clipboard prefs? On OSX when I paste text with the UI, I get a text frame with the clipboard text as the story but no selection.

[sergio-cz]

Hello Manan, thank you very much, that works and it is exactly what I was looking for! 

[Manan Joshi]

That's interesting now. rob@edidev could not get my version working and you see it working. Anyhow, for the inverse conversion issue with the code that @rob day gave, replace the following method definiton and then try

function hexToRgb(hx) {
    var r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hx);
    var a = [];
    var i = 1;
    while (i<=3) a.push(parseInt(r[i++], 16));
    return a
}

-Manan

[rob day]

Here‘s a version that creates and names the swatch with the clipboard hex value:

var d = app.activeDocument
var ns = makeSwatch(getClipboard())
ns.properties = {model:ColorModel.PROCESS, space:ColorSpace.RGB, colorValue:hexToRgb(getClipboard())}


/**
* Gets the RGB values as an array from the provided hex value 
* @ param the hex value 
* @ return array of RGB values 
*/
function hexToRgb(hx) {
    var r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hx);
    var a = [];
    var i = 3;
//EDIT
    while (i--) a.unshift(parseInt(r[i+1], 16));
    return a
}
  
/**
* Makes a new swatch
* @ param swatch name 
* @ return the new swatch 
* 
*/
function makeSwatch(n){
    var s;
    try {
        d.colors.add({name:n});
    }catch(e) {
        s = d.colors.itemByName(n);
    } 
    return d.colors.itemByName(n);
}


/**
* Gets the clipboard text contents
* @ return the clipboard‘s text as a string 
* 
*/
function getClipboard(){
    var tf = app.activeDocument.pages[0].textFrames.add()
	tf.parentStory.texts[0].select()
	app.paste()
	var cb = tf.parentStory.contents.toString();
    tf.remove()
    return cb
}

[sergio-cz]

Hello @rob day , thank you, thats a good idea. 

I tried to test it, but it seems like there is a little mistake: it translates swatch RGB values in the opposite way. So if input is ff0000, it creates color 0/0/255 instead of 255/0/0.