Script: Create the new RGB swatch from HEX value

Community Beginner ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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?

TOPICS
Scripting

Views

171

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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 )

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 ,
Mar 15, 2022 Mar 15, 2022

Copy link to clipboard

Copied

LATEST

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:

NewHexSwatch-Menu-SwatchesPanel-INDD-2022.png

 

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

NewHexSwatch-ScriptInterface-INDD-2022.png

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:

NewHexSwatch-AddANewConvertedSwatch-Step-1-INDD-2022.png

 

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

NewHexSwatch-AddANewConvertedSwatch-Step-2-INDD-2022.png

 

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 )

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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
}

 

 

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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.

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 ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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

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 ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

That's interesting now. @rob 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

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 ,
Mar 11, 2022 Mar 11, 2022

Copy link to clipboard

Copied

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
}

 

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 ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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.

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