All Projects → kbladin → Kallewheel

kbladin / Kallewheel

Licence: other
A custom color wheel extension for Adobe Photoshop

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Kallewheel

Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (+1593.75%)
Mutual labels:  color, color-picker, color-palette, colorpicker
Pickr
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
Stars: ✭ 3,759 (+23393.75%)
Mutual labels:  color, color-picker, color-palette, colorpicker
Egorozh.ColorPicker
🎨🎨🎨 Best of the best ColorPicker on WPF and AvaloniaUI
Stars: ✭ 39 (+143.75%)
Mutual labels:  color-picker, color-palette, colorpicker
react-native-color-panel
React Native Color Panel Component for iOS and Android 🏳️‍🌈
Stars: ✭ 21 (+31.25%)
Mutual labels:  color, color-picker, color-palette
pantone-colors
Hex values of all 2310 Pantone colors
Stars: ✭ 147 (+818.75%)
Mutual labels:  color, color-picker, color-palette
Androidphotoshopcolorpicker
A fully featured Color picker Library for Android
Stars: ✭ 220 (+1275%)
Mutual labels:  photoshop, color, color-picker
react-native-image-color-picker
Image color picker based on image source provided and return image different color palettes or average color palette
Stars: ✭ 25 (+56.25%)
Mutual labels:  color, color-picker, color-palette
ColorPicker
Powerful screen ColorPicker/Chooser application for Linux Desktop
Stars: ✭ 55 (+243.75%)
Mutual labels:  color-picker, color-palette, colorpicker
Colors App
🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Stars: ✭ 90 (+462.5%)
Mutual labels:  color, color-picker, color-palette
Chromacolorpicker
🎨 An intuitive iOS color picker built in Swift.
Stars: ✭ 434 (+2612.5%)
Mutual labels:  color, color-picker, color-palette
ColorPickView
🐾一个自定义的颜色选择view
Stars: ✭ 19 (+18.75%)
Mutual labels:  color, color-picker, colorpicker
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) 🎨
Stars: ✭ 467 (+2818.75%)
Mutual labels:  color, color-picker, colorpicker
React Colorpickr
A themeable colorpicker with HSL and RGB support for React
Stars: ✭ 180 (+1025%)
Mutual labels:  color, color-picker, colorpicker
Colorbook
🎨 Color schemes for UI design - Optimized for foreground, background, border, etc. https://liyasthomas.github.io/colorbook
Stars: ✭ 148 (+825%)
Mutual labels:  color, color-picker, color-palette
Bootstrap Colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Stars: ✭ 1,351 (+8343.75%)
Mutual labels:  color, color-picker, colorpicker
SwiftColorWheel
Delightful color picker wheel for iOS in Swift.
Stars: ✭ 37 (+131.25%)
Mutual labels:  color, color-picker, color-palette
Leonardo
Generate colors based on a desired contrast ratio
Stars: ✭ 973 (+5981.25%)
Mutual labels:  color, color-picker, color-palette
global-color-picker
start the script and click anywhere to get rgb value at the cursor location
Stars: ✭ 31 (+93.75%)
Mutual labels:  color, color-picker, colorpicker
javascript-color-gradient
Lightweight JavaScript library, used to generate an array of color gradients, between start and finish colors.
Stars: ✭ 54 (+237.5%)
Mutual labels:  color, color-picker, color-palette
Colorpicker
A mininal but complete colorpicker desktop app
Stars: ✭ 766 (+4687.5%)
Mutual labels:  color, color-picker, colorpicker

KalleWheel

A custom color wheel extension for Adobe Photoshop.

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

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

Icons made by Freepik from www.flaticon.com

Features

HCL color space

A color choosen 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 (almost) 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 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.

The use of the HCL color space is due to the javascript library Chroma by Gregor Aisch.

Many colors in the same picker wheel

Photoshops 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 dot" 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). The tool is just made to be used as a guideline but actually helps when picking colors for illuminated objects when painting digitally.

Other "improvements" compared to Adobe Color-themes

Here I list some more differences between KalleWheel and Adobe Color-themes, considering KalleWheel is more directly made as a painting tool and not a color theme creator.

  • 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).
  • Removed unnecesary things. There is no need to know the color codes for painting. No need for extra sliders that only 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 (at least on my computer) 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.
  • Possibility to resize the extension window.

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. Some different CIELab color coordinates yealds the same RGB color coordinates (this happens mostly with high Chroma colors since the RGB color space is just a sub space of the CIELab space).

  • I have only been able to test this extension on one computer with one OS in Photoshop CC14 and CC15. 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. Hopefully it will be available on Adobes Add on page for anyone to download nad install.

Things I would like to add

  • Possibility to save and load "scenes" with defined colors
  • Maybe a clearer User Inteface design
  • Suggestions?
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].