-
Notifications
You must be signed in to change notification settings - Fork 30
HSL Color Wheel
fabiantheblind edited this page May 4, 2016
·
4 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 maintained by:
fabiantheblind
Thanks to:
- JohnDarnell for fixing lots of typos.
- jsp for fixing lots of typos.
- ltfschoen for fixing typos.
- wridgers for adding more links.
Thanks to the students from the seminar 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
- ExtendScript Toolkit
- File
- Folder
- Includes JSX
- Object Watch
- Read In JSON From File And DONT Eval
- Storing Data In A Target Engine
- Target an application
- XML
- app
- Colorbrewer
- 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
- Masterspreads
- Matrix
- Objectstyles
- Outlines Groups Alignment
- Pages And Margins
- Pathfinder
- Placeholder Text
- Rectangles Ovals Polygons
- RulerOrigin
- Select words at insertionPoint
- Simple Find And Change Grep with FC Query
- Simple Find And Change Grep
- Simple Find And Change Text
- Spiro
- Styles
- Text Analysis ID FC
- Text Analysis
- Text Find Locations
- Text
- Transformation Matricies
- TransparencySettings
- XML creation and import