Parametric Curves in Color Space

Year: 2023 Authors: Jose Ezequiel Soto Sánchez

Core claim

Parametric curves with adjustable hyper-parameters can provide an interactive, mathematically grounded way to explore color space and create appealing palettes.

Topics

color gradients, parametric curves, palette design, HSL color model

Domains

parametric geometry, space curves, cylindrical coordinates, sampling, color design, digital art, graphic design, data visualization

Methods

web-based discovery tool, hyper-parameter tuning, interval clipping, palette sampling

Media

HSL color solid, RGB mapping, user interface, gradient stripes

Paper text

The text below is the locally extracted OCR/Markdown version of the paper. Raw PDF files remain local and are not published here.

Bridges 2023 Conference Proceedings

Parametric Curves in Color Space

Jose Ezequiel Soto Sánchez

Mathematics Department, Instituto Tecnológico Autónomo de México (ITAM); ezequiel.soto@itam.mx

Abstract

This paper proposes a discovery tool for color gradients and palettes based on a mathematical framework. A family of parametric curves in space is proposed for the composition of color gradients and palettes. Hyper-parameters for the periodicity, amplitude and shape of the 3D parametric curves are considered and given to the user for experimentation and discovery. The user can define the trajectories through the HSL color solid to discover appealing gradients, select an interval of interest and sample it to produce a palette.

Color: A Relevant Matter

Color is a very relevant matter in human culture. Think about the many examples of color-coded information that surround us: traffic lights, warning signs, street crossings, battery indicators, etc., let alone the colorful display of internet and media content in the multiple electronic devices we use on a daily basis. Many other living organisms in nature take advantage of color information: flowers, fungi, insects and birds, among many others, use colors to survive and thrive.

Nowadays we are used to seeing colorful displays in stores and public spaces. However, pigments and colorful goods were synonyms of wealth and power in the antiquity. The presence of color in cave paintings; the colored frescoes in Egyptian, Roman and Mayan temples; the diversity of colored mosaics in Islamic Art; the colorful contemporary political propaganda; all tell us about the importance of color in the creation and maintenance of social and religious narratives throughout history.

Art historians study the techniques of pigment creation and the choices of colors of artists throughout history. Art and Design disciplines devote themselves to the study of color palette design, and they use it in the design of clothes and products as well as in photography and cinema. Psychological influence of color has an important impact of every communication; it remains a very active scientific research field.

While there are many tools for color selection, existing palettes and design software, it is still a challenge to select a proper color palette for a website or publication when we are not design professionals. It is even a greater challenge when a large number of colors is required for mathematics and data visualization applications.

Figure 1: Example of a color gradient obtained from a parametric curve in color space.

As a mathematician involved in art and design applications of mathematics, I found myself in need of large color palettes for combinatorial applications. This motivated an effort to understand digital color space. For this, I have created a mathematical tool for the design of color gradients and palettes. The discovery tool [2] is a web-based application that allows the users to explore color space through parametric curves, discover gradients and create their own color palettes. This paper explains the mathematical framework of such color discovery tool. Figure 1 shows an example of what the tool can produce. This is an invitation to explore color space through the use of parametric curves in space. I hope you enjoy it.

Soto Sánchez

Color Spaces

Color is a perceptual phenomenon. Cones, specialized cells in our retina, translate certain light wavelengths into stimuli in our brain, which in turn, are reconstructed in the form of images. The perceptual phenomena associated with color are studied extensively and result in increasingly better digital displays, with more detail and color range. Also, it is quite complex; color perception changes with the type and intensity of illumination.

There are three types of cones, each one of which is reactive to a certain range of light wavelength: S cones have a peak response at $420-440\mathrm{nm}$ , while M and L cones have peak responses between $534-545\mathrm{nm}$ and $564-580\mathrm{nm}$ , respectively. The reaction of cones is a function of the possible wavelengths composing a signal reaching the retina. We could say that our perceptual system compresses visual information using three components.

The $XYZ$ color system uses three functions, with each one approximating the response function of one cone. This model is the best physical approximation, however, not all the colors in this system are feasible on digital systems. One can see the comparison between the visible gamut and the sRGB gamut in the CIE 1931 $xy$ chromaticity diagram in [1]. This is because the standard model for digital color (RGB) is based on three primary color components: Red, Green and Blue [3]. Hence the name. If you watch a LED screen with a magnifying glass or a portable microscope you will be able to see the tiny red, green and blue lights.

The HSL color model is an alternative representation of the RGB model, based on the following attributes of color: Hue, Saturation and Lightness. The system was proposed in the context of Computer Graphics applications with the intent of relating color to a set of characteristics that are more perceptual. This would allow the users to select colors in a more intuitive way.

Figure 2: HSL color model. Constant Lightness slices of the solid cylinder.

The HSL color model can be interpreted as a solid cylinder, whose base is centered at the origin, with unit radius and unit height. Each point in the solid is located in cylindrical coordinates $(\theta ,r,z)$ . Hue corresponds to the angle $\theta \in [0,1)$ (normalized by $2\pi$ ). Saturation is represented by the radius $r\in [0,1]$ (distance to the $z$ -axis). Lightness corresponds to the height $z\in [0,1]$ .

Figure 2 illustrates the HSL color model solid cylinder with plane discs corresponding to constant Lightness slices. At each level we can see the full color spectrum: Hue. Observe that colors close to the center are more neutral, in fact, the center of the cylinder corresponds to gray-scale. As we move farther from the center, colors are more solid, sharper, which is the notion of Saturation.

Many other color models exist, and they are suitable for other applications. Color Theory has many mathematical and scientific aspects to learn. This section has no intent of over-simplifying the subject, but to give a quick overview of it. The subjects covered are just enough to continue our discussion. You are invited to cultivate your own curiosity for color.

Parametric Curves in Color Space

Color Gradients and Palettes

A color gradient is a continuous interpolation between colors. The most simple example is the linear gradient between two colors. In this case the two extreme colors are defined, and the space between them is filled with a convex combination of them. Figure 3 illustrates some linear gradients between a solid blue color and a solid red color. Observe the different results of the linear interpolations in RGB and HSL color spaces. The trajectories in HSL color space would result in curves, since the coordinate system is cylindrical.

Figure 3: Example of a linear gradients. RGB space(top). HSL space: anti-clock-wise (middle) and clock-wise (bottom).

The linear gradient is the most common practice in digital applications. Many complex gradients are composed of several reference points with specified colors at different distances from each other, the spaces between them are interpolated linearly with some varying parameters. Radial and conic gradients are also common practice, while the color interpolation is linear, the results are mapped into the image. Professional software offer greater technical possibilities for gradient generation.

Color palettes are discrete sets of colors. Palettes are designed with different purposes: to create harmonic color combinations in communication and media or to discriminate information categories in data visualizations, for example. Color palette design requires clear criteria for the use of the colors. For art and design professionals, this task is part of their technical and creative process.

We can think of palettes as discretized color gradients. One can design a sampling strategy to obtain any given number of colors from a gradient. Once the partition of the gradient is defined, the color selected from each subdivision can vary, also. Figure 4 illustrates a palette created from taking seven equally separated samples from the gradient.

Figure 4: Example of a palette obtained from the discretization of a gradient in seven steps.

Soto Sánchez

Parametric Family of Curves

In the quest for a mathematical model that would allow myself—and hopefully others—to explore color space in a more systematic way, I have designed a family of parametric curves in 3D. The proposed curves traverse the HSL color solid in many different trajectories, continuously varying Hue, Saturation and Lightness.

The family is composed by cyclic parametric curves that resemble springs, with the form:

where $N\ge 0$ is a rational number that defines the number of cycles the curve will complete $(2N)$ , $t_0$ is an offset for the orientation of the curve, and $a$ and $b$ are scaling factors in the two horizontal components of the curve. The set of one-dimensional functions $g_i(t)$ allows us to control the shape of the cyclic curve on the vertical dimension. We define:

where $c_i$ are general scale parameters with $c_1,c_2\in [0,1]$ and $c_3,c_4\ge 0$ . The parameter $t\in [-1,1]$ allows for symmetric shapes, since these functions are symmetric with respect to the origin.

Figure 5: Examples of specimens in the parametric curve family. Left to right: $h_1(t)$ , $h_2(t)$ , $h_3(t)$ , $h_4(t)$ .

The family of curves of the form $h_i(t)$ , illustrated in Figure 5, is mapped to the HSL solid cylinder by an affine transformation of the $z$ coordinate to the user-selected interval $[L_0,L_1]\subseteq [0,1]$ . Meaning, the complete mapping of the parametric curve to the HSL color space is given by:

associating each point in the curve with a color in the HSL solid, meaning that each curve of the family unwinds in a color gradient. We say that $a$ , $b$ , $c$ , $N$ , $L_0$ , $L_1$ and $t_0$ are hyper-parameters, since their variation allows the user to explore the color space in real time. Figure 6 illustrates the effect of some of the hyper-parameters on the curves $h_i(t)$ , allowing us to grasp the behavior of the parameterization.

Parametric Curves in Color Space

Figure 6: Effect of hyper-parameters $N$ (left) and $c$ (right) over curves of types $h_3(t)$ and $h_2(t)$ respectively.

It is not very difficult to observe that any color in the HSL solid is eventually touched by at least one curve in family $h_i(t)$ , giving the family a notion of density over the space we want to explore. Also, segments of the curves arbitrarily approximate (given certain hyper-parameters) the curves obtained by linear interpolation in HSL coordinates. This means that the density of the family of parametric curves allows the recreation of any linear gradient in HSL space. This property is the main strength of the family of parametric curves presented here and the discovery tool based on them.

Parametric Curves in Color Space

We have defined a family of parametric curves that traverse the HSL color solid in a way that generates continuous gradients. These gradients emerge without the need for the definition of control points whatsoever. The resulting gradients are very rich in Hue, Saturation and Lightness, while maintaining the continuity in these attributes, thanks to the continuity of the parametric curve.

The final touch for fine-tuning our discovery tool is a feature allowing the user to clip the parameter interval arbitrarily. This, as it is illustrated in Figure 7, allows the user to make a fine selection among the range of colors that are appealing in the gradient generated by the full trajectory of the curve.

Figure 7: Parametric clipping of the curve, allows fine control over the resulting gradients.

The described method has been integrated into a web-based application, allowing the user to:

• select a specimen $h_i(t)$ from the family of curves, $i\in \{1,2,3,4\}$ ,
• play with the hyper-parameters,
• clip the parametric interval $(t\in [t_a,t_b])$ ,
• define the number of colors to sample a palette on the resulting gradient.

Soto Sánchez

Figure 8 shows the current version of the user interface. On the left, input and slider controls allow the user to play with the hyper-parameters. Also, the parameter clipping allows the user to zoom into the gradient generated by the full curve. On the bottom left, the user selects the desired number of colors for the palette. The first gradient stripe shows the trajectory of the full curve in the HSL color space. The second stripe shows only the part of the curve clipped by the parametric selection of the interval; lines allow the user to locate the clipped region. Finally, the last band contains the sampled color palette. The colors in the palette are mapped to RGB, the user can select the text delimiter and the separator of the color list to copy and paste into the preferred application.

Figure 8: User interface for the color discovery tool.[2]

Final Remarks

We have created a color discovery tool using a family of parametric curves. The results are very rich in diversity, and they illustrate the many ways in which we can interact with color. The user is invited to visit the interface and discover color through it… maybe a useful palette will emerge in the process.

There are many possible improvements of our color discovery tool. One of the short-term objectives is allowing the user to select the color space in which they desire to map the parametric curves. HSV color space is an immediate candidate and its inclusion in the system seems natural.

Another interesting follow-up is the inclusion of perceptual metrics in the sampling process. While this may be achieved by the use of a perceptual-accurate color space (like CIE Lab*, for example), this feature could be implemented as a re-parameterization of the curves in the discovery tool.

References

[1] “File:CIExy1931 sRGB.png - Wikipedia Commons.” Apr. 2023. https://commons.wikimedia.org/wiki/File:CIExy1931_sRGB.png. [2] “Parametric Curves in Color Space.” Apr. 2023. http://chequesoto.info/color. [3] J. Gomes and L. Velho. Image Processing for Computer Graphics. NY, USA: Springer, 1997. https://link.springer.com/book/10.1007/978-1-4757-2745-6.