摘要:顏色值判斷顏色值轉換為顏色值轉換為為色相,飽和度,亮度。
顏色值判斷
/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test("#009a61") /^rgb/.test("rgb(0, 154, 97)") /^hsl/.test("hsl(0, 0%, 20%)")HEX顏色值轉換為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顏色值轉換為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})`; }
代碼來源:https://github.com/juliangarn...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91418.html
摘要:在編寫的過程中,涉及到了中的各種位運算符,對進制色值的處理不再是循環遍歷了。只對位運算符感興趣的建議直接閱讀目錄中的色值的快速轉換。通過閱讀類,可以知道最終屬性均為一個或構造出來的對象,接下來就具體說說類中的這些位運算符起到了什么作用。 從最近寫的一個圖表庫中單獨抽象出來了顏色類庫,功能包括HEX、RGB/RGBA以及HSL/HSLA各種色值的轉換以及顏色明暗變化。在編寫的過程中,涉及...
摘要:再來做個練習,如果我們想要黃色,那就是把紅色光跟綠色光混合起來,所以我們就把紅色光跟綠色光像這樣開到最大,你就能夠看到黃色了。 網頁使用到的色彩標示方法中,從古早時期大家都在用的16進位碼(#000000)、RGB色值標示、HSL色彩標示,其中網頁設計師最常使用的16進位色碼標示法,而16進位碼又是如何計算色彩的呢?有沒有辦法直接腦袋就把色彩算出來?HSL色彩該如何運用與記憶?有沒有什...
摘要:再來做個練習,如果我們想要黃色,那就是把紅色光跟綠色光混合起來,所以我們就把紅色光跟綠色光像這樣開到最大,你就能夠看到黃色了。 網頁使用到的色彩標示方法中,從古早時期大家都在用的16進位碼(#000000)、RGB色值標示、HSL色彩標示,其中網頁設計師最常使用的16進位色碼標示法,而16進位碼又是如何計算色彩的呢?有沒有辦法直接腦袋就把色彩算出來?HSL色彩該如何運用與記憶?有沒有什...
閱讀 1049·2021-11-18 10:02
閱讀 1304·2021-09-23 11:22
閱讀 2607·2021-08-21 14:08
閱讀 1636·2019-08-30 15:55
閱讀 1720·2019-08-30 13:45
閱讀 3141·2019-08-29 16:52
閱讀 3092·2019-08-29 12:18
閱讀 1636·2019-08-26 13:36