Section 5.6 Relations in Action
Imagine you are creating both a light-mode and a dark-mode for a brand’s website and have been asked to use complementary pairs of colors from the brand’s color palette for the foreground of the website. Sage’s
colors dictionary and related attributes can be used to pick out colors for both modes.Here is the
Set of the brand’s color palette.We can then check if all of these color names are keys in the
colors dictionary by converting colors into a Set.Strings of color names in the
colors dictionary correspond to RGB values, where each value is in the interval \([0,1]\text{.}\)
Subsection 5.6.1 Color Complements
Complementary colors are two colors whose hues are on opposite sides of the color wheel.
You can obtain a color’s hue is by using the
.hsl() attribute. The .hsl() attribute outputs in the format (hue, saturation, lightness) with all values being a float in the interval \([0,1]\text{.}\) This interval causes colors to be complementary if and only if their hues differ by \(\frac{1}{2}\text{.}\)
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 complements. This can be avoided by converting the hue values to Sage’s rational class.Here is a relation, on \(C\text{,}\) defined as such: 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 chose a darker foreground for the light background of the light-mode and a lighter foreground for the dark background of the dark-mode.
The lightness value is the third value in the tuple created by
.hsl() meaning it is indexed at 2.Instead of comparing the values of individual colors, 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.
A partial order on
Comp can be created, as relations are themselves sets. Here is a relation, on Comp, defined as such: p1 relates to p2 if and only if the sum of lightness values in p1 is less than the sum in p2.Remember,
L_order is a relation on a set containing pairs of colors, therefore it orders our complementary pairs. For example, the pair of teal and firebrick have a lower sum of lightness values than violet and green.The
.top() and .bottom() attributes can be used to find the brightest and darkest pairs.Teal and maroon will be used for light-mode because they are the darkest, while pale-turquoise and firebrick will be used for dark-mode because they are the lightest.
The
.html_color() attribute can be used to find these colors’ corresponding hex codes for use in the website’s code.
