互聯網產品設計中的十進制&十六進制色值換算

0 評論 1616 瀏覽 0 收藏 5 分鐘

設計中的顏色一般是用十進制的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 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!