Cacite_Gray_200 is Pink

[nikolaswise]

Decided to make a formal issue for discussion on this issue. I'm seeing Calcite Gray 200 as noticeably and distractingly a pinkish hue. Examining this shows that the HSL value for #feeefe is (300, 3%, 94%). This is squarely in the pink hue, and saturated enough to be noticeable at this lightness.

@CassidyB @kyle-03674 posit this is correct. I would like to submit that this is problematic. Below, I've assembled a table that shows the variables in the grayscale and their HSL values. This is done for comparison of hue. You can see that the hue wanders all over the map. Most of the grays are a cool, bluish hue with the occasional hiccup. Several of the grays have 0 saturation at all, meaning they are true neutral grays.

Gray Name	HSL Colorspace	Effect on gray
$Calcite_Gray_100	HSL(180, 7%, 97%)	Teal, fairly high saturation. Cool gray.
$Calcite_Gray_150	HSL(180, 4%, 95%)	Teal, still saturated. Cool gray.
$Calcite_Gray_200	HSL(300, 3%, 94%)	Pink. Enough saturation to be noticable. Warm gray
$Calcite_Gray_250	HSL(210, 4%, 90%)	Light blue. Saturated. Cool gray.
$Calcite_Gray_300	HSL(60, 2%, 88%)	Yellow. Low saturation. Warm gray.
$Calcite_Gray_350	HSL(0, 0%, 80%)	Red, but 0 saturation. True gray tone.
$Calcite_Gray_400	HSL(216, 3%, 66%)	Blue, low saturation. Cool gray.
$Calcite_Gray_450	HSL(216, 2%, 58%)	Blue, low saturation. Cool gray.
$Calcite_Gray_500	HSL(210, 2%, 51%)	Blue, low saturation. Cool gray.
$Calcite_Gray_550	HSL(225, 2%, 43%)	Blue, low saturation. Cool gray.
$Calcite_Gray_600	HSL(220, 2%, 35%)	Blue, low saturation. Cool gray.
$Calcite_Gray_650	HSL(0, 0%, 30%)	Red, but 0 saturation. True gray tone.
$Calcite_Gray_700	HSL(0, 0%, 20%)	Red, but 0 saturation. True gray tone.

I suggest unifying the hues of the grayscale to either neutral or cool tones. At the very least, fixing the pinkish gray should be a high priority. If this gray is intentionally pink, I am curios about the reasoning behind that decision.

[kyle-03674]

Nikolas — Are you visually seeing pink, or only seeing it reflected in the numbers. http://www.color-hex.com/color/efeeef

The uneven RGB values came from the color profile in use in Illustrator — sRGB. When I typed in a gray value, such as 56%, Illustrator broke it down into 109, 110, 113, for example.

One possible solution would be to change the values of the Calcite Grays to be pure gray, like EFEFEF. http://www.color-hex.com/color/efefef

[nikolaswise]

@kyle-03674 I am visually seeing pink. I moved to HSL to see if I was going crazy or not. I think moving to EFEFEF is a good idea, or even setting the canonical source of the grayscale in a colorspace more appropriate for screens.

The middle tone is a pinkish gray.

[nikolaswise]

Again, I'm not against this pinkish gray. Only that it does not seem to match the cool, very neutral blue grays. I am advocating for aligning the temperature of the grayscale to either warm, cool, or neutral across the board.

[paulcpederson]

@kyle-03674 I am also seeing pink. It is especially noticeable when it is adjacent to one of the other grays.

[kyle-03674]

@nikolaswise This is something I wondered about from the very beginning, with the grays not being pure gray with even RGB values. (or a hue of 0 in HSL). I want them to be neutral. @paulcpederson Are you using a calibrated monitor?

I'm going to try using pure neutral gray values. But will get with @CassidyB before publishing to ensure we're using a good process for the change.

[paulcpederson]

I calibrated my monitor with a huey a while back, but I have since moved locations, so ambient light could be affecting it.

[paulcpederson]

@kyle-03674 the cited rgb color here doesn't match the hex.

Expected RGB from #feeefe is 254 238 254

[kyle-03674]

Try again, using the following: Hex:"#EFEEEF", RGB:"r239 g239 b240"

I think you typed it in wrong :)

[nikolaswise]

@kyle-03674 The gray appears to be pink. The numbers in both RGB, Hex, and HSL show the color to be pink. The problem is not with monitor displaying an incorrect color, but issues with translating between color spaces.

There are a number of different color spaces that are usable on the web. The most common one from the perspective of web design is RGB. In CSS, the RGB colorspace is reflected in hex triplets.

A neutral gray in an RGB color space will have equal levels across the three color values. Even values show that no one color is more powerful than any of the others, meaning that the saturation is effectively 0.

Another way to define grayscales is with a hue/saturation/lightness colorspace, which is supported in CSS3. In the HSL model, a true neutral gray will have a Saturation value of 0. The lightness will define where on the black to white spectrum the tone will fall. With HSL, a hue between 300-360 or 0-60 with a low saturation will create a warm gray tone. A hue between 60 and 300 with a low saturation will create a cool gray tone.

Note: the only reason I'm bringing up any of this is a very subtle discord I am noticing in the grayscale. The above table and examination of the very nitty-gritty details involving color space are the results of my efforts to determine why this discord is happening, and make suggestions that I feel will strengthen the project.

[kyle-03674]

Great feedback, we will do an update this week.

----- Reply message ----- From: "Nikolas Wise" notifications@github.com To: "Esri/Patterns-Color" Patterns-Color@noreply.github.com Cc: "Kyle Heinemann" kheinemann@esri.com Subject: [Patterns-Color] Cacite_Gray_200 is Pink (#3) Date: Tue, Mar 31, 2015 9:50 AM

@kyle-03674https://github.com/kyle-03674 The gray appears to be pink. The numbers in both RGB, Hex, and HSL show the color to be pink. The problem is not with monitor displaying an incorrect color, but issues with translating between color spaces.

There are a number of different color spaceshttp://en.wikipedia.org/wiki/Color_space that are usable on the web. The most common one from the perspective of web design is RGBhttp://en.wikipedia.org/wiki/RGB_color_space. In CSS, the RGB colorspace is reflected in hex tripletshttp://en.wikipedia.org/wiki/Web_colors#Hex_triplet.

A neutral gray in an RGB color space will have equal levels across the three color values. Even values show that no one color is more powerful than any of the others, meaning that the saturationhttp://en.wikipedia.org/wiki/Colorfulness#Saturation is effectively 0.

Another way to define grayscales is with a hue/saturation/lightnesshttp://en.wikipedia.org/wiki/HSL_and_HSV colorspace, which is supported in CSS3http://www.w3.org/TR/css3-color/#hsl-color. In the HSL model, a true neutral gray will have a Saturation value of 0. The lightness will define where on the black to white spectrum the tone will fall. With HSL, a huehttp://en.wikipedia.org/wiki/Hue between 300-360 or 0-60 with a low saturation will create a warm gray tone. A hue between 60 and 300 with a low saturation will create a cool gray tone.

— Reply to this email directly or view it on GitHubhttps://github.com/Esri/Patterns-Color/issues/3#issuecomment-88168868.

[nikolaswise]

👍

[CassidyB]

Pull request #7 fixes this issue.