整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者 | Adam Giese
譯者 | 王強(qiáng)
CSS 中有兩種顏色模型 RGB 和 HSL，如何用 JavaScript 控制它們？
點(diǎn)開這篇文章的你，肯定是想要學(xué)習(xí)怎樣控制顏色的——我們后面就會(huì)講具體操作。但首先，我們需要對(duì) CSS 如何標(biāo)記顏色有一個(gè)基本的認(rèn)識(shí)。CSS 使用的是兩種顏色模型：RGB 和 HSL，我們先簡(jiǎn)單了解一下。
1、RGB
RGB 就是“紅色，綠色，藍(lán)色”的簡(jiǎn)稱。這個(gè)模型由三個(gè)數(shù)字組成，每個(gè)數(shù)字表示其所代表的顏色在最終生成的顏色中有多高的亮度。在 CSS 中，每個(gè)數(shù)值的范圍都是 0-255，三個(gè)數(shù)值間用逗號(hào)分隔，作為 CSS rgb 函數(shù)的參數(shù)，例如：rgb（50,100,0）。
RGB 是一種“增量”顏色系統(tǒng)。這意味著每個(gè)數(shù)字越高，最終生成的顏色就越亮。如果所有值都相等就生成灰度顏色；如果所有值都為零，結(jié)果為黑色；如果所有值都是 255，則結(jié)果為白色。
此外你也可以使用十六進(jìn)制表示法來標(biāo)記 RGB 顏色，其中每種顏色的數(shù)值從 10 進(jìn)制轉(zhuǎn)換為 16 進(jìn)制。例如，rgb（50,100,0）用 16 進(jìn)制就寫成＃326400。
雖然我個(gè)人比較習(xí)慣使用 RGB 模型（特別是十六進(jìn)制），但我也經(jīng)常發(fā)現(xiàn)它不易閱讀，也不容易操作。下面來看 HSL 模型。
2、HSL
HSL（https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612）是“色調(diào)，飽和度，光線”的簡(jiǎn)稱，HSL 也包含三個(gè)值。色調(diào)值對(duì)應(yīng)于色輪上的點(diǎn)，由 CSS 角度值表示，最常用的是度數(shù)單位。
飽和度以百分比表示，是指顏色的強(qiáng)度。當(dāng)飽和度為 100％時(shí)顏色最深，飽和度越低，顏色越淺，直到灰度為 0％。
亮度也以百分比表示，指的是顏色有多亮。“常規(guī)”的亮度是 50％。無論色調(diào)和飽和度值如何，100％的亮度都是純白色，0％的亮度就是純黑色。
我覺得 HSL 模型更直觀一些，顏色之間的關(guān)系更加明顯，控制顏色時(shí)只要簡(jiǎn)單地調(diào)整幾個(gè)數(shù)字就可以了。
3、顏色模型之間的轉(zhuǎn)換
RGB 和 HSL 顏色模型都將顏色分解為各種屬性。要在不同模型之間進(jìn)行轉(zhuǎn)換，我們首先需要計(jì)算這些屬性。
除了色調(diào)，上面提到的所有數(shù)值都可以表示為百分比。就連 RGB 值也是用字節(jié)表示的百分比。在下面提到的公式和函數(shù)中，這些百分比將由 0 到 1 之間的小數(shù)來表示。
這里提一下，我并不會(huì)深入探討這些數(shù)學(xué)知識(shí)；相比之下，我將簡(jiǎn)要介紹一遍原始數(shù)學(xué)公式，然后將其轉(zhuǎn)換為 JavaScript 格式。
4、從 RGB 模型中計(jì)算亮度
亮度是三個(gè) HSL 值中最容易計(jì)算的一個(gè)。其數(shù)學(xué)式如下，其中 M 是 RGB 值的最大值，m 是最小值：
亮度的數(shù)學(xué)式
用 JavaScript 函數(shù)寫成下面的形式：
const rgbToLightness =（r，g，b）=> 1/2 *（Math.max（r，g，b）+ Math.min（r，g，b））;
5、從 RGB 模型中計(jì)算飽和度
飽和度僅比亮度稍微復(fù)雜一些。如果亮度為 0 或 1，則飽和度值為 0；否則，它基于下面的數(shù)學(xué)公式計(jì)算得出，其中 L 表示亮度：
飽和度的數(shù)學(xué)式
寫成 JavaScript：
const rgbToSaturation = (r,g,b) => {
const L = rgbToLightness(r,g,b);
const max = Math.max(r,g,b);
const min = Math.min(r,g,b);
return (L === 0 || L === 1)
? 0
: (max - min)/(1 - Math.abs(2 * L - 1));
};
6、從 RGB 模型中計(jì)算色調(diào)
從 RGB 坐標(biāo)中計(jì)算色調(diào)角度的公式有點(diǎn)復(fù)雜：
色調(diào)的數(shù)學(xué)式
寫成 JavaScript：
const rgbToHue = (r,g,b) => Math.round( Math.atan2( Math.sqrt(3) * (g - b), 2 * r - g - b, ) * 180 / Math.PI );
最后 180 / Math.PI 的算法是將結(jié)果從弧度轉(zhuǎn)換為度。
7、計(jì)算 HSL
上面這些函數(shù)都可以包含在同一個(gè)功能函數(shù)里：
const rgbToHsl = (r,g,b) => {
const lightness = rgbToLightness(r,g,b);
const saturation = rgbToSaturation(r,g,b);
const hue = rgbToHue(r,g,b);
return [hue, saturation, lightness];
}
8、從 HSL 模型中計(jì)算 RGB 值
開始計(jì)算 RGB 之前，我們需要一些前提值。
首先是“色度”值：
色度的數(shù)學(xué)式
還有一個(gè)臨時(shí)的色調(diào)值，我們將用它來確定我們所屬的色調(diào)圈的“段”：
色調(diào)區(qū)間的數(shù)學(xué)式
接下來，我們?cè)O(shè)一個(gè)“x”值，它將用作中間（第二大）組件值：
臨時(shí)“x”值的數(shù)學(xué)式
我們?cè)僭O(shè)一個(gè)“m”值，用于調(diào)整各個(gè)亮度值：
亮度匹配的數(shù)學(xué)式
根據(jù)色調(diào)區(qū)間值，r，g 和 b 值將映射到 C，X 和 0：
RGB 值的數(shù)學(xué)式，不考慮亮度
最后，我們需要映射每個(gè)值以調(diào)整亮度：
用 RGB 來解釋亮度的數(shù)學(xué)式
將上面這些都寫到 JavaScript 函數(shù)中：
const hslToRgb = (h,s,l) => {
const C = (1 - Math.abs(2 * l - 1)) * s;
const hPrime = h / 60;
const X = C * (1 - Math.abs(hPrime % 2 - 1));
const m = l - C/2;
const withLight = (r,g,b) => [r+m, g+m, b+m];
if (hPrime <= 1) { return withLight(C,X,0); } else
if (hPrime <= 2) { return withLight(X,C,0); } else
if (hPrime <= 3) { return withLight(0,C,X); } else
if (hPrime <= 4) { return withLight(0,X,C); } else
if (hPrime <= 5) { return withLight(X,0,C); } else
if (hPrime <= 6) { return withLight(C,0,X); }
}
9、創(chuàng)建顏色對(duì)象
為了便于在操作屬性時(shí)訪問，我們將創(chuàng)建一個(gè) JavaScript 對(duì)象。把前面提到的這些函數(shù)打包起來就能創(chuàng)建這個(gè)對(duì)象：
const rgbToObject = (red,green,blue) => {
const [hue, saturation, lightness] = rgbToHsl(red, green, blue);
return {red, green, blue, hue, saturation, lightness};
}
const hslToObject = (hue, saturation, lightness) => {
const [red, green, blue] = hslToRgb(hue, saturation, lightness);
return {red, green, blue, hue, saturation, lightness};
}
10、示例
我強(qiáng)烈建議你花些時(shí)間看看這個(gè)示例：
https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683faf668
從中了解調(diào)節(jié)各個(gè)屬性時(shí)其它屬性如何發(fā)生變化，這樣能幫助你更深入地了解兩種顏色模型是如何對(duì)應(yīng)的。
現(xiàn)在我們已經(jīng)知道怎樣在顏色模型之間進(jìn)行轉(zhuǎn)換了，那么就來看看該如何控制這些顏色！
1、更新屬性
我們提到的所有顏色屬性都可以單獨(dú)控制，返回一個(gè)新的顏色對(duì)象。例如，我們可以編寫一個(gè)旋轉(zhuǎn)色調(diào)角度的函數(shù)：
const rotateHue = rotation => ({hue, ...rest}) => {
const modulo = (x, n) => (x % n + n) % n;
const newHue = modulo(hue + rotation, 360);
return { ...rest, hue: newHue };
}
rotateHue 函數(shù)會(huì)接受一個(gè)旋轉(zhuǎn)參數(shù)并返回一個(gè)新函數(shù)，該函數(shù)接受并返回一個(gè)顏色對(duì)象。這樣就可以輕松創(chuàng)建新的“旋轉(zhuǎn)”函數(shù)：
const rotate30 = rotateHue(30);
const getComplementary = rotateHue(180);
const getTriadic = color => {
const first = rotateHue(120);
const second = rotateHue(-120);
return [first(color), second(color)];
}
用這種方式，你也可以編寫加深或提亮顏色的函數(shù)——或者反過來，減淡或變暗也行。
const saturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.min(1, saturation + x),
});
const desaturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.max(0, saturation - x),
});
const lighten = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.min(1, lightness + x)
});
const darken = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.max(0, lightness - x)
});
2、顏色謂詞
除了顏色控制以外，你還可以編寫“謂詞”——亦即返回布爾值的函數(shù)。
const isGrayscale = ({saturation}) => saturation === 0;
const isDark = ({lightness}) => lightness < .5;
3、處理顏色數(shù)組
過濾器
JavaScript [] .filter 方法會(huì)接受一個(gè)謂詞并返回一個(gè)新數(shù)組，其中包含所有“傳遞”的元素。我們?cè)谏弦还?jié)中編寫的謂詞可以用在這里：
const colors = [/* ... an array of color objects ... */];
const isLight = ({lightness}) => lightness > .5;
const lightColors = colors.filter(isLight);
排序
要對(duì)顏色數(shù)組進(jìn)行排序，首先需要編寫一個(gè)“比較器”函數(shù)。此函數(shù)接受一個(gè)數(shù)組的兩個(gè)元素并返回一個(gè)數(shù)字來表示“贏家”。正數(shù)表示第一個(gè)元素應(yīng)該先排序，而負(fù)數(shù)表示第二個(gè)元素應(yīng)該先排序。零值表示平局。
例如，這是一個(gè)比較兩種顏色亮度的函數(shù)：
const compareLightness = (a,b) => a.lightness - b.lightness;
這是一個(gè)比較飽和度的函數(shù)：
const compareSaturation = (a,b) => a.saturation - b.saturation;
為了防止代碼重復(fù)，我們可以編寫一個(gè)高階函數(shù)來返回一個(gè)比較函數(shù)來對(duì)比各種屬性：
const compareAttribute = attribute =>
(a,b) => a[attribute] - b[attribute];
const compareLightness = compareAttribute('lightness');
const compareSaturation = compareAttribute('saturation');
const compareHue = compareAttribute('hue');
平均屬性
你可以搭配各種 JavaScript 數(shù)組方法來平衡顏色數(shù)組中的特定屬性。首先，你可以使用 reduce 求和并用 Array length 屬性分割來計(jì)算一個(gè)屬性的均值：
const colors = [/* ... an array of color objects ... */]; const toSum = (a,b) => a + b; const toAttribute = attribute => element => element[attribute]; const averageOfAttribute = attribute => array => array.map(toAttribute(attribute)).reduce(toSum) / array.length;
你可以用它來“規(guī)范化”一組顏色：
/* ... continuing */
const normalizeAttribute = attribute => array => {
const averageValue = averageOfAttribute(attribute)(array);
const normalize = overwriteAttribute(attribute)(averageValue);
return normalize(array);
}
const normalizeSaturation = normalizeAttribute('saturation');
const normalizeLightness = normalizeAttribute('lightness');
const normalizeHue = normalizeAttribute('hue');
4、結(jié)論
顏色是網(wǎng)絡(luò)不可或缺的一部分。將顏色分解為屬性就可以靈活控制它們，并創(chuàng)造出無限的可能。
查看英文原文：
https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8
福利推薦
前端領(lǐng)域的技術(shù)演進(jìn)一直要比其他技術(shù)快一些，這給前端工程師帶來持續(xù)的挑戰(zhàn)。這里整理了從 Vue 到 React、iOS 到 Andoid、再到前端架構(gòu)體系的干貨課程，帶你解讀從前端小工到專家的實(shí)戰(zhàn)心法，高效解決 80% 的開發(fā)難題。
tml代碼里，表示顏色一般用兩種方法，一種是直接寫出顏色的英文，另一種是前面寫個(gè)“#”后面再寫6個(gè)數(shù)字字母。
先說第一種表示方法，這個(gè)很簡(jiǎn)單，如果要表示黑色直接就是black，紅色就red，藍(lán)色就blue。具體的我們看下面圖1，圖2
圖1
圖2
現(xiàn)在來說第二種，這也是我們這個(gè)文章要重點(diǎn)說的，因?yàn)檫@個(gè)也是最經(jīng)常用的表示方法，很多人看到這個(gè)又是字?jǐn)?shù)又是字母的就糊涂了，今天我們來詳細(xì)的把它講清楚。先用圖片來說明一下，先看下面圖3
圖3
圖3里的#000000表示的是黑色，#ff0000表示紅色，#00ff00表示綠色，所以說這個(gè)效果是和圖1一樣的。那要怎么理解這種表示顏色的方法呢，我們?cè)賮砹谐鰩讉€(gè)顏色和它的表示法：
紅色：#ff0000，綠色：#00ff00，藍(lán)色：#0000ff， 大家仔細(xì)看一下就可發(fā)現(xiàn)，這個(gè)和我們平常說的RGB格式來表示顏色是一樣的，相當(dāng)于紅綠藍(lán)三個(gè)光，而f是十六進(jìn)制中的0,1,2,.....e,f中的f了 。f是里面的最大值了，ff代表該顏色光的值達(dá)到最大，所以#ff0000是紅色，#880000表示的也是紅色，只是沒有#ff0000這個(gè)那么紅了。其他的也是同理。所以#000000代表三個(gè)顏色光的值都為0，沒有任何光了，那就是黑色了，相反#ffffff代表三個(gè)顏色光的值都達(dá)到最大，混合在一起就成白色。我們也知道紅光和藍(lán)光混在一起是紫色的，所以#ff00ff表示的是紫色，同樣#ffff00表示的是黃色。講到這里相信大家應(yīng)該都明白了怎樣用這種方法表示顏色了吧，如果要表示一種顏色，只要把相應(yīng)的值增加或減小或者添加另一個(gè)顏色，這樣就可以得到千千萬萬種顏色了。
這兩種表示顏色的方法都講完了，尤其是第二種方法，大部分情況都是用這種方法來表示html里面的顏色的。如果大家有什么更好的更容易理解的想法，可以點(diǎn)擊關(guān)注【點(diǎn)點(diǎn)有你】一起來討論一下哦
最后，如果您覺得我寫的這些文章對(duì)您有幫助的話，您可以根據(jù)您的情況隨意給點(diǎn)賞金，我相信一分也是愛也是支持，下面兩圖是我的支付寶和微信收款碼。當(dāng)然寫文章不是一定要讓您給賞金的，有您的支持和贊助，我會(huì)有更多動(dòng)力來寫文章和大家分享的，再次感謝您的支持和理解！
官網(wǎng)是這樣介紹的：使用我們的顏色選擇器、顏色表和HTML顏色名稱來獲取HTML顏色代碼、Hex顏色代碼、RGB和HSL值。即刻開始吧！
尋找完美色彩從未如此簡(jiǎn)單，使用我們的HTML顏色選擇器來瀏覽上百萬的顏色和色彩搭配。
顏色選擇器
顏色選擇器動(dòng)圖
操作：
選取顏色
點(diǎn)擊左側(cè)顏色樣本將其添加到您的調(diào)色板。
保存顏色
在您的調(diào)色板上保存和撤銷保存顏色；下次您訪問時(shí)候它們會(huì)在這里。
導(dǎo)出顏色
將您當(dāng)前的調(diào)色板以Hex、RGB、HTML、CSS和SCSS 格式輸出。試一下吧！
有了這些扁平化設(shè)計(jì)、Material Design和網(wǎng)頁安全顏色表，一定可以為您的網(wǎng)頁或應(yīng)用程序找到完美的色彩方案 – 只需不停地尋找！
顏色表
顏色表動(dòng)圖
現(xiàn)代瀏覽器支持140種已命名的顏色，如下所列。根據(jù)名稱、Hex代碼或RGB值將其用于您的HTML和CSS。
顏色名
如何使用HTML顏色名
之所以建立HTML顏色代碼，是因?yàn)槲覀冋J(rèn)為設(shè)計(jì)工具本身有應(yīng)有精良的設(shè)計(jì)。如果您喜歡這個(gè)網(wǎng)站或有何建議與反饋，歡迎您隨時(shí)發(fā)電子郵件與我們聯(lián)系
同時(shí)這個(gè)網(wǎng)站還有其他有趣好玩的分享，比如最佳調(diào)色板生成器（選擇完美的色彩方案是任何網(wǎng)站或項(xiàng)目的關(guān)鍵部分，為了幫助您找尋完美的顏色組合，我們已將今天最佳的調(diào)色板生成器和網(wǎng)絡(luò)工具收集在一起編成列表），終極指南免費(fèi)庫存照片（每個(gè)網(wǎng)站都需要很好的創(chuàng)造力，所以我們將最喜愛的可獲得免版稅圖庫照片的地方匯集做成特贊的列表。沒錯(cuò)，全部是魅力圖庫圖片，100%免費(fèi)），如何根據(jù)顏色搜索圖片（搜索與您的顏色方案相匹配的圖片可能會(huì)相當(dāng)耗時(shí)，所以我們把最愛的圖片搜索工具列成了一個(gè)簡(jiǎn)短的清單，這些工具可以使用顏色對(duì)其搜索結(jié)果加以過濾或完善）等等
最后說一遍，這個(gè)網(wǎng)站有中文，有中文，有中文
網(wǎng)址分享，打開馨客棧導(dǎo)航：http://www.mackxin.com/nav.html
然后找到下圖所示：
在線HTML顏色代碼
更多分享，請(qǐng)關(guān)注馨客棧
關(guān)注分享，體驗(yàn)樂趣
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
