Section 5.6 Relations in Action
A website of a certain brand is to be designed using a 2-color scheme. These colors should be chosen from the brand’s color palette, with the constraint that the two colors should be complementary. We need to design two versions of the website, one for light mode and another for dark mode. Let’s decide what two colors we should use for each of the modes.
Here is the
Set of the brand’s color palette.Using
.show() we can display the colors in \(C\text{.}\)
We can then check if all of these color names are in Sage’s
colors dictionary.First we will find all pairs of complementary colors in the set \(C\) and then we will decide which one is the lightest pair to use in the dark mode, and which one is the darkest pair to use in the light mode.
Subsection 5.6.1 Color Complements
Complementary colors are pairs of colors whose hues are located directly opposite each other on the color wheel. For this example, we will consider the RGB (Red, Green, Blue) color wheel used in screen displays.
Colors in the Sage RGB system are defined as tuples
(r,g,b) where each component lies in the interval \([0,1]\text{.}\) For example:The Hue-Saturation-Lightness (HSL) system provides an alternate representation
(h,s,l) of a color where the coordinates also lie in the interval \([0,1]\text{.}\)
We can obtain a color’s hue is by using the
.hsl() method.The hue value is the first entry in the tuple meaning the hue is at index
0.The
float class can cause issues when comparing values. For example, consider the complementary colors violet and green.The imprecision caused by the
float class caused a false negative when testing to see if two colors were complementary. This can be avoided by converting the hue values to Sage’s rational class.Now we define a function in Sage to describe the following relation: a color
c1 is related to a color c2 if and only if the hues of c1 and c2 are complementary, where the test for complementation is the method used above.Subsection 5.6.2 Light and Dark Modes
Now that we know what pairs are complements, we will create a partial order on
Comp to help select a color pair for the light-mode and a color pair for the dark-mode. The poset will be created by adding the lightness values of both colors in the pair then ordering the pairs based on the size of the total lightness value. This results in the highest lightness at the top of the poset and the lowest lightness at the bottom of the poset.The lightness value is the third value in the tuple created by
.hsl() meaning it is indexed at 2.We will now compare the lightness between two complementary pairs to create the light mode and the dark mode. This can be done by adding the lightness value of each color in the pair before comparing them. For example, let’s calculate the total lightness of the pair (violet, green):
Using the previous calculation for total lightness of the pair, we define a partial order relation on
Comp as follows: p1 relates to p2 if and only if the total lightness of p1 is less than the total of p2. Let’s define a function in Sage to build this relation.Recall,
L is a relation on Comp, therefore it orders our complementary pairs. For example, the pair of violet and green have a lower total lightness than pale-turquoise and maroon.A Hasse diagram can now be used to visually analyze the poset.
The
.top() and .bottom() methods can be used to assign the brightest and darkest pairs to variables.Teal and maroon will be used for light-mode because they are the darkest, while pale-turquoise and light-coral will be used for dark-mode because they are the lightest.
The
.html_color() method can be used to find these colors corresponding hex codes for use in the website’s code.
