前言
相信大家都知道在前端的顏色表示方式有多種，一種是以3個或6個十六進制的數子表示，一種是RGB的數字形式，還有一種是直接以顏色的英文來表示。這三種都是不支持透明色的。所以還有RGBA的表式方式，在RGB的的基礎上加入了Alpha透明，使網頁可以展現更加復雜絢麗的效果。
隨機顏色
在平時的碼農日常中，經常會用到求隨機顏色的地方，下面是我總結的幾種簡單的實現隨機顏色的方式：
十六進制格式（#000000-#FFFFFF）
第一種是比較簡單的方法，這種方法是先隨機生成ffffff以內16進制數，然后判斷位數，少于6位的用while循環在前面加0，湊夠6位。
function randomHexColor() { //隨機生成十六進制顏色 var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以內16進制數 while (hex.length < 6) { //while循環判斷hex位數，少于6位前面加0湊夠6位 hex = '0' + hex; } return '#' + hex; //返回‘#'開頭16進制顏色}還有一種比較方便但是比較難懂的方法，需要用到位運算。
function randomHexColor() { //隨機生成十六進制顏色 return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);}按執行順序可以分為以下六步：
Math.random() * 0x1000000，其中0x1000000=0xffffff+1，因為Math.random()取不到1，所以+1，這樣就會生成一個1-16777216(不包含)以內的浮點數。.toString(16) ，把十進制數轉化為六位以下16進制數。.substr(-6) ，是去從-6開始的后面所有字符串，也就是最后6位數。RGB格式
function randomRgbColor() { //隨機生成RGB顏色 var r = Math.floor(Math.random() * 256); //隨機生成256以內r值 var g = Math.floor(Math.random() * 256); //隨機生成256以內g值 var b = Math.floor(Math.random() * 256); //隨機生成256以內b值 return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式顏色}RGBA格式
function randomRgbaColor() { //隨機生成RGBA顏色 var r = Math.floor(Math.random() * 256); //隨機生成256以內r值 var g = Math.floor(Math.random() * 256); //隨機生成256以內g值 var b = Math.floor(Math.random() * 256); //隨機生成256以內b值 var alpha = Math.random(); //隨機生成1以內a值 return `rgb(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式顏色}顏色格式轉化
在編碼過程中，經常會遇到要將顏色格式相互轉化的問題,其中十六進制格式和RGB格式是可以相互轉化的，但是RGBA格式由于多了前兩者沒有的Alpha透明屬性，所以和前兩者轉化會丟失Alpha值，不建議進行轉化，下面是我的顏色轉化的方法：
十六進制轉為RGB
function hex2Rgb(hex) { //十六進制轉為RGB var rgb = []; // 定義rgb數組 if (/^/#[0-9A-F]{3}$/i.test(hex)) { //判斷傳入是否為#三位十六進制數 let sixHex = '#'; hex.replace(/[0-9A-F]/ig, function(kw) { sixHex += kw + kw; //把三位16進制數轉化為六位 }); hex = sixHex; //保存回hex } if (/^#[0-9A-F]{6}$/i.test(hex)) { //判斷傳入是否為#六位十六進制數 hex.replace(/[0-9A-F]{2}/ig, function(kw) { rgb.push(eval('0x' + kw)); //十六進制轉化為十進制并存如數組 }); return `rgb(${rgb.join(',')})`; //輸出RGB格式顏色 } else { console.log(`Input ${hex} is wrong!`); return 'rgb(0,0,0)'; }}RGB轉為十六進制
function rgb2Hex(rgb) { if (/^rgb/((/d{1,3}/,){2}/d{1,3}/)$/i.test(rgb)) { //test RGB var hex = '#'; //定義十六進制顏色變量 rgb.replace(//d{1,3}/g, function(kw) { //提取rgb數字 kw = parseInt(kw).toString(16); //轉為十六進制 kw = kw.length < 2 ? 0 + kw : kw; //判斷位數，保證兩位 hex += kw; //拼接 }); return hex; //返回十六進制 } else { console.log(`Input ${rgb} is wrong!`); return '#000'; //輸入格式錯誤,返回#000 }}總結
以上就是這篇文文章的全部內容了，也是我在平時遇到的關于顏色處理方面的問題，大家有遇到什么奇怪的問題和更好的解決方法可以交流溝通一下。希望本文的內容對大家的學習或者工作能帶來一定的幫助。
新聞熱點
疑難解答
