js 正則判斷顏色值，HEX轉(zhuǎn)RGB，HSL轉(zhuǎn)RGB

freecode 發(fā)布于2019-08-22 10:54 / 1251人閱讀

摘要：顏色值判斷顏色值轉(zhuǎn)換為顏色值轉(zhuǎn)換為為色相，飽和度，亮度。

顏色值判斷

/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test("#009a61")
/^rgb/.test("rgb(0, 154, 97)")
/^hsl/.test("hsl(0, 0%, 20%)")

HEX顏色值轉(zhuǎn)換為RGB

// Colors
function hexToRgb(hexValue) {
  const rgx = /^#?([a-fd])([a-fd])([a-fd])$/i;
  const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b );
  const rgb = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
  const r = parseInt(rgb[1], 16);
  const g = parseInt(rgb[2], 16);
  const b = parseInt(rgb[3], 16);
  return `rgb(${r},${g},$)`;
}

HSL顏色值轉(zhuǎn)換為RGB

HSL 為色相，飽和度，亮度。

function hslToRgb(hslValue) {
  const hsl = /hsl((d+),s*([d.]+)%,s*([d.]+)%)/g.exec(hslValue);
  const h = parseInt(hsl[1]) / 360;
  const s = parseInt(hsl[2]) / 100;
  const l = parseInt(hsl[3]) / 100;
  function hue2rgb(p, q, t) {
    if (t < 0) t += 1;
    if (t > 1) t -= 1;
    if (t < 1/6) return p + (q - p) * 6 * t;
    if (t < 1/2) return q;
    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
    return p;
  }
  let r, g, b;
  if (s == 0) {
    r = g = b = l;
  } else {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return `rgb(${r * 255},${g * 255},${b * 255})`;
}

代碼來(lái)源：https://github.com/juliangarn...

云服務(wù)器 GPU云服務(wù)器 RGB顏色值 js 顏色轉(zhuǎn)換rgb HEX和RGB轉(zhuǎn)換 js判斷正確跳轉(zhuǎn)頁(yè)面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91418.html

相關(guān)文章

自己動(dòng)手寫(xiě)個(gè)顏色類(lèi)庫(kù)：掌握JS中的位運(yùn)算符

摘要：在編寫(xiě)的過(guò)程中，涉及到了中的各種位運(yùn)算符，對(duì)進(jìn)制色值的處理不再是循環(huán)遍歷了。只對(duì)位運(yùn)算符感興趣的建議直接閱讀目錄中的色值的快速轉(zhuǎn)換。通過(guò)閱讀類(lèi)，可以知道最終屬性均為一個(gè)或構(gòu)造出來(lái)的對(duì)象，接下來(lái)就具體說(shuō)說(shuō)類(lèi)中的這些位運(yùn)算符起到了什么作用。從最近寫(xiě)的一個(gè)圖表庫(kù)中單獨(dú)抽象出來(lái)了顏色類(lèi)庫(kù)，功能包括HEX、RGB/RGBA以及HSL/HSLA各種色值的轉(zhuǎn)換以及顏色明暗變化。在編寫(xiě)的過(guò)程中，涉及...

yvonne 2019-08-20 10:24 評(píng)論0 收藏0
RGB、HSL、Hex網(wǎng)頁(yè)色彩碼，看完這篇全懂了

摘要：再來(lái)做個(gè)練習(xí)，如果我們想要黃色，那就是把紅色光跟綠色光混合起來(lái)，所以我們就把紅色光跟綠色光像這樣開(kāi)到最大，你就能夠看到黃色了。網(wǎng)頁(yè)使用到的色彩標(biāo)示方法中，從古早時(shí)期大家都在用的16進(jìn)位碼（#000000）、RGB色值標(biāo)示、HSL色彩標(biāo)示，其中網(wǎng)頁(yè)設(shè)計(jì)師最常使用的16進(jìn)位色碼標(biāo)示法，而16進(jìn)位碼又是如何計(jì)算色彩的呢？有沒(méi)有辦法直接腦袋就把色彩算出來(lái)？HSL色彩該如何運(yùn)用與記憶？有沒(méi)有什...

hightopo 2019-08-02 16:18 評(píng)論0 收藏0
RGB、HSL、Hex網(wǎng)頁(yè)色彩碼，看完這篇全懂了

摘要：再來(lái)做個(gè)練習(xí)，如果我們想要黃色，那就是把紅色光跟綠色光混合起來(lái)，所以我們就把紅色光跟綠色光像這樣開(kāi)到最大，你就能夠看到黃色了。網(wǎng)頁(yè)使用到的色彩標(biāo)示方法中，從古早時(shí)期大家都在用的16進(jìn)位碼（#000000）、RGB色值標(biāo)示、HSL色彩標(biāo)示，其中網(wǎng)頁(yè)設(shè)計(jì)師最常使用的16進(jìn)位色碼標(biāo)示法，而16進(jìn)位碼又是如何計(jì)算色彩的呢？有沒(méi)有辦法直接腦袋就把色彩算出來(lái)？HSL色彩該如何運(yùn)用與記憶？有沒(méi)有什...

miguel.jiang 2019-08-30 10:53 評(píng)論0 收藏0
CSS單位計(jì)算總結(jié)

摘要：?jiǎn)挝豢偨Y(jié)公共部分長(zhǎng)度像素，同一屏幕分辨率下是絕對(duì)單位。 CSS單位總結(jié) 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

zorpan 2019-08-02 11:52 評(píng)論0 收藏0
CSS單位計(jì)算總結(jié)

摘要：?jiǎn)挝豢偨Y(jié)公共部分長(zhǎng)度像素，同一屏幕分辨率下是絕對(duì)單位。 CSS單位總結(jié) 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

468122151 2019-08-29 17:06 評(píng)論0 收藏0