Color perception and color-space conversion

Before analyzing the color data, we should first know that the RGB color space is not a good representation of nonlinearity of color perception. A color space that is considered perceptually most uniform is CIELab (aka Lab) color space. In this space, each color is represented by three coordinates: L (brightness), a (red-greenness), and b(yellow-blueness). L ranges from 0 to 100. A higher L value means a color is brighter. The range of a and b depends on device, but normally it’s [-128,128]. Positive values mean “warm” colors such as the more positive a (or b), the redder (or the more yellow) the color is.

Color Space

Color conversion between different spaces is easily done by using Colormath package in Python. To convert colors into Lab coordinates, I first converted the hex code to the RGB code. Then I assumed the RGB code from the website is in sRGB space (“standard” RGB). Then, I created a following function to convert an RGB code (dtype: list) to Lab coordinates (dtype: colormath).

from colormath.color_objects import LabColor, sRGBColor
from colormath.color_conversions import convert_color
def rgb2lab(inputColor):
    color_rgb = sRGBColor(inputColor[0],inputColor[1],inputColor[2],is_upscaled=True)
    # if you want to use 0,255 range, upscaled=True (default is false)
    color_lab = convert_color(color_rgb, LabColor)
    return color_lab

3D space visualization

Once I get the Lab coordinates from all colors, I made a 3D plot to visualize all colors from all themes. I used mplot3d in matplotlib package to generate the following figure.

3D visualization of the Kuler dataset pulled across all color themes

Here, you can see that users used pretty much all colors that are available in the space. But, you might wonder why the volume of these data points are limited to a part of the entire Lab space. Plus, the volume seems to have a specific shape judging from its sharp edges. Below, you can see the same figure but with a bird-eye view. Here, you don’t see L axis, but only a and b axes. As we suspected, the edges are shown clearly.

Bird-eye view of the above 3D color space. Since z axis (luminance) is omitted, we can see the hue of the colors.

To understand this, we need to know the relationship between sRGB space and Lab space. The figure below shows that sRGB space is in fact smaller than Lab space. Interestingly, our data actually seems to follow the shape of sRGB space, meaning that the color conversion between sRGB and Lab works fine (a sanity check!)


What is interesting here is that some colors are avoided by users (at least in popular themes). The edge is less clear when the colors were bright green or pink/purple.

Spatial relationship between colors

This time, we visualize a theme in the Lab space. The figure below shows the spatial relationship between colors of the three most popular themes. Now we can understand where in the Lab space each color is located. The farther away two colors, the larger perceptual difference is.

Spatial representation of the three most popular color themes in the Lab space. The numbers in each 3D plot shows Euclidean distance between neighboring colors. The numbers in the parenthesis next to the name of the theme is the number of likes. A regular triangle represents the 1st color, and the inverse triangle the 5th color. Other colors are marked as circles. As you can see, each color theme has a distinctive spatial pattern. It is almost like a map of a theme. The ultimate goal of this project is to understand this spatial pattern across different themes, especially regarding preference for certain themes.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s