Section 5.6 Relations in Action
Imagine you are responsible for the UX on a website with two distinct features. You have been asked to color code these futures distinctly in both a light-mode and a dark-mode with the brand’s colors.
Here is the
Set of the brand’s colors.Subsection 5.6.1 Color Complements
Complementary colors are two colors, whose hues are \(180^\circ\) away from each other on the color wheel. This results in contrasting and distinct hues.
RGB values complicate work with hues so the
.hsl() attribute and the hue values it generates will be used to compute which colors are complements. The .hsl() attribute outputs in the format (hue, saturation, lightness) with all values, \(v\text{,}\) in the range \(0 \leq v \leq 1\text{,}\) so increments of \(180^\circ\text{,}\) will be replaced by increments of 1/2.Here is a relation, on \(C\text{,}\) that maps colors to their complements using the method above.
It may appear as if
Complements relation is an equivalence relation, but this is not the case; colors do not complement themselves therefore the relation is not reflexive.Subsection 5.6.2 Light and Dark Modes
A partial order on
Complements can be created, as relations are themselves sets, to select which color pairs should be used for the dark-mode and the light-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 of the lightness values. This results in the highest total at the top of the poset and the lowest total at the bottom of the poset.A Hasse diagram can now be used to visually analyze the poset.
Alternatively, the
.top() and .bottom() attributes can be used to see the top and bottom of the poset if they exist.Both methods show that teal and maroon are at the bottom while pale turquoise and firebrick are at the top. So pale turquoise and firebrick will be used for light-mode while teal and maroon will be used for dark-mode.
The
.html_color() attribute can be used to find the corresponding hex codes for these colors for use in the website’s code.
