kbladin/kallewheel

A custom color wheel extension for Adobe Photoshop

KalleWheel

A custom color wheel extension for Adobe Photoshop.

KalleWheel is an extension made to make it easier for digital painters to choose colors in Photoshop.

Installation

From Adobe addons page

Download and install the extension on the Adobe Add-ons page: https://creative.adobe.com/addons/products/12907#.WI59cLFiRE4

Manual installation

This installation method is for testers and developers mainly. Information taken from ZXP installer page: https://aescripts.com/knowledgebase/index/view/faq/zxp-installer-faq/

Download extension

Download the .zxp file from the addon page, or from the release page on github, then follow the OS specific steps. To install a specific version from github, e.g. for beta testing, clone the repository and copy the com.kalle.KalleWheel folder. This folder should be placed in the extensions folder specified below for the given OS.

Manual installation on Mac OS

• Rename the .zxp file to .zip.
• Unzip the zip file. Some people report that they must use Stuffit Expander to unzip it as the OS X utility does not work for them. If the extension was downloaded from github, the corresponding folder is the com.kalle.KalleWheel folder.
• In Finder Menu choose go->go to folder and enter the following folder name: ~/Library/Application Support/Adobe/CEP/extensions
• Move the folder from the previous step into this folder.
• Open a terminal window and execute the following command: defaults write com.adobe.CSXS.4 PlayerDebugMode 1 (This will tell Adobe programs to also run extensions that are installed in this manual way). Note, the 4 in com.adobe.CSXS.4 corresponds to the CSXS version of the program. For different versions of the software, a different number is needed. For reference to the latest version to update, all com.adobe.CSXS plist files can be found under ~/Library/Preferences/
• After the plist file has been updated, read the file by, in the teminal, running defaults read com.adobe.CSXS.4 or equivalent
• Then restart Photoshop. The extension should be found under Windwow -> Extensions

Manual installation on Windows

• Rename the .zxp file to .zip
• Unzip the zip file
• Drag that unzipped folder into the folder C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
• Create a registry entry "PlayerDebugMode" with String value 1 in HKEY_CURRENT_USER/Software/Adobe/CSXS.5 (To create and modify registry entries you can search for the program "regedit" in the windows menu)
• Then restart Photoshop. The extension should be found under Windwow -> Extensions

Features

HCL color space

A color choosen in KalleWheel is defined by the three components Hue (set by the angle from the center of the wheel), Chroma (similar to saturation, determined by the distance from the center of the wheel), and Lightness (set by the slider).

The HCL color space is directly derived from the CIELab color space which is made to reduce the interference our human perception have with the colors percieved. Comparing to the most common color space used by digital artists (HSB: Hue, Saturation, Brightness) a certain lightness will be percieved equally light independent on the other two light components. An example of this is when comparing a yellow color to a blue color. Even though the brightness (in HSB color space) is equal, the yellow color will seem brighter due to the pixel intensities of a screen as well as the way we percieve the colors. In the CIELab color space however, a yellow color with a certain lightness will seem roughly as light as a blue color with the same lightness.

Photoshop actually uses the CIELab colorspace when converting to grayscale, which also has to do with why the grayscale image to the right seems to have more diverse lightness between colors. But looking only at the color versions of the images above it is quite clear that the HCL color space better preserves the lightness of the colors.

Many colors in the same picker wheel

Photoshop's default color picker does not allow the user to have many colors on the same picker and only change one of them at the time. The default picker only changes the active color which can be the background color or the foreground color of Photoshop.

There is a standard extension that comes with Photoshop called Adobe Color-themes (formerly Kuler) which KalleWheel is roughly based on. Adobe color themes lets you define up to five dependent or independent colors. Adobe Color-themes, however, is not made for picking colors for painting but rather to create color themes for graphical applications or similar. I stripped away the things that I did not need from Adome Color-themes and added the things that were more important, for example more color swatches. Currently you can define twelve colors on the wheel at the same time. So far I have never needed this many colors but it is nice to have in case.

Light source direction indicators

The greatest advantage of having the Hue and Chroma light components on a 2D surface where Hue is directly dependent on the angle and Chroma goes from low in the center of the circle to high for bigger distances; is the possibility to take advantage of the fact that Hue and Chroma are not independent when it comes to the colors of illuminated real world objects. Using the standard Photoshop color picker with Saturation and Brightness orthogonal on a plane and Hue on a slider it is so much harder to transition for example from a pink to a green color by shifting two independent sliders (green and pink are opposite each other on the color wheel). Using the type of color wheel as KalleWheel or Adobe Color-themes are using, this is a much easier task. Just drag the color glyph from the pink towards the green on the circle; no need to handle two independent controllers.

This was actually the reason I started to paint using the Adobe Color-themes extension and eventually decided to build my own extension.

What is possible in KalleWheel that I have not seen in any other color picker is to define light source colors and then see how different colors are affected (shifted) by these light sources. This is done by displaying lines which are directed in the direction of the light source (Some theory on this topic can be found here, this is written before i made KalleWheel). This idea is made to be used as a guideline but actually helps when picking colors for illuminated objects when painting digitally.

Other features

• HCL / CIELab color space (mentioned above).
• More color swatches (mentioned above).
• Hide or display direction indicators for colors changed due to colored light sources (mentioned above).
• Only features that are necessary for painting and no extra things that take up space.
• Easier to control Lightness. By having one single slider for Lightness and the possibility to see the Lightness-value and change it by clicks the user hopefully gets more control over it. This is important since Lightness is generally the most important of the three color components when it comes to painting to create the illusion of a 3D scene.
• Bigger space for the actual color wheel for higher precision
• Possibility to lock and / or hide colors. Locking colors is useful if they are light source colors which are usually constant in a scene.
• Less lag (compared to Adobe Color-themes) when moving colors around the color wheel surface.
• Changing the Lightness of a color will redraw the entire color wheel with the same lightness. This makes it easier to see what color to change to when shifting the Hue / Chroma.
• Possibile to resize the extension window.
• Swatches are saved and reimported for reuse
• Four vertex gamut mask that can be edited and reimported when restarting the application.

Detailed usage of settings

KalleWheel will save settings in Photoshop's settings folder (on Mac os: /Users/<user>/Library/Preferences/Adobe Photoshop <version> Settings). These can be exported or imported externally. The settings files are:

• KalleWheelSwatches.aco - Swatches imported at initialization and exported when changing colors.
• KalleWheelGamutMask.json - Gamut mask imported at initialization and exported when gamut mask is updated.

Current limitations

• Photoshop's internal colors are saved in the RGB format. This sometimes leads to problems due to some color ambiguity that is appearent between RGB and CIELab. RGB is a subset of CIELab so all colors selected in KalleWheel will not be defined in RGB, therefore the "closest" CIELab color will be choosen when sampling an RGB color. This happens with very high Chroma colors.

• I have only been able to test this extension on one computer with one OS in Photoshop CC. I would like to see how it works on other operating systems and other versions of Photoshop but so far it has not been possible to do this.

For suggestions or questions, send me an email or post an issue

External Libraries

External libraries used in this project are:

• the javascript library Chroma
• XTools scripting library for Photoshop
• Json-js JSON Library
• Tippy.js Javascript tooltip library
• Icons made by Freepik from www.flaticon.com

kallewheel's Issues

Swhatch reset option in menu

With swatches being saved on closing photoshop, I feel there is a need to have an option to reset swatches back to defaults (only one swatch, grey), so that there is no need to manually click each swatch and hide it. And hidden swatches still remain in the panel, which might not be relevant to the new project.

It could be in this menu, to reduce UI clutter

Old version on Adobe Marketplace?

Hi.
I installed the extension using the Adobe's Marketplace but when I opened my PS the tool haven't the same options than image on description:

My PS:

Img on description:

I'm using PS 2020 on Mac. Is it a problem or on mac does not have thats option?

50% thicker lightness strip

Making it a bit thicker would help with missclicks - it's just a very minor thing. usabilitiy is already very good.

Any update on the wheel?

This is probably the best color wheel there is, is there any chance sliders will be fixed?

Keyboard shortcuts

More accurate way for slight adjustment on Hue/Saturation

This is an amazing extension that helped me a lot, thank you!
It brings some advantages to put the Hue and Saturation together on a 2D wheel surface, but the traditional way that uses individual sliders is also essential when I want to adjust the Saturation or Hue slightly. It is inconvenient to do adjustment on the current wheel.
Is it possible to add 'Saturation' and 'Hue' slider ?
Another potential way is adding a "Zoom IN/OUT" feature to the wheel.
Thank you.

Square for background color is not transparent

Square for background color is not transparent when picking color from the wheel. Makes it harder to judge which color i'm picking if it near the background color.

Just to add, I love your attention to detail to make all secondary markings transparent when picking colors, great job there

Not transparent on square

Transparent on X

Pen para values are reset after changing color through this wheel

I'm using Pen Tilt and Pressure on my brush, and I found every time I changed color through this wheel, the tilt and pressure would be reset to a default value. This makes me have to undo the every first stroke after changing color because the paras are at wrong value, which disturbs the painting a lot.

Can't install

Can't install withing both AdobeExchange and ZXPInstaller.
With AdobeExchange it just don't appear in Photoshop.
When try ZXPInstaller have an error "Installation failed because it the ZXPInstaller could not check the license online."

Adobe Photoshop Version: 20.0.4

missing buttons?

Hi,
I just wanna know if this is a problem with installation that people have run into~ (i cant really do the alternative installation method)

not sure how to toggle on the other buttons, so far it's just a color wheel?

windows 10 intalled through creative cloud, appeared the same way in both version of my photoshop
Adobe Photoshop Version: 21.2.4
Adobe Photoshop Version: 20.0.10

thanks!

Ability to save color swatches

Closing the app and opening it again looses information about previously selected colors. Need the ability to keep the state and possibly even save and load swatches.

May be possible to load standard photoshop swatches. Other solution is to define a new file format for swatches. Problems in saving files with javascript?

Blending strip is amazing

There is no bugs here as far as i could tell, blending strip and all the functionality related to it is amazing, and probably the best implementation of it i've seen.

I love how the foreground color is not automatically changed when using the blending strip, and it's a great idea to have the ability to visaully see the effects of the strip on the wheel when moving the dot on the blending strip.
And it makes blending with different colors much easier than other implementations I tried

Really amazing thing you did here.

Swatches and gamut mask save on close

It works only if the panel is minimized before closing photoshop, otherwise everything is reset back to default.

Another interesting functionality which i don't know if it's possible and might be marginally useful even if it is is to have colors and gamut masks be file specific. What i mean by that is that when i open a painting i have my colors and a gamut mask i used on that painting automatically loaded on the wheel, so that when switching projects there is no need to manually edit the masks and colors.

It would make it easier to work with multiple projects at the same time, and have the wheel load file specific colors and masks automatically.

UI Improvements

Mainly asking what the right arrow/chevron button does. There are no text descriptions in the extension. Might be a bug; i'm running CC18 on macOS High Sierra.

Another thing, rather a suggestion is that the palette feature be removed, and sampling from PS colors be automatic. Sampling from KalleWheel should still be manual. And for saving colors the native palette panel is sufficient.

I could write it in if I got some guidance, as I've never made a CC extension, though it seems to be web tech which I know.

Thanks for the ext! Only magic picker competes though it's $20.

Make X togglable

X in the middle can be togglable as it sometimes can be distracting

Checkbox to affect solid color layers

Another very minor thing, it would be nice if solid color layers and text could be modified directly from your wheel, a checkbox to make that option toggable could fit nicely in this menu

Blender between foreground and background

Additional blender between foreground and background colors

Integrate background color

Error message pops up when opening photoshop

happens only when the wheel panel is open, if its collapesd to icon there is no message.

Wheel stops updating colors when picking colors from canvas

I'm unable to reproduce the bug consistently, so I'm not 100% sure what causes it, but i think it happens after i work in some other plugins to adjust the colors and go back to the wheel. collapsing to icon and maximizing it again fixes everything

Error popups

I don't know what is this connected with, but now i get 2 error popupos when opening photoshop if the wheel is maximized, and one more after i close the last. If I open the wheel after photoshop is opened there are no popups.

Gamut masks

Sliders aren't dragable

I am unable to click and drag sliders, I can only click on the location on the sliders to make the change.
When i try to click and drag, sliders move a bit but stop quickly. After i remove the pen from the tablet the slider is still sometimes stuck to it and starts skipping around. I need to click somwhere else to unstuck them.

This issue appeared only after i started using windows ink, since it fixed the no pressure on first stroke bug. and i have tested it without windwos ink and i can drag sliders normally. Also i tested it with windows ink on other slider plugins, and there are no issues there - coolorus, cameleon pallette, default photoshop lab sliders can all be clicked and dragged normally.

Foreground background color switching lag

Sometimes when switching foreground and background color using keyboard shortcut from photoshop wheel stops switching the colors. It seems to happen more when i rapidly switch between them. After it happens I'm unable to switch between fg and bg colors using shortcuts, no matter how slowly or quickly i try to do it.

Picking a color manually from the wheel, or minimizing and maximizing it again fixes it

A bit unrelated, but I love the addition of a button to get white and black as colors on above FG BG colors, works great and makes it easier to pick those, since 0 ligthness isn't always pure rgb black,a and same with white

Loss of brush control after selecting color on the wheel

after i pick a color from the wheel, first brushstroke losses opacity and tilt control, it acts as if i did that brushstroke with mouse instead of tablet. It happens only on the first stroke, second one is fine. Here is an example, i used the same brush and same pressure and pen tilt for both first and second strokes.

Compare new/old colors

Similiar functionality exists in coolorus, and it might be usefull here. Basically additional checkbox in flyout menu to add the ability to easily see how the new color compares to the old one when picking colors on the wheel or adjusting lightness

Can't adjust light source

CC 2019

UI design

Overall i really like the ui, it feels clean and minimal and usefull.
I'm no designer, but i do have a few suggestion, maybe you will like them. They are mostly visual, to make UI look more unified.

Main idea is to unify all the buttons to the simple round style you have on the bottom - especially gamut buttons since they look very noisy now. I would use the white border for selected items only such as you are using now, and same 50% gray for backgrounds throughout the UI.

Also I would remove white border around foreground background color to have larger color area and make it look cleaner. If you like the border maybe a 50% gray would be better to help judge the colors and be consistent throughout the UI

I scaled up the wheel so that it's borderless, but it can be with the border too, it looks good either way, but like this there is gain in usefull space . I would make the border same 50% gray used for the buttons

I would still personally remove lightness arrows and text, but it might be usefull to someone else, so it's here, with updated buttons. I made text box gray and black, but if it isn't legible, black box and white text like it was also works

I also added a bit more spacing betweent the wheel, textbox and lightness strip, to make spacing throuhgout the ui a bit more consistant

I would move about button to this menu, to reduce UI clutter