TML 顏色由紅色、綠色、藍色混合而成。

顏色值

HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。

這個表格給出了由三種顏色混合而成的具體效果：

顏色值

1600萬種不同顏色

三種顏色 紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

在下面的顏色表中你會看到不同的結果，從0到255的紅色，同時設置綠色和藍色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。

灰暗色調

以下展示了灰色到黑色的漸變

Web安全色?

數(shù)年以前，當大多數(shù)計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數(shù)百萬種顏色，不過做選擇還是你自己。

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

者 | Adam Giese

譯者 | 王強

CSS 中有兩種顏色模型 RGB 和 HSL，如何用 JavaScript 控制它們？

背景知識：顏色模型

點開這篇文章的你，肯定是想要學習怎樣控制顏色的——我們后面就會講具體操作。但首先，我們需要對 CSS 如何標記顏色有一個基本的認識。CSS 使用的是兩種顏色模型：RGB 和 HSL，我們先簡單了解一下。

1、RGB

RGB 就是“紅色，綠色，藍色”的簡稱。這個模型由三個數(shù)字組成，每個數(shù)字表示其所代表的顏色在最終生成的顏色中有多高的亮度。在 CSS 中，每個數(shù)值的范圍都是 0-255，三個數(shù)值間用逗號分隔，作為 CSS rgb 函數(shù)的參數(shù)，例如：rgb（50,100,0）。

RGB 是一種“增量”顏色系統(tǒng)。這意味著每個數(shù)字越高，最終生成的顏色就越亮。如果所有值都相等就生成灰度顏色；如果所有值都為零，結果為黑色；如果所有值都是 255，則結果為白色。

此外你也可以使用十六進制表示法來標記 RGB 顏色，其中每種顏色的數(shù)值從 10 進制轉換為 16 進制。例如，rgb（50,100,0）用 16 進制就寫成＃326400。

雖然我個人比較習慣使用 RGB 模型（特別是十六進制），但我也經(jīng)常發(fā)現(xiàn)它不易閱讀，也不容易操作。下面來看 HSL 模型。

2、HSL

HSL（https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612）是“色調，飽和度，光線”的簡稱，HSL 也包含三個值。色調值對應于色輪上的點，由 CSS 角度值表示，最常用的是度數(shù)單位。

飽和度以百分比表示，是指顏色的強度。當飽和度為 100％時顏色最深，飽和度越低，顏色越淺，直到灰度為 0％。

亮度也以百分比表示，指的是顏色有多亮。“常規(guī)”的亮度是 50％。無論色調和飽和度值如何，100％的亮度都是純白色，0％的亮度就是純黑色。

我覺得 HSL 模型更直觀一些，顏色之間的關系更加明顯，控制顏色時只要簡單地調整幾個數(shù)字就可以了。

3、顏色模型之間的轉換

RGB 和 HSL 顏色模型都將顏色分解為各種屬性。要在不同模型之間進行轉換，我們首先需要計算這些屬性。

除了色調，上面提到的所有數(shù)值都可以表示為百分比。就連 RGB 值也是用字節(jié)表示的百分比。在下面提到的公式和函數(shù)中，這些百分比將由 0 到 1 之間的小數(shù)來表示。

這里提一下，我并不會深入探討這些數(shù)學知識；相比之下，我將簡要介紹一遍原始數(shù)學公式，然后將其轉換為 JavaScript 格式。

4、從 RGB 模型中計算亮度

亮度是三個 HSL 值中最容易計算的一個。其數(shù)學式如下，其中 M 是 RGB 值的最大值，m 是最小值：

亮度的數(shù)學式

用 JavaScript 函數(shù)寫成下面的形式：

const rgbToLightness =（r，g，b）=>
 1/2 *（Math.max（r，g，b）+ Math.min（r，g，b））;

5、從 RGB 模型中計算飽和度

飽和度僅比亮度稍微復雜一些。如果亮度為 0 或 1，則飽和度值為 0；否則，它基于下面的數(shù)學公式計算得出，其中 L 表示亮度：

飽和度的數(shù)學式

寫成 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 模型中計算色調

從 RGB 坐標中計算色調角度的公式有點復雜：

色調的數(shù)學式

寫成 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 的算法是將結果從弧度轉換為度。

7、計算 HSL

上面這些函數(shù)都可以包含在同一個功能函數(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 模型中計算 RGB 值

開始計算 RGB 之前，我們需要一些前提值。

首先是“色度”值：

色度的數(shù)學式

還有一個臨時的色調值，我們將用它來確定我們所屬的色調圈的“段”：

色調區(qū)間的數(shù)學式

接下來，我們設一個“x”值，它將用作中間（第二大）組件值：

臨時“x”值的數(shù)學式

我們再設一個“m”值，用于調整各個亮度值：

亮度匹配的數(shù)學式

根據(jù)色調區(qū)間值，r，g 和 b 值將映射到 C，X 和 0：

RGB 值的數(shù)學式，不考慮亮度

最后，我們需要映射每個值以調整亮度：

用 RGB 來解釋亮度的數(shù)學式

將上面這些都寫到 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)建顏色對象

為了便于在操作屬性時訪問，我們將創(chuàng)建一個 JavaScript 對象。把前面提到的這些函數(shù)打包起來就能創(chuàng)建這個對象：

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、示例

我強烈建議你花些時間看看這個示例：

https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683faf668

從中了解調節(jié)各個屬性時其它屬性如何發(fā)生變化，這樣能幫助你更深入地了解兩種顏色模型是如何對應的。

顏色控制

現(xiàn)在我們已經(jīng)知道怎樣在顏色模型之間進行轉換了，那么就來看看該如何控制這些顏色！

1、更新屬性

我們提到的所有顏色屬性都可以單獨控制，返回一個新的顏色對象。例如，我們可以編寫一個旋轉色調角度的函數(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ù)會接受一個旋轉參數(shù)并返回一個新函數(shù)，該函數(shù)接受并返回一個顏色對象。這樣就可以輕松創(chuàng)建新的“旋轉”函數(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 方法會接受一個謂詞并返回一個新數(shù)組，其中包含所有“傳遞”的元素。我們在上一節(jié)中編寫的謂詞可以用在這里：

const colors = [/* ... an array of color objects ... */];
const isLight = ({lightness}) => lightness > .5;
const lightColors = colors.filter(isLight);

排序

要對顏色數(shù)組進行排序，首先需要編寫一個“比較器”函數(shù)。此函數(shù)接受一個數(shù)組的兩個元素并返回一個數(shù)字來表示“贏家”。正數(shù)表示第一個元素應該先排序，而負數(shù)表示第二個元素應該先排序。零值表示平局。

例如，這是一個比較兩種顏色亮度的函數(shù)：

const compareLightness = (a,b) => a.lightness - b.lightness;

這是一個比較飽和度的函數(shù)：

const compareSaturation = (a,b) => a.saturation - b.saturation;

為了防止代碼重復，我們可以編寫一個高階函數(shù)來返回一個比較函數(shù)來對比各種屬性：

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 屬性分割來計算一個屬性的均值：

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、結論

顏色是網(wǎng)絡不可或缺的一部分。將顏色分解為屬性就可以靈活控制它們，并創(chuàng)造出無限的可能。

查看英文原文：

https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8

福利推薦

前端領域的技術演進一直要比其他技術快一些，這給前端工程師帶來持續(xù)的挑戰(zhàn)。這里整理了從 Vue 到 React、iOS 到 Andoid、再到前端架構體系的干貨課程，帶你解讀從前端小工到專家的實戰(zhàn)心法，高效解決 80% 的開發(fā)難題。

tml代碼里，表示顏色一般用兩種方法，一種是直接寫出顏色的英文，另一種是前面寫個“#”后面再寫6個數(shù)字字母。

先說第一種表示方法，這個很簡單，如果要表示黑色直接就是black，紅色就red，藍色就blue。具體的我們看下面圖1，圖2

現(xiàn)在來說第二種，這也是我們這個文章要重點說的，因為這個也是最經(jīng)常用的表示方法，很多人看到這個又是字數(shù)又是字母的就糊涂了，今天我們來詳細的把它講清楚。先用圖片來說明一下，先看下面圖3

圖3里的#000000表示的是黑色，#ff0000表示紅色，#00ff00表示綠色，所以說這個效果是和圖1一樣的。那要怎么理解這種表示顏色的方法呢，我們再來列出幾個顏色和它的表示法：

紅色：#ff0000，綠色：#00ff00，藍色：#0000ff， 大家仔細看一下就可發(fā)現(xiàn)，這個和我們平常說的RGB格式來表示顏色是一樣的，相當于紅綠藍三個光，而f是十六進制中的0,1,2,.....e,f中的f了 。f是里面的最大值了，ff代表該顏色光的值達到最大，所以#ff0000是紅色，#880000表示的也是紅色，只是沒有#ff0000這個那么紅了。其他的也是同理。所以#000000代表三個顏色光的值都為0，沒有任何光了，那就是黑色了，相反#ffffff代表三個顏色光的值都達到最大，混合在一起就成白色。我們也知道紅光和藍光混在一起是紫色的，所以#ff00ff表示的是紫色，同樣#ffff00表示的是黃色。講到這里相信大家應該都明白了怎樣用這種方法表示顏色了吧，如果要表示一種顏色，只要把相應的值增加或減小或者添加另一個顏色，這樣就可以得到千千萬萬種顏色了。

這兩種表示顏色的方法都講完了，尤其是第二種方法，大部分情況都是用這種方法來表示html里面的顏色的。如果大家有什么更好的更容易理解的想法，可以點擊關注【點點有你】一起來討論一下哦

最后，如果您覺得我寫的這些文章對您有幫助的話，您可以根據(jù)您的情況隨意給點賞金，我相信一分也是愛也是支持，下面兩圖是我的支付寶和微信收款碼。當然寫文章不是一定要讓您給賞金的，有您的支持和贊助，我會有更多動力來寫文章和大家分享的，再次感謝您的支持和理解！