Palette Node
NOTE: SEE BELOW FOR AN UPDATED VERSION
Attached is another new color node: palette. Palette makes it easier to deal with palettes imported from other tools. You can also use it to expand and tune an imported palette.
Palette can import external palettes as either a color string or as a list of colors.
Most external palette tools allow you to export or copy palettes in the form of a comma-separated string of hex codes. The palette node will accept many different formats of such a string, as long as the colors are represented as hex codes (not RGB triplets). It will automatically remove any brackets, braces, parentheses, or quotes, will accept commas or spaces or semicolons as delimiters, and will supply pound signs at the front and ff alpha codes at the back if not already present. I have tested it with many different formats; if you find one my palette node doesn't accept, please let me know.
The color string input makes it easy to paste and go. But in some cases, if you are importing colors from a CSV file or using the output of some other node (like my colors node), it may be more convenient to use a list instead of a single string. So as an alternative, you can feed a list of colors into the palette nodes color list port. If it sees any colors in this list, it will use those instead of the color string.
In addition to either a color string or a color list, palette takes five other parameters:
- Number of colors. The number of colors you want in your palette or spectrum. If this number is the same as the number of colors in the incoming string or list, palette will simply output those same colors, since no interpolation is needed. You must have at least two colors; a setting of 2 will output the start and end of the incoming colors.
- Color space. The color space used to perform interpolations. There are currently three choices:
- RGB - Use Red, Green, and Blue values
- HSL - Use Hue, Saturation, and Lightness (Brightness) values with hues forming a cylinder instead of a cube. UPDATE, now called HSB. See note later in this thread.
- OKLAB - Use a perceptual space described here: https://bottosson.github.io/posts/oklab/
- Soften - Create smoother transitions between colors. The default value of 0 uses linear line segments to interpolate colors. Increasing this value uses a curve instead; the higher the Soften value, the curvier the curve. Values between 20 and 40 often produce good effects; higher values or negative numbers may introduce ripples or have other unpredictable effects. This adjustment is similar the the "bezier" setting in other palette tools.
- Intensity. Heighten or flatten the color values produced. The default setting is 100. Increasing this value with make the colors more intense. In the cubical RGB and OKLAB spaces this will make the colors lighter until all colors turn white; in the cylindrical HSL space the colors will become more saturated. Lowering the intensity in all spaces will make the colors darker and muddier; reducing intensity to 0, the minimum value, will turn all colors black.
- Correct lightness. Checking this box will try to compensate for the way the human perceptual system responds to light; it is similar to the "Gamma Correction" found in other tools. The default setting is ON. For more information about the formula I used here, see https://bottosson.github.io/posts/colorwrong/#what-can-we-do%3F
You should not be too concerned if you do not fully understand all the above settings. Just try changing the settings and see what happens to your colors. Use them to tune your palette until you get the look you want.
If you are creating hundreds of colors to create a smooth spectrum, you may want to feed the palette node directly into the fill port of a colorize node attached to a thin rectangle, then stack those rectangle to form a visible spectrum. You can then adjust the settings of the palette node to tune your spectrum. Some settings, like soften or correct lightness, may only be really noticeable when used in this way to adjust a full spectrum with hundreds of colors. (The palette node is a tad slow, so a spectrum with hundreds of colors may take a few seconds to update each time.)
The attached demo shows an example which turns a simple four-color palette into a larger palette of 15 colors. The start and end colors are the same; the intermediate values are interpolated to form smooth transitions that pass through (or very near to) the other colors in the original palette.
As you can see in the network pane, the same four-color palette string is passed to two palette nodes. The one on the left is also set to 4 colors, so just passes them through to form the four colored circles. The one on the right is set to 15 colors and uses the HSL color space to form the intermediate values for the 15 "droplets" below the circles.
Please give this node a try and report back. I always say that, but this time I really mean it. Palette is a somewhat experimental node and to be honest, I'm not entirely sure I got it right. Color theory is hard, experts disagree, and I am limited by what I can do in NodeBox without access to excellent color libraries like chroma.js. I tried my best to get the math right, but may have made some mistakes along the way.
The only way to know if I got this node right is for Nodebox users to try it and see if the tuning options are sufficient to give them the palettes and spectra they need.
Happy coloring!
John
-
palette_demo_screenshot.png
360 KB
- palette_demo.ndbx.zip 230 KB
palette_demo_screenshot.png
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 14 Dec, 2023 04:44 AM
Attached is a new demo with an update to my palette node.
This version has three improvements:
I moved the color list port up front, right after the color string port, and changed the port label to read "use color list instead". I hope this will clarify that you can use either a string or a list; if the node sees anything in the list port, it will use that instead of the string.
I added another color space, LCH. For more about the LCH, see: https://atmos.style/blog/lch-color-space
I added an override so that the "Correct Lightness" checkbox only applies to the RGB and HSL color spaces. For those two spaces you can click it on or off; you'll probably want to leave it on unless you are dealing with a source palette that has already been corrected. For the OKLAB space, lightness correction will always be on and for LCH it will always be off - regardless of how the checkbox is checked.
Thanks to Nick Rougeux for advocating for LCH. Technically, what I implemented was HCL - same thing but it was more convenient for me to process the hue before the chroma and luminance instead of after.
A CAVEAT: I had a hard time translating the complex color code for LCH into NodeBox. I think I got the math right, but I'm not 100% sure. Also, I had to do the interpolation in a very different way than it is normally done with linear algebra libraries. If my version of LCH looks wrong to you, please let me know.
The attached screenshot shows the same display as my first demo, but with the 15 color palette in the LCH space instead of HSL. If you look closely you can see the colors still follow the outline of the 4-color source, but are a tad brighter.
Remember: you don't have to understand advanced color theory to use this node. Just turn the knobs and see what palette looks best to your eyes for your project.
Comments ALWAYS welcome!
John
Support Staff 2 Posted by john on 16 Apr, 2024 04:23 AM
UPDATE
Version 3.4 adds a new color space, RYB (Red Yellow Blue).
The RYB color model is useful for subtractive blending; it provides a simple model for paint blending in which Blue plus Yellow really does equal Green.
Wikipedia article: https://en.wikipedia.org/wiki/RYB_color_model
The paper on using RYB for simplified paint blending, from which I derived the algorithm inside my palette node: http://nishitalab.org/user/UEI/publication/Sugita_IWAIT2015.pdf
To test this new color space, and compare it to the others, I developed a network, Palette Wheels, that lets you compare circular color wheels for all five spaces in the palette node.
You can give it six different color schemes - each a color triad that forms the basis for larger palettes shown in the wheels. The wheels can have any number of sides; I show 12-sided wheels in the screenshot, but you can change this to 200 or more to get continuous wheels. You can also activate the "Correct Lightness" option (which only affects RGB, HSL, and RYB).
Screenshot and NDBX file attached.
Thanks to Floris for finding the paper on the RYB color space.
Support Staff 3 Posted by john on 03 May, 2024 06:50 AM
UPDATE
I have made a minor change to the palette node. I have renamed the HCL color space option; it is now called HSB (Hue Saturation Brightness). The functionality is unchanged.
Naming in color theory is confusing. In Nodebox, the three properties referenced in the HSB node are Hue, Saturation, and Brightness. This is the control I use for this particular option, and that is what I should have called it in the first place.
But in color theory, the two standard cylinder color spaces are HSL and HSV, where L stands for Lightness and V for Value. Experts often avoid using the term "Brightness" as it is somewhat ambiguous, and B is usually used to stand for Blue.
Although these terms are often used interchangeably, lightness and value actually have different definitions, as explained here:
And I got this wrong in my original label. Nodebox's HSB is actually HSV, nor HSL. Having finally figured this out, I had to change the label. I could have renamed it HSV, but decided to name it what it actually is which, in Nodebox, is HSB.
As I said, there is no change in functionality. A rose by any other name still smells as sweet. The update will be included in the next release of my library. For any eager beavers out there, I have also included the latest version of the palette node as an attachment.