整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
謝你關注“最佳應用”
每篇文章解決某行業或某人群的一個痛點
第五十三期原創文章
By：小佳
國慶小長假即將結束，不知道朋友們過的怎么樣，今年這個小長假小佳基本都在朋友的婚禮中度過，從今天開始對我而言小長假已經結束，正式開始投入工作中，繼續為大家分享好玩、有趣且實用的軟件工具。
今天這篇文章的靈感來源于我的大學老師，之前上設計課的時候，記得老師給我們分享過3個配色網站，當時看了還是相當驚訝和喜歡，但最近我才發現原來關于配色的優質網站工具實在太多，而且遠比老師分享的好。
今天小佳就分享10個我最近整理且收藏的“配色”網站工具。
雙色調生成器是一個可以將任何圖片都能一鍵生成雙色圖的在線工具，目前擁有15種雙色調，一種灰色調，生成的圖片更加擁有統一性。
通過這個工具，你可以直接將平臺本身的圖片生成各種雙色調圖片，也可以直接上傳自己的本地的圖片生成，點擊左側雙色調即可更換。
生成的圖片下載也是非常簡單，點擊上方的「下載」按鈕即可下載。
這個網站最大的用處我覺得是生成統一配色的圖片，對于經常要制作PPT或者網站視頻內容封面的人來說相當實用，而且方便高效。
這個是國外一個超棒的漸變顏色網站，網站目前擁有幾百個漂亮的配色方案，支持下載漸變圖，也可以直接查看色號。
平時經常用PS做設計的朋友，配色絕對是剛需，小佳制作封面的時候，有時候也會考慮到背景顏色，這里尋找漸變的背景還是不錯的。
這個配色網站在設計行業基本人人都會知道，這個也是當年我上設計課的時候老師推薦我們的，當時第一感覺就是中國色真的漂亮。
光是紅色就有幾十種紅色，估計能全部認出來的沒幾個。
這個網站收集中國特色的顏色，網站排版也是非常漂亮，每一種顏色都有對應的CMYK和RGB數值，可以方便的用到其他設計軟件。
這個也是一個非常不錯的配色網站，整體色調偏柔和和女性化一點，對于喜歡小清新設計風格的人來說，這個網站值得收藏。
對于你喜歡的配色，你可以直接查看顏色的數值，額可以復制CSS，點擊右上角可以直接下載配色的PNG圖片。
這個網站最大的功能就是分析圖片的顏色，比如我們平時看到一張非常不錯的海報，想要學習人家的配色，你可以用手機拍攝下來。
點擊「上傳」直接上傳想要分析色彩的圖片。
我特意將今天的文章封面的圖片上傳上去，直接將圖片的所有配色都顯出了，你可以隨意查看顏色數值。
此外，這個網站本身也提供了不少主流的配色方案。
最后一個就是色卡功能，平臺收集了很多不錯的顏色，看到自己喜歡的顏色，可以將色顏色數值記錄下來，然后直接使用。
這是一個互動性很強的配色網站，左邊可以選擇2種、3種、4種及多種顏色搭配，右側會直接將這些顏色所有的搭配方案都展現。
我特意給大家錄制的一個動圖，大家可以看看效果。
網頁下方會根據你上面選擇的顏色搭配展示一些搭配后的設計效果，對于一些經常需要扁平化設計的朋友來說非常實用。
這個網站是我最喜歡的網站之一，通過大自然的植物，山水，風景等生成的舒適自然的顏色搭配，讓設計更加富有靈動性。
而且網站可以根據顏色尋找自然風光搭配，擁有春夏秋冬四大分類。
每種顏色都有對應的顏色代碼，你可以輕松復制使用。
這個網站對于找配圖的人來說非常實用，經常做PPT想要插入各種圖片，而且想要色調一致，這個網站完全可以搞定。
左側是圖片的類型，右側可以直接選擇想要的色調，所有的配圖都會自動更改為你選擇的顏色，做幾張對比圖看看效果。
重點是里面的插圖可以直接商用，點擊可以下載PNG和SVG兩種格式，而且還沒有任何水印，使用起來就比較方便了。
以上這8個網站是小佳從全球上百個色彩搭配網站中找到的最佳網站，每一個都經過我仔細的測評才推薦給大家。
相信對于很多學生和設計師朋友而言，這類網站相當實用，其實無論是否從事設計，偶爾打開這些網站看看，絕對對自己的審美也有很大幫助。
關注我的頭條號，私信回復「配色」獲取所有網站
們在做網頁時，經常會用到十六進制顏色代碼，一個漂亮的網頁，它的顏色搭配必定有講究，下表是一些常用的顏色及十六進制顏色代碼對照，記錄在此，以便查閱！
CSS技術中，許多屬性都要用到顏色取值，例如background-color、border-color、outline-color等。本文主要為大家講解顏色的三個要素，以及各種顏色取值的格式和原理。
承接文章：頁面不受客戶字體安裝限制，CSS3的服務器端字體，使用起來很方便
技術等級：中級 | 適合有一定的CSS基礎人士閱讀。
一、顏色的三要素：
顏色的三要素
顏色是由波長不同的電磁波產生的。在人們的生活中，顏色對于大多數人來說是一個籠統的概念。我們經常會說“這件毛衣是紅色的”，或者“我今天看上了一個藍色的包包”等等。這些說法反映了人們對于顏色最直觀的認識。
要想讓計算機也能識別顏色，上述這些最直觀的認識是遠遠不夠的。計算機之所以能夠調整出各種顏色，是因為我們用三個非常重要的要素明確了顏色的最終顯示。也就是說，計算機只要確定了這三個要素，顏色也就確定了下來。
顏色的三要素是：
色相
明度
飽和度
色相（Hue），被定義為“色彩的相貌”。就是我們俗稱的“什么顏色”。全色譜色相包括七種，它們分別是：紅、橙、黃、綠、青、藍、紫。要想確定顏色，首先要明確色相。色相的取值范圍是0-360，單位為度。正好構成了一個圓形，也被人們稱為“色相環”。
色相環
大家可以一起來看上圖的色相環，0度表示的是紅色，90度表示的是綠色，與紅色相對的180度為青色，270度表示的是藍色，最后360度又回到了紅色。這就是構成顏色第一個像素的最基本的七種顏色。
飽和度（Saturation），被定義為“顏色的純度”，取值范圍是0%-100%。一個顏色的飽和度取值為100%，說明該顏色沒有添加其他顏色，或者說這時的顏色最純。一個顏色的飽和度取值為0%，就變成了灰色。
飽和度
明度（Brightness），被定義為“顏色的亮度”，取值范圍是0%-100%。一個顏色的明度取值為100%，說明這時的顏色最亮。一個顏色的明度取值為0%，就變成了黑色。
我們看一看Photoshop中的拾色器，會對這三個要素理解得更加透徹。
Photoshop 拾色器
Photoshop的拾色器中，指示HSB的三個文本框就分別表示色相、飽和度、明度。中間的豎行就是色相環，可以看出，從下向上分別是全色譜色相中的七個顏色。最下方是紅色，最上方也是紅色。左側最大的矩形區域是用來調整飽和度和明度的。
大家可以試一試，在這個區域水平拖拽鼠標，調整的是飽和度，也就是S項，最左側為灰色，最右側為最飽和的色相顏色。在這個區域垂直拖拽鼠標，調整的是明度，也就是B項，最底部是黑色，最頂部是最亮的色相顏色。
二、RGB顏色代碼：
RGB是一種在電子設備上使用的顏色模式，這種顏色模式利用三種基本的顏色混合得到成千上萬的顏色。這三種基本的顏色就是R（紅色）、G（綠色）、B（藍色）。
在這種顏色模式中，三種基本顏色中的任意一種取值范圍是0-255，十六進制表示為0-FF。當取值為0時，表示最終的顏色里不包含這種基本顏色。當取值為255或者FF時，表示最終的顏色里包含最多的這種基本顏色。
RGB顏色代碼一般采用十六進制的形式表示。要求以#開頭，用六位十六進制數值組成。前兩位表示紅色的成分，中間兩位表示綠色的成分，最后兩位表示藍色的成分。所以RGB顏色代碼的格式如下：
#RRGGBB
這就可以分析除下列數據：
紅色的RGB顏色代碼為：#ff0000
綠色的RGB顏色代碼為：#00ff00
藍色的RGB顏色代碼為：#0000ff
三、CSS中顏色的取值：
在CSS技術中，顏色可以有多種取值，大家熟悉的包括顏色的英文單詞、十六進制顏色代碼等。除此之外，CSS3還擴展了許多新的可選的顏色表示方式。這里總結CSS中顏色的取值如下：
顏色的英文單詞
十六進制顏色代碼：#RRGGBB
十進制顏色代碼：rgb(r,g,b)
帶有不透明度通道的十進制顏色代碼：rgba(r,g,b,a)
三要素顏色代碼：hsb(h,s,b)
帶有不透明度通道的三要素顏色代碼：hsba(h,s,b,a)
這里，以純紅色為例，它的顏色代碼可以表示為：
red
#ff0000
rgb(255,0,0)
rgba(255,0,0,1)
hsb(0,100,100)
hsba(0,100,100,1)
其中rgba()和hsba()都帶有一個a通道，這個通道被稱為alpha通道，是用來調整顏色的不透明度的。取值范圍為0-1，當取值為0時表示完全透明，當取值為1時表示完全不透明。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
在下一篇文章中，小海前端（頭條號）將為大家介紹CSS3提供的背景屬性。CSS3在原有背景屬性的基礎上增添了幾個屬性，使得設置背景更加的靈活，也能完成更加復雜的設計了。希望正在學習CSS技術或前端開發的小伙伴們一定不要錯過。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
