因爲筆者最近在開發可視化平臺,因此對動態編輯器這塊作了一段時間的研究, 發現其中有個小模塊的知識點比較有意思,因此在這裏分享一下.
做爲前端工程師, 咱們平時在對接設計稿的時候, 是否是常常會涉及到顏色值的轉換呢? 好比從HEX值轉化到RGB值, 亦或者是從RGB值轉換到HEX值, 這塊在PhotoShop等設計軟件中很是常見, 在作相似於畫板, 設計類的IDE的時候也常常會用到它們的互相轉換, 還有一種場景是,爲了知足老闆對高大上特效的要求, 咱們要讓動畫在不一樣的時間顯示不一樣的顏色,並且有過渡效果(過渡效果雖然能夠經過transiton來實現),以下:css
因此筆者在這裏就分享一下HEX與RGB之間相互轉換的原理和算法, 而且實現隨機生成HEX值和隨機生成RGB值的函數,最後帶着你們深度理解和掌握顏色領域的應用.前端
1 文章摘要
-
HEX與16進制 -
HEX轉RGB算法 -
RGB轉HEX算法 -
應用場景
2 HEX(16進制)
十六進制（英文名稱：Hexadecimal），是計算機中數據的一種表示方法。和咱們日常的表示法不同。它由0-9，A-F組成，字母不區分大小寫。與10進制的對應關係是：0-9對應0-9；A-F對應10-15；N進制的數能夠用0~(N-1)的數表示，超過9的用字母A-F。css3
以上概念很是重要, 這也是咱們轉換RGB的關鍵. 還有一個知識點須要咱們掌握的就是進制轉換. 在計算機基礎中咱們都知道如何將二進制轉化爲十進制, 10進制數轉換成16進制的方法，和轉換爲2進制的方法相似，惟一的變化：除數由2變成16. 舉個例子, 咱們拿140來舉例:git
| 被除數 | 計算過程 | 商 | 餘數 |
|---|---|---|---|
| 140 | 140/16 | 8 | 14 |
| 8 | 8/16 | 0 | 8 |
因此140轉換爲16進制，結果爲：7E (由十六進制的定義咱們知道14對應的字母爲E)github
以上就是掌握HEX和RGB互相轉換的核心知識點, 接下來咱們來看看互相轉換的算法實現.web
3 HEX轉RGB算法
從 HEX 顏色值轉換成 RGB 顏色值，本質上是HEX的第一位數乘以16加上第二位數. 舉個例子: 轉換顏色爲 #1821DD的 HEX 值到 RGB 值.算法
#1821DD ----------> rgb:
18 ----> r: r的值就是: 1 * 16 + 8 = 24
21 ----> g: g的值就是: 2 * 16 + 1 = 33
DD ----> b: b的值就是: 13 * 16 + 13 = 221
以上轉換的結果爲rgb: (24, 33, 221), 怎麼樣, 是否是很簡單? 接下來咱們來看看具體的算法實現:redux
const hex2rgb = (hex: string = ''):string => { // 針對於傳入錯誤的hex,即長度不等於7或者不等於4的 if(![4,7].includes(hex.length)) { throw new Error('格式錯誤') }
let result = hex.slice(1)
// 若是是顏色疊值, 統一轉換成6位顏色值 if(result.length === 3) { result = result.split('').map(a => `${a}${a}`).join('') }
const rgb:number[] = []
// 計算hex值 for(let i=0, len = result.length; i< len; i+=2) { rgb[i / 2] = getHexVal(result[i]) * 16 + getHexVal(result[i+1]) }
function getHexVal(letter:string):number { let num:number = -1; switch(letter.toUpperCase()) { case "A": num = 10 break; case "B": num = 11 break; case "C": num = 12 break; case "D": num = 13 break; case "E": num = 14 break; case "F": num = 15 break; }
if(num < 0) { num = Number(letter) }
return num }
return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`}
固然還有更其餘方法能夠實現REX轉RGB, 你們能夠自行探索.微信
4 RGB轉HEX算法
對於RGB轉HEX, 方法相似, 只不過至關於上述方法的逆運算, 筆者實現一種思路, 你們能夠參考學習:前端工程師
const rgb2hex = (rgb: string):string => { let str = rgb.replace(/rgb\((.*)\)/g, '$1') let strArr = str.split(',').map(t => t.trim())
let result:string[] = []
for(let i:number = 0, len:number = strArr.length; i < len; i++) { let curVal = Number(strArr[i]) let left = getHexStr(String(Math.floor(curVal / 16))) let right = getHexStr(String(Math.floor(curVal % 16))) result[i] = left + right }
function getHexStr(v:string):string { let str:string = ''; switch(v) { case '10': str = "A" break; case '11': str = "B" break; case '12': str = "C" break; case '13': str = "D" break; case '14': str = "E" break; case '15': str = "F" break; }
if(!str) { str = v }
return str }
return `#${result.join('')}`}
以上就是反轉的算法, 你們掌握了嗎?接下來咱們來聊聊它的應用場景.
5 應用場景
其實顏色單位互換應用在不少領域, 筆者先羅列幾個實際場景:
-
單位換算工具
-
WEB IDE調色板
-
動態背景
其實還有不少應用, 你們能夠自行發揮哈, 今天的學習就到這了, 請問今天你又博學了嗎?
本文分享自微信公衆號 - 趣談前端（beautifulFront）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。