-
Notifications
You must be signed in to change notification settings - Fork 9
HSL Color Wheel
Fabian Morón Zirfas edited this page Jun 13, 2025
·
2 revisions

/*
This script shows how to use a nifty js color function that I've found here:
// http://www.codingforums.com/showthread.php?t=11156
This function converts HSL to RGB values.
Why use HSL?
It is much easier to create harmonic colors.
*/
main();
function main() {
/*
This is white: R: 255 G: 255 B: 255
var hue = 0;
var saturation = 0;
var lightness = 100;
var rgb = color_hsl2rgb(hue, saturation, lightness);
alert("R: " + rgb.r + " G: "+ rgb.g + " B: " + rgb.b);
*/
var pw = 200; // For easier handling...
var ph = 200; // For easier handling...
var gutter = 23; // The margins till the page bounds:
// Create a document:
var doc = app.documents.add({
facingPages: false,
documentPreferences: {
pageWidth: pw,
pageHeight: ph,
},
});
var radius = pw / 2 - gutter; // The radius of our circle:
var page = doc.pages[0]; // Get the first page:
page.marginPreferences.properties = {
/* set some properties */ top: gutter,
left: gutter,
right: gutter,
bottom: gutter,
};
var origin = [pw / 2, ph / 2]; // The origin of the graphic line:
// Now lets loop over a circle:
for (var degrees = 0; degrees < 360; degrees++) {
/*
* Now comes some wired Math stuff
* To get this right we have to transform the degrees
* into radians. Than we can calculate the outer point with Math.sin and Math.cos.
*/
var radians_angle = ((degrees / 360) % 360) * 2 * Math.PI; // Turn the degrees into radians:
var x = origin[0] + radius * Math.cos(radians_angle); // Calc the outer x.
var y = origin[1] + radius * Math.sin(radians_angle); // Calc the outer y.
/*
* Lets create a color for every line.
* We use the degrees of the circle to get the hue of color.
* Saturation and lightness are fixed values in this example.
*/
var temp_hue = degrees; // The hue of the color.
var temp_saturation = 100; // The saturation of the color.
var temp_lightness = 70; // The lightness of the color.
/*
* The conversion function returns an object that looks like this:
* { "r": value, "g": value, "b": value }
*/
var temp_rgb = color_hsl2rgb(temp_hue, temp_saturation, temp_lightness);
var color = doc.colors.add(); // Add a color every iteration.
color.properties = {
/* Set some props... */ name: "color " + degrees,
model: ColorModel.PROCESS,
space: ColorSpace.RGB,
colorValue: [temp_rgb.r, temp_rgb.g, temp_rgb.b],
};
// colors_convertToCMYK(color); // If you use this function by Dave Saunders you get CMYK colors.
var gl = page.graphicLines.add({
/* Add a graphicLine every iteration... */ endCap: EndCap.ROUND_END_CAP,
strokeColor: color,
/* leftLineEnd : ArrowHead.CIRCLE_ARROW_HEAD, */
rightLineEnd: ArrowHead.CIRCLE_SOLID_ARROW_HEAD,
});
gl.paths[0].pathPoints[0].anchor = origin; // Set the first point of the gl.
gl.paths[0].pathPoints[1].anchor = [x, y]; // Set the second point of the gl.
} // End of loop degrees.
} // End of main function.
// DESCRIPTION: Convert RGB to rounded CMYK.
/*
©Copyright Dave Saunders.
This function converts RGB colors
to CMYK, rounding the values to the nearest whole number.
Found here: http://indesignsecrets.com/rgb-to-cmyk-0.php
*/
function colors_convertToCMYK(color) {
color.space = ColorSpace.cmyk;
var vals = color.colorValue;
for (var j = vals.length - 1; j >= 0; j--) {
vals[j] = Math.round(vals[j]);
}
color.colorValue = vals;
}
/* ------------------------------------------------------------------------------------------------ */
// Color conversion found here:
// http://www.codingforums.com/showthread.php?t=11156
// This is deep stuff...just use it!
function color_hsl2rgb(h, s, l) {
var m1, m2, hue;
var r, g, b;
s /= 100;
l /= 100;
if (s == 0) {
r = g = b = l * 255;
} else {
if (l <= 0.5) {
m2 = l * (s + 1);
} else {
m2 = l + s - l * s;
}
m1 = l * 2 - m2;
hue = h / 360;
r = color_HueToRgb(m1, m2, hue + 1 / 3);
g = color_HueToRgb(m1, m2, hue);
b = color_HueToRgb(m1, m2, hue - 1 / 3);
}
return { r: r, g: g, b: b };
}
function color_HueToRgb(m1, m2, hue) {
var v;
if (hue < 0) {
hue += 1;
} else if (hue > 1) {
hue -= 1;
}
if (6 * hue < 1) {
v = m1 + (m2 - m1) * hue * 6;
} else if (2 * hue < 1) {
v = m2;
} else if (3 * hue < 2) {
v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
} else {
v = m1;
}
return 255 * v;
}
/* ------------------------------------------------------------------------------------------------ */This wiki is mostly maintained by:
ff6347
Thanks to:
- JohnDarnell for fixing lots of typos.
- jsp for fixing lots of typos.
- ltfschoen for fixing typos.
- wridgers for adding more links.
- EugenTepin for several improvements.
- vamitul for improvements.
- abandonedbywolves for adding an example.
- Travis Weston
- Andy Dayton
Thanks to the students from my seminars for asking all those questions and making me start this wiki.
- adinaradke
- AnitaMei
- ce0311
- coerv
- felixharle
- FerdinandP
- Flave
- marche
- monkian
- natael
- OliverMatelowski
- PDXIII
- praktischend
- schlompf
- skaim
You are awesome.
- Arrays
- Classes
- Comments
- Conditionals
- Functions
- Inspect Properties
- Loops
- Objects
- Output And Interaction
- Recursive Functions
- Inspect Properties
- Variables And Operations
- Extended JavaScript Guide
- Bridge Talk
- Create And Read Files
- Executing Shell Commands
- ExtendScript Toolkit
- File
- Folder
- Includes JSX
- Object Watch
- Read CSV
- Read In JSON From File And DONT Eval
- Storing Data In A Target Engine
- Target an application
- XML
- Isolate Layers With the Shy Setting
- Layer Duration Change
- Render And System Call
- Rename Layers
- SourceText to Keyframes from Array
- SourceText
- System Call
- app
- Colorbrewer
- ColorGroups
- Colors And Swatches
- Delay And View
- Dialogs
- Documents
- Duplicate And Transform
- Event AfterSave
- Export IDML
- ExtendScript in InDesign Scripting DOM
- Fonts
- GeometricBounds and Coordinates
- Get named pageItems
- Graphic Lines
- Groups
- HSL Color Wheel
- Images
- Includes
- InsertionPoints
- Layers
- Line Feeds And Carrige Returns
- Locked PageItems
- loops vs everyItem
- Masterspreads
- Matrix
- Objectstyles
- Outlines Groups Alignment
- Pages And Margins
- Pathfinder
- Placeholder Text
- Rectangles Ovals Polygons
- RulerOrigin
- Scripting Labels
- Select words at insertionPoint
- Simple Find And Change Grep with FC Query
- Simple Find And Change Grep
- Simple Find And Change Text
- Spiro
- Styles
- Table Cells
- Text Analysis ID FC
- Text Analysis
- Text Find Locations
- Text
- Transformation Matricies
- TransparencySettings
- XML creation and import