{ The GoGoColor Design-Concept has been developed to adapt the choice of a color to human perception, and it looks good, too }
Goals
- The characteristics of human perception, hue, saturation and lightness, can be chosen directly.
- Only two points define the 3 characteristics of our perception.
- The selected color is displayed in a large area in the center and is separated from distracting color contrasts.
- The design is compact and integrates well into different applications. By taking advantage of the available screen space, a large area is available for a precise selection.
The Design Solution
Hue & Saturation
(and implicitly: Lightness)
Lightness
(and implicitly: Saturation)
How does GoGoColor-Design work?
The interaction with the inner color gradient facilitates the movement through all levels of brightness. When the color moves through the color space horizontally and reaches its surface, the color progressively moves to the top or bottom point.
GoGoColor is not based on a new perceptive color model, but the behavior of the color picker is a direct reaction to user input. Recommended as a reference color system is the device independent and visually equidistant CIE LAB color space.
Popular color pickers
- Even programs such as Adobe Photoshop and Adobe Illustrator do not have a color picker (RGB, CMYK, LAB, HSB) that allows the user to explicitly select the lightness of a color. The cumbersome and imprecise workaround is to gradually approximate the color shade.
- Not very intuitive are color pickers which force the user to first choose an extremely saturated color shade before allowing to select the desired color. Just try to find your own skin tone here.
- The hslpicker.com allows to select hue, saturation and lightness, but the color information displayed on the hue and saturation scales is meaningless for bright and dark colors as well as for colors with a low saturation.
- What popular color picker dialogs have in common is the small area displaying the selected color. Our visual perception of color is surface based and takes the surrounding area of the field of view into account.
- The ratio of the area used for the color selection to unused or redundant color information is consistently low.
- Most color picker designs look particularly ugly. Especially when we have to pick the right color by aesthetic considerations attention should be paid to good design.
Update 2023-06-24: In the meantime, the OKLCH CSS standard has been developed with great possibilities and new colour selectors.
- OKLCH CSS standard: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
- Why we moved from RGB and HSL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
GoGoColor was designed 2014 by the User Experience Designer Wieland Kloimstein.