Skip to main content

Notes on Color #4: HSY

Previously I discussed why HSV and HSL are bad, despite that they are quite popular adopted by digital painting tools.

I learnd about HSY from Krita, which seems to solve a number of issues. Here I did some quick explorations in order to learn more about it's properties.

First of all, HSY is very similar to other HS* family members. The definition of H and S should be the same as in HSL. Y is for Luma, which is a weighted sum of (gamma-corrected) all three components. The weights reflect our brightness sensitivity of different wavelengths. The specific values depend on the actual primary colors.

Here's a HSY disk at Y=0.5, for sRGB.

HCY disk with Y=0.5

Comparing with HSV or HSL disk, this one looks smoother, and a bit "muddy" near the center. This means the Y value does predicts the actual luminance well. The gray version (converted via CIELAB) may verify this observation:
L(CIELAB) channel of the HCY disk.


So there is a huge improvement over other HS* models. It seems good enough for digital painting, right? Well, yes and no. I mean no.

The Two Lies

Well the "huge improment" part is true, but there are two lies above.

First of all, notice the "HCY" in the captions,  that was a not a typo. The distance to the center represents chroma rather than saturation.

Second, you may notice some lighter areas in the grey version, near the purple area and green area. That is not an illusion.

This changes the story entirely. Allow me to reveal the imperfect truth.

sRGB colors in the HCY disk where Y=0.5.
  
This weird shape represents all sRGB colors on the disk. At first I was quite sure that something is wrong in my code. Later I realized that if (r, g, b) has a luma of 0.5, then so does (1-r, 1-g, 1-b) , provided that the sum of the component weights is 1.

In the previous colorful version, the out-of-gamut colors were capped, therefore not accurate.

This weird shape is problematic, somtimes it is no longer possible to mix two colors by picking a point on the line segment. On the other hand, in Krita we do have a full-circle version:

HSY disk in Krita, with Y near 0.5


It appears more "muddy" here. If you examine the colors near the border, red-ish and blue-ish areas look fine, but other parts look gray-ish. 

In fact this version is obatained by stretching the HCY disk. Each radius is stretched to [0, 1] independently. This way the grey-ish area at the center appears much bigger than it is.

Personally I don't think this transformation makes much sense. Now the saturation value depends on both hue and brightness, so two saturation values are not really comparable. I think we should instead accept something like, the most "colorful yellow" is always brighter than the most "colorful blue"  (within a  (usual) RGB model). Therefore we should always be careful when shifting hues for high-chroma colors.



Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Determine Perspective Lines With Off-page Vanishing Point

In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction. For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point. But sometimes the vanishing point is too far away, such that it is outside the paper/canvas. In this example, we have a point P and two perspective lines L1 and L2. The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper. I am aware of a few traditional solutions: 1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP. 2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back. 3. Draw a perspective grid using the Brewer Method. #1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/p...
3 comments
Read More »

Chasing an IO Phantom

My home server has been weird since months ago, it just becomes unresponsive occassionally. It is annoying but it happens only rarely, so normally I'd just wait or reboot it. But weeks ago I decided to get to the bottom of it. What's Wrong My system set up is: Root: SSD, LUKS + LVM + Ext4 Data: HDD, LUKS + ZFS 16GB RAM + 1GB swap Rootless dockerd The system may become unresponsive, when the IO on HDD  is persistantly high for a while. Also: Often kswapd0 has high CPU High IO on root fs (SSD) From dockerd and some containers RAM usage is high, swap usage is low It is very strange that IO on HDD can affect SSD. Note that when this happens, even stopping the IO on HDD does not always help. Usually restarting dockerd does not help, but rebooting helps. Investigation: Swap An obvious potential root cause is the swap. High CPU on kswapd0 usually means the free memory is low and the kernel is busy exchanging data between disk and swap. However, I tried the following steps, none of the...
Post a Comment
Read More »

Moving Items Along Bezier Curves with CSS Animation (Part 2: Time Warp)

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : B(t)=(1−t)3P0+3(1−t)2tP1+3(1−t)t2P2+t3P3, 0≤t≤1. In the 2D case, B(t) has two coordinates, x(t) and y(t). Define xi to the be x coordinate of Pi, then we have: x(t)=(1−t)3x0+3(1−t)2tx1+3(1−t)t2x2+t3x3, 0≤t≤1. So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(...
3 comments
Read More »