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.
對于本文,僅應探討巖漿配色方案。 如果您希望看到其他任何人,請參閱結尾處的鏈接。

可視化整個色相-旋轉光譜 (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度 )旋轉。

全色盲 (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色相旋轉
本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。 如若轉載,請注明出處:http://www.pswp.cn/news/274610.shtml 繁體地址,請注明出處:http://hk.pswp.cn/news/274610.shtml 英文地址,請注明出處:http://en.pswp.cn/news/274610.shtml
如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!