js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？

js设置css色相旋转

Hue rotation is often an easy way to change the appearance of a plot or figure without the need to create a new colour bar. However, when dealing with colourblindness, it is important to ensure that the spacing between colours is sufficiently distinguishable. Theoretically, these should remain the same, however often a practical demonstration is still required to put our minds at ease.

色相旋转通常是更改绘图或图形外观的简便方法，而无需创建新的颜色条。 但是，在处理色盲时，重要的是要确保充分区分颜色之间的间距。 从理论上讲，这些应该保持不变，但是仍然经常需要进行实际演示才能使我们放心。

选择颜色方案 (Selecting a colour-scheme)

Although it is possible to create a custom colour scheme, for simplicity the script written will only use the scale-chromatic schemes within d3:

尽管可以创建自定义配色方案，但为简单起见，编写的脚本将仅使用d3内的比例色方案：

And for this article, only the Magma colour scheme shall be explored. If you wish to see any others — see the link at the end.

对于本文，仅应探讨岩浆配色方案。 如果您希望看到其他任何人，请参阅结尾处的链接。

d3.interpolateMagma()

d3.interpolateMagma()

可视化整个色相-旋转光谱 (Visualising the full hue-rotation spectrum)

Hue-Rotation ranges from 0 to 360 degrees. To do this we divide our screen width into 20-pixel segments, where the leftmost segment corresponds to a 0-degree rotation and the rightmost a full circle (360 degrees) rotation.

色相旋转范围为0到360度。 为此，我们将屏幕宽度划分为20个像素段，其中最左边的部分对应于0度旋转，最右边的部分对应于整圈( 360度 )旋转。

hue-rotate(0deg) .-> hue-rotate(180deg) -> hue-rotate(360deg)

色相旋转(0deg).->色相旋转(180deg)->色相旋转(360deg)

全色盲 (Total-Color Blindness)

The best way to check if a scheme is a colourblind-friendly is to look at it in black and white. Although very rare, these are conditions where all cones in a person's eyes are damaged.

检查方案是否对色盲友好的最好方法是用黑白两种颜色查看它。 尽管非常罕见，但这些情况会损坏人眼中所有视锥细胞。

红色-看到红色的能力降低 (Red — Reduced ability to see reds)

绿色-看到绿色的能力降低 (Green — Reduced ability to see green)

This is the most common type of colour blindness

这是色盲的最常见类型

蓝色-降低看布鲁斯的能力 (Blue — Reduced ability to see blues)

If a colour bar consists of well-spaced colours, hue-shifting these does not affect its ability as a colour-blind pallete. The best way to determine the effectiveness still remains to view the colours of a figure in monochrome, and observe a distinguishable gradient.

如果色条由间隔良好的颜色组成，则将这些色相移动不会影响其作为色盲调色板的能力。 确定有效性的最佳方法仍然是查看单色图像的颜色并观察可分辨的渐变。

互动示例： (Interactive Example:)

To explore how hue rotation affects different types of colourblindness you can have a play with the following Observable Notebook:

要研究色相旋转如何影响不同类型的色盲，您可以使用以下可观察的笔记本进行操作：

翻译自: https://uxdesign.cc/does-hue-rotating-a-colorscheme-retain-its-ability-to-be-colourblind-friendly-148dc790205c

js设置css色相旋转