Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. color

OKLCH in CSS: why we moved from RGB and HSL

Imago voragine.net
• , , , , , , ,

oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a), each item corresponds as follows:

  • L is perceived lightness (0–1). “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl().
  • C is chroma, from gray to the most saturated color.
  • H is the hue angle (0–360).
  • a is opacity (0–1 or 0–100%).

The benefits of OKLCH:

  1. OKLCH frees designers from the need to manually choose every color. Designers can define a formula, choose a few colors, and an entire design system palette is automatically generated.
  2. OKLCH can be used for wide-gamut P3 colors. For instance, new devices (like those from Apple) can display more colors than old sRGB monitors, and we can use OKLCH to specify these new colors.
  3. Unlike hsl(), OKLCH is better for color modifications and palette generation. It uses perceptual lightness, so no more unexpected results, like we had with darken() in Sass.
  4. Further, with its predictable lightness, OKLCH provides better a11y.
  5. Unlike rgb() or hex (#ca0000), OKLCH is human readable. You can quickly and easily know which color an OKLCH value represents simply by looking at the numbers. OKLCH works like HSL, but it encodes lightness better than HSL.

Srcery palette template for cmus theme

Imago voragine.net
• , , , 
# cmus Srcery Color Scheme
# Author: https://github.com/Charsinic

# Directory colors
set color_win_dir=7

# Normal text
set color_win_fg=7

# Window background color.
set color_win_bg=default

# Command line color.
set color_cmdline_bg=default
set color_cmdline_fg=default

# Color of error messages displayed on the command line.
set color_error=1

# Color of informational messages displayed on the command line.
set color_info=10

# Color of the separator line between windows in view (1).
set color_separator=8

# Color of window titles (topmost line of the screen).
set color_win_title_bg=235
set color_win_title_fg=15

# Status line color.
set color_statusline_bg=235
set color_statusline_fg=15

# Color of currently playing track.
set color_win_cur=10

# Color of the line displaying currently playing track.
set color_titleline_bg=237
set color_titleline_fg=10

# Color of the selected row which is also the currently playing track in active window.
set color_win_cur_sel_bg=237
set color_win_cur_sel_fg=10

# Color of the selected row which is also the currently playing track in inactive window.
set color_win_inactive_cur_sel_bg=default
set color_win_inactive_cur_sel_fg=7

# Color of selected row in active window.
set color_win_sel_bg=237
set color_win_sel_fg=9

# Color of selected row in inactive window.
set color_win_inactive_sel_bg=default
set color_win_inactive_sel_fg=15

Color Survey Results

Imago voragine.net
• ,

Basically, women were slightly more liberal with the modifiers, but otherwise they generally agreed (and some of the differences may be sampling noise). The results were similar across the survey—men and women tended on average to call colors the same names.

Color Naming Experiment

Imago voragine.net
• ,
Color Naming Perception Chart

Each user was shown a random color and asked to type in a name. We asked people provide the most generic name possible, dropping things like modifiers (blue instead of light blue). Instead of using the entire RGB spectrum (millions), we pruned the color set to 216 «web safe» colors. This helped ensure every color had many responses. We left it online for a week or so and collected 6,276 color responses.