互聯網產品設計中的十進制&十六進制色值換算
設計中的顏色一般是用十進制的RGB模式或者是十六進制的「#XXXX」之類的來表達,那如果兩者要進行換算,如何處理?這篇文章,我們看看作者分享的經驗。
我們經常使用的光源色RGB和十六進制前綴“#”號的色值,通常在設計圖上標注的是十六進制的6位值。而開發在應用時,有時候需要通過工具將6位十六進制值換算成十進制的RGB3位值,有一次被開發問道:“你看看這個#xxxxxx,RGB色值是多少??!币幌伦蛹て鹆宋业奶骄坑ㄟ^一系列的推算,終于讓我得出了十進制與十六進制色值換算的規律和公式。
設計過程中常用的色彩色值,現有RGB代表的十進制,以#前綴的十六進制。
01 十進制-RGB
RGB(255,255,255)三位值,分別代表紅色,綠色,藍色(光的三原色)。強度為滿時值為255,強度為零時值為0。(強度即飽和度)
因此RGB(255,0,0)是純紅色,RGB(0,255,0)是純綠色,RGB(0,0,255)是純藍色。
當有0值時,代表不摻雜一點當前的顏色。當多三個色值都是0時,代表當前三色光源不存在,天黑一片,為純黑色。當單個值逐步增加到255的時候,代表這個顏色趨于純白,天亮了。我們可以應用光學成色的理解去計算所需的色值。
例如,強度為255的純紅色,色值RGB(255,0,0),想象天黑了,紅色受影響明度要降下來,我們可以在紅色里逐漸加入黑,即讓紅色位值降下來,255→0遞減,直至為(0,0,0)純黑。
而想要純紅色受到白光的影響,天亮了,紅色已經為最頂值,需要接受其他色位的白才能提高明度,因此綠色和藍色同步增強相同的值,即可增加紅色的受光程度,提高紅色的明度。
02 十六進制-#FFFFFF
網頁上用十六進制的方式去表示紅綠藍,通常用#開頭,FF代表RGB的255強度,ABCDEF(A~F)即是強度階梯,十位字母表示的跨度為160~240,遞進值為16。個位字母表示的跨度為10~15,遞進值為1。
三、字母換算公式
四、數字換算公式
五、色相調整
根據三元色的三組色值組合,有偏向性地調整。
如紫色,紅色和藍色調和色相,綠色值用來調整明度。如 #FA60FF
六、灰度調整
平衡三原色的比例,相同色值調整灰度,不帶色彩偏向性。
略微調整帶目標傾向性的原色色值,可讓灰色中些融入些色彩傾向。
設計師可以試一試用上面的公式去推算一下十進制的色值,命中的時候很有“Unbelievable!”的快感,還能大秀一波的專業度~
還有更好的方法推演,歡迎留言探討
作者:Amy_Grace,微信公眾號:艾米有點想法
本文由 @Amy_Grace 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!