16進制顏色的沒一個分量用1到2位16進制數表示，紅色、綠色和藍色三種顏色中的每一種都可以取從 00 到 FF 的值。為了避免數字系統的定義混淆，十六進制數字前面帶有#，格式為#rrggbbaa，例如#0ABAB5FF。可以使用編碼類型的縮寫形式，格式為#rgba。#FC0等同于#FFCC00而不是#F0C000。

TypeScript是一種基于JavaScript的強類型編程語言，數據轉換時要求類型校驗，那么用TypeScript會更方便些。正則中?<value>用來給()里的分組命名，不命名groups屬性就是undefined。

hexRGB(A)→RGB(A)

const BASE = 16; const BYTE_MAX_VALUE = BASE * BASE; const RGB_MAX_VALUE = BYTE_MAX_VALUE - 1;function hexRGBA2RGBA(prop: any): number[] {const matchResult = `${prop}`.match(/^#?(?<value>[a-z0-9]*)$/i);if (!(matchResult && matchResult.groups)) {return [];}const rawColor = matchResult.groups.value;let colorStr: string = rawColor;let ret: number[] = [];ret[3] = RGB_MAX_VALUE;switch (rawColor.length) {case 3:case 4:let charList: string[] = rawColor.split('');for (let i = charList.length; i >= 0; i--) {charList.splice(i, 0, charList[i])}colorStr = charList.join('');case 6:case 8:let color: number[] | number = parseInt(colorStr, BASE);while (color > 0) {ret.unshift(color % BYTE_MAX_VALUE);color = Math.floor(color / BYTE_MAX_VALUE);}break;default:return [];}return ret; }

XYZ?RGB

XYZ色彩空間基于人眼 CIE RGB 版本的結果。是人眼在顏色方面的數學極限。XYZ 原色是假設的，因為它們不對應于任何真實的光波長。XYZ和RGB都采用加色模式。

/*** 將XYZ顏色轉換為RGB，參數范圍[0,255]。* @param x 紅色分量* @param y 綠色分量* @param z 藍色分量* @param a alpha分量* @returns RGB三元組。*/ function XYZ2RGB(x: number, y: number, z: number, a: number = 255) {const M = [[2.8510695, -1.3605261, -0.4708281],[-1.0927680, 2.0348871, 0.0227598],[0.1027403, -0.2964984, 1.4510659],];const COLOR_COUNT = 3;const xyz = [x / 255, y / 255, z / 255];const ret: Array<number> = [];for (let j = 0; j < COLOR_COUNT; j++) {let value: number = 0;for (let i = 0; i < COLOR_COUNT; i++) {value += M[j][i] * xyz[i]}ret.push(Math.floor(255 * Math.max(0, Math.min(value, 1))));}ret.push(a);return ret; }/*** 將RGB顏色轉換為XYZ，參數范圍[0,255]。* @param r 紅色分量* @param g 綠色分量* @param b 藍色分量* @param a alpha分量* @returns 理想三原色XYZ三元組。*/ function RGB2XYZ(r: number, g: number, b: number, a: number = 255) {const M = [[0.4755678, 0.3396722, 0.1489800],[0.2551812, 0.6725693, 0.0722496],[0.0184697, 0.1133771, 0.6933632],];const COLOR_COUNT = 3;const rgb = [r / 255, g / 255, b / 255];const ret: Array<number> = [];for (let y = 0; y < COLOR_COUNT; y++) {let value: number = 0;for (let x = 0; x < COLOR_COUNT; x++) {value += M[y][x] * rgb[x]}ret.push(Math.floor(255 * Math.max(0, Math.min(value, 1))));}ret.push(a);return ret; }

總結

以上是生活随笔為你收集整理的TS颜色格式转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。