UI Design Optimization 28: Discussing Color Properties with HSL Instead of Hex

1 Requirement Goal

Development Requirement: Organize platform primary color variables, convert three hexadecimal blues to equivalent HSL representation to facilitate team discussion on subsequent color adjustments.

This section distinguishes color representation methods, color adjustment attributes, and contrast measurement, understanding HSL's role in communication.

2 Initial Implementation

The initial version recorded three blue color values in hexadecimal, displaying corresponding color blocks and values.

Figure 1: Recording the same set of blues with hexadecimal.

3 Method Analysis

3.1 Representation Differences

Hexadecimal can accurately represent colors, but judging hue, saturation, and lightness relationships directly from the string is not intuitive.

Switching to HSL allows separate discussion of these attributes. The change in representation of the same color should not be described as the interface itself becoming clearer or more beautiful.

3.2 Attribute Meanings

H is the position on the hue wheel, S is saturation, L is lightness. When saturation is zero, rotating hue does not change gray; L at 0% and 100% are black and white respectively.

HSL's L is not the same attribute as HSB/HSV brightness. The same HSL lightness does not guarantee different hues have the same perceived brightness, and cannot replace text contrast checking.

4 Method Application

4.1 Equivalent Conversion

Convert the three hexadecimal blues to HSL, first keeping the color result unchanged, then discussing the adjustment direction of each attribute.

Before using a tool, confirm whether it displays HSL or HSB/HSV, to avoid copying numbers from the two models directly together.

4.2 Value Examples

The following two rules represent the same blue; HSL parameters are kept to sufficient precision due to decimal rounding.

/* HEX */
.primary-color { background: #2563eb; }

/* Equivalent HSL */
.primary-color {
  background: hsl(221.2121 83.1933% 53.3333%);
}

After actual conversion, browser-computed colors can be compared. In this example, all three color blocks are handled with equivalent conversion, not using color changes to create before/after effect differences.

4.3 Combination Check

After understanding the representation, you can try light/dark variations for tooltip backgrounds, buttons, and text, then place them into actual components.

Check each actual foreground and background combination. You cannot judge text readability by how much two L values differ, nor is it necessary to require all project colors to use a single format.

5 Result Verification

Figure 2: Retaining color block colors, recording attributes with HSL.

Both versions should maintain the same computed colors. The change lies in recording and discussion method, not color block quality.

☐ Three color blocks have consistent computed colors before and after conversion.

☐ HSL and HSB/HSV values in tools are not mixed.

☐ After use in components, text and background contrast checked separately.

Color equivalence in this example can be verified via browser inspection; subsequent new color schemes require separate verification.

6 Application and Practice

Pick a blue, record both HEX and HSL, then modify only one of H, S, or L to observe its effect.

Deliver an attribute record, using the original color and variants for tooltip backgrounds, buttons, and text, and list the color combinations that need checking.