整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
色搭配不知所措？顏色參考找不到心儀網(wǎng)站？
嘿！收下這份全網(wǎng)更全面的顏色網(wǎng)址吧！
1、Muzli Colors
使用此工具可以快速創(chuàng)建和編輯調(diào)色板，顏色匹配，甚至可以根據(jù)您自己的顏色選擇預(yù)覽和下載自定義UI工具包。
鏈接：medium.muz.li
2、Colorable
顏色對(duì)比測(cè)試儀。
鏈接：https://colorable.jxnblk.com/
3、Color Leap - History’s Palettes
搜索過(guò)去4000年來(lái)使用的180個(gè)調(diào)色板。
鏈接：https://colorleap.app/home
4、Picular
Picular是使用谷歌圖像搜索的火箭快速原色發(fā)生器。
鏈接：https://picular.co/
5、Colourcode
colourco.de是一款在線設(shè)計(jì)工具，可讓您輕松直觀地組合顏色。
鏈接：https://colourco.de/
6. Palettte App
最終的調(diào)色板編輯和重新映射工具。
鏈接：https://palettte.app/
7、Colorinspire
精選色彩靈感 - 免費(fèi)用于您的下一個(gè)項(xiàng)目。
鏈接：https://www.colorinspire.io/
8、ColorSpace
調(diào)色板生成器和顏色漸變工具。
鏈接：https://mycolor.space/
9、Pigment
一種獨(dú)特的方式，可以根據(jù)光線和顏料生成清新鮮艷的色彩，而不是數(shù)學(xué)。在幾秒鐘內(nèi)找到一個(gè)美麗的免費(fèi)調(diào)色板，開(kāi)始您的下一個(gè)項(xiàng)目。
鏈接：https://pigment.shapefactory.co/
10、Adobe Color
創(chuàng)建并保存各種顏色方案，每種顏色方案由一組五種顏色組成。
鏈接：https://color.adobe.com/zh/create/color-wheel/
11、Colors & Fonts
Colors＆Fonts是為開(kāi)發(fā)人員和數(shù)字設(shè)計(jì)師精心策劃的色彩漸變，調(diào)色板和字體配對(duì)靈感的集合。
鏈接：https://www.colorsandfonts.com/
12、HueSnap
獲取顏色信息，創(chuàng)建調(diào)色板并與他人共享。為世界各地的創(chuàng)意人士提供色彩靈感。
鏈接：https://www.huesnap.com/
13、Culrs
Culrs為您提供了一種簡(jiǎn)單明智的方法來(lái)選擇調(diào)色板。
鏈接：https://culrs.com/#/
14、Eva Design System
使用深度學(xué)習(xí)驅(qū)動(dòng)算法生成彩色托盤(pán)。
鏈接：https://eva.design/
15、Scale
一種生成色標(biāo)的生成方式。
鏈接：https://hihayk.github.io/scale/
16、Site Palette
用于生成綜合調(diào)色板的瀏覽器擴(kuò)展。設(shè)計(jì)師和前端開(kāi)發(fā)人員必備的工具。自由配色方案提取。
鏈接：https://palette.site/
17、BrandColors
最大的官方品牌顏色代碼集合。
包括500多個(gè)品牌的十六進(jìn)制顏色代碼，包括Facebook，Twitter，Instagram等等。
鏈接：https://brandcolors.net/
18、Colorwise
在Product Hunt中搜索投票最多的產(chǎn)品。
鏈接：https://colorwise.io/
19、HTML Color Codes
使用我們的顏色選擇器，顏色圖表和帶有Hex顏色代碼，RGB和HSL值的HTML顏色名稱，輕松查找網(wǎng)站的HTML顏色代碼。
鏈接：https://htmlcolorcodes.com/
20、ColorBox
Colorbox是一種用于生成顏色集的顏色工具。
鏈接：https://www.colorbox.io/
21、Generate — Coolors.co
在幾秒鐘內(nèi)創(chuàng)建，保存和分享美麗的調(diào)色板！
鏈接：https://coolors.co/
22、Color — Cloudflare Design
用于界面設(shè)計(jì)的調(diào)色板工具。
鏈接：https://cloudflare.design/color/
23、Instant Duotone Effect Generator
立即在瀏覽器中創(chuàng)建漂亮的雙色調(diào)效果。上傳您自己的圖像或使用我們的圖像：包括幾十個(gè)完美的雙色調(diào)配對(duì)。
鏈接：https://medialoot.com/duotones/
24、Color Tool — Material Design
為UI創(chuàng)建和共享調(diào)色板，并測(cè)量任何顏色組合的可訪問(wèn)性。
鏈接：https://material.io/resources/color/
25、Blendy
Blendy是一種快速預(yù)覽CSS背景混合模式的工具。您可以使用混合模式，顏色，漸變并在圖像上進(jìn)行嘗試。
鏈接：https://blendy.ml/
26、LOL Colors
精心調(diào)色的靈感。
鏈接：https://www.webdesignrankings.com/
27、Color Hunt
Color Hunt是一個(gè)免費(fèi)開(kāi)放的色彩靈感平臺(tái)，擁有數(shù)千種時(shí)尚的手工挑選調(diào)色板。
鏈接：https://colorhunt.co/
28、ColorMe
可視化CSS顏色功能。
鏈接：https://colorme.io/
29、Polarite
Polarite是一款機(jī)器學(xué)習(xí)輔助決策應(yīng)用程序，用于生成和諧的配色方案。
鏈接：https://www.polarite.app/
30、Gradient Hunt
每天更新的精選集合中的數(shù)千種時(shí)尚色彩漸變。為您的下一個(gè)設(shè)計(jì)項(xiàng)目獲得一個(gè)清新的顏色漸變，并保存您喜歡的所有漸變。
鏈接：https://gradienthunt.com/
31、Palettable
使用數(shù)百萬(wàn)設(shè)計(jì)師的知識(shí)生成美麗的調(diào)色板。
鏈接：https://www.palettable.io/
32、ColorSpark
一種簡(jiǎn)單有效的工具，可生成隨機(jī)顏色和漸變，幫助設(shè)計(jì)師將獨(dú)特而醒目的調(diào)色板組合在一起。
鏈接：https://colorspark.app/
33、SVG Colorizer
SVG Colorizer，自動(dòng)著色SVG圖標(biāo)和SVG矢量。
鏈接：https://www.iconshock.com/svg-color/
34、Sip
適用于Mac的Sip Color Picker。收集整理和分享顏色的更好方法。
鏈接：https://sipapp.io/
35、CoolHue 2.0
獲得免費(fèi)的草圖漸變顏色插件和漸變集合調(diào)色板。
鏈接：https://webkul.github.io/coolhue/
36、Color Koala
Color Koala是一款快速調(diào)色板生成器，可為您的所有側(cè)面項(xiàng)目創(chuàng)造出華麗的色彩。
鏈接：https://colorkoala.xyz/
37、SchemeColor
SchemeColor.com是一個(gè)頂級(jí)網(wǎng)站，可以下載，創(chuàng)建和分享數(shù)以千計(jì)的美麗色彩組合。
獲取有關(guān)十六進(jìn)制顏色代碼的詳細(xì)信息，并將其轉(zhuǎn)換為RGB和CMYK等效代碼。
鏈接：https://www.schemecolor.com/
38、Free Mesh Gradient Collection
.sketch，.png，.ai，.jpg，.eps中的100目漸變。
鏈接：https://www.ls.graphics/meshgradients
39、WebGradients
來(lái)到WebGradients.com，獲得CSS3，Photoshop和Sketch中180個(gè)漂亮的線性漸變。此系列由頂級(jí)設(shè)計(jì)師策劃，完全免費(fèi)。
鏈接：https://webgradients.com/
40、Gradient Buttons
美麗的梯度按鈕與懸停效果。
鏈接：https://gradientbuttons.colorion.co/
41、ColorKit
ColorKit混合顏色并生成顏色的色調(diào)和色調(diào)。
鏈接：https://colorkit.io/
42、Eggradients
準(zhǔn)備使用漸變背景顏色。根據(jù)最新的設(shè)計(jì)趨勢(shì)準(zhǔn)備Cool Gradients。它以雞蛋的形式供應(yīng)。使用十六進(jìn)制和CSS代碼。
鏈接：https://www.eggradients.com/
43. Cool Backgrounds
探索精美的精選背景，您可以添加到博客，網(wǎng)站或桌面和手機(jī)壁紙。
鏈接：https://coolbackgrounds.io/
44、Google Art & Culture Experiment — Art Palette
Art Palette是藝術(shù)與文化實(shí)驗(yàn)的一部分，該實(shí)驗(yàn)探索用戶與藝術(shù)收藏品互動(dòng)的創(chuàng)新方式。
使用Art Palette，您可以搜索與您選擇的顏色組合相匹配的藝術(shù)作品。
鏈接：https://artsexperiments.withgoogle.com/artpalette/
45、GradPad
CSS漸變生成器，在瀏覽器中為Web設(shè)計(jì)創(chuàng)建可愛(ài)的CSS顏色漸變。
鏈接：http://ourownthing.co.uk/
46、Khroma
Khroma是生成，發(fā)現(xiàn)，搜索和保存您想要使用的顏色組合和調(diào)色板的最快方法。
鏈接：http://khroma.co/
47、Color palettes
瀏覽Canva的數(shù)千種顏色組合，無(wú)需聘請(qǐng)?jiān)O(shè)計(jì)師即可創(chuàng)建自己的設(shè)計(jì)。免費(fèi)！
鏈接：https://www.canva.com/colors/color-palettes/
48、Color Safe
Color Safe是一種工具，可根據(jù)Web內(nèi)容可訪問(wèn)性指南（WCAG）為您的網(wǎng)站探索美觀，易用的調(diào)色板。
鏈接：http://colorsafe.co/
49、Paletton
使用色輪創(chuàng)建出色的調(diào)色板。
鏈接：https://paletton.com/
50、Colordot
簡(jiǎn)單的顏色選擇每個(gè)人。
鏈接：https://color.hailpixel.com/
51、Colors
顏色是100％數(shù)據(jù)驅(qū)動(dòng)的調(diào)色板集合。
鏈接：https://klart.io/colors
52、Contrast Ratio
輕松計(jì)算顏色對(duì)比度。通過(guò)WCAG從未如此簡(jiǎn)單！
鏈接：https://contrast-ratio.com
53、Color Lisa
世界上最偉大的藝術(shù)家的色彩杰作。
鏈接：http://colorlisa.com/
54、Color Designer
此工具的主要目的是幫助構(gòu)建調(diào)色板并基于它生成色調(diào)和陰影。只需選擇一種顏色，應(yīng)用程序完成其余的工作。您可以使用預(yù)選顏色或顏色選擇器進(jìn)行更多控制。
鏈接：https://colordesigner.io/
55、Color.review
用于探索和查找可訪問(wèn)顏色的現(xiàn)代工具。確保每個(gè)人都能看到您的作品。
鏈接：https://color.review/
56、Blend
Blend - 創(chuàng)建和自定義漂亮的CSS3漸變。
鏈接：http://www.colinkeany.com/blend
57、Contrast
用于快速訪問(wèn)WCAG色彩對(duì)比度的macOS應(yīng)用程序。
鏈接：https://usecontrast.com/
58、Grabient
用于生成Web漸變的美麗而簡(jiǎn)單的UI。
鏈接：https://www.grabient.com/
于任何網(wǎng)站而言，配色方案都是其中最關(guān)鍵的影響因素之一。你可以使用你所熟悉的配色方案，也可以跳出來(lái)選擇更加大膽、明快、更有性格的配色方案，它們或許更容易給人留下深刻的印象。
而今天我們要說(shuō)的，是黃色。作為暖色調(diào)，黃色象征能量，帶來(lái)溫度，充滿生命力，它可以讓你的網(wǎng)站看起來(lái)更具有親和力，舒適而溫馨。毫無(wú)疑問(wèn)，黃色色調(diào)的網(wǎng)站設(shè)計(jì)大多都非常的醒目，讓人難以忽視。
但是同時(shí)，它也是一個(gè)不容易掌控的顏色，一個(gè)不小心可能會(huì)毀掉網(wǎng)站的整個(gè)設(shè)計(jì)。所以，你需要清楚地了解黃色的運(yùn)用手法——比如先看看那些設(shè)計(jì)優(yōu)秀的網(wǎng)站是怎樣使用大面積黃色色調(diào)的。在黃色作為主色調(diào)/背景色的時(shí)候，文字內(nèi)容如何展現(xiàn)，各種控件如何使用，這些都值得學(xué)習(xí)。
明快的黃色和動(dòng)感的舞蹈有著天然的契合度，這也是為什么瑞士城市舞蹈學(xué)院選擇使用黃色作為網(wǎng)站的主色調(diào)。為了確保網(wǎng)站內(nèi)容的識(shí)別度，設(shè)計(jì)師采用的是黃黑搭配。
擁有韓國(guó)血統(tǒng)的攝影師JamesTupper 也在設(shè)計(jì)他的作品展示頁(yè)的時(shí)候選擇了黃色作為主色調(diào)。 在字體配色上，他同樣選取了黑色。
YAY 是一個(gè)平面設(shè)計(jì)類(lèi)的合集網(wǎng)站，黃黑的配色使得文字內(nèi)容無(wú)比的醒目。
黃色的色調(diào)和其他的色彩也可以很好的搭配，重要的是控制好對(duì)比度，這里的插畫(huà)的色調(diào)控制就非常合理，不會(huì)太深，但是和背景的黃色形成了很好的對(duì)比。
這是一位來(lái)自英國(guó)劍橋、獲得過(guò)不少獎(jiǎng)項(xiàng)的設(shè)計(jì)師的個(gè)人作品網(wǎng)站。網(wǎng)站設(shè)計(jì)大氣，但是它最大的特色是交互，無(wú)論你是在桌面端、平板還是手機(jī)上訪問(wèn)，交互的豐富度都非常的強(qiáng)。
Croscon 是一個(gè)植根于設(shè)計(jì)和數(shù)字制造業(yè)的定制化軟件，網(wǎng)站的配色主色調(diào)黃色使用了黑色和白色來(lái)做搭配。
Vivedmv 的網(wǎng)站所用的黃色飽和度相對(duì)較低，看起來(lái)也更加復(fù)古，搭配上復(fù)古的字體、圖形元素，整體的氛圍非常的一致。
這個(gè)網(wǎng)站在功能開(kāi)發(fā)和內(nèi)容策略上達(dá)到了一個(gè)不錯(cuò)的平衡，在色調(diào)的搭配上也很好的體現(xiàn)出了設(shè)計(jì)、開(kāi)發(fā)和內(nèi)容三方面的功力。
依然是黃、黑、白的色彩搭配，經(jīng)典的黃黑支撐起整個(gè)視覺(jué)，而白色在整個(gè)配色中顯得更加醒目，它承載了LOGO、副標(biāo)題和關(guān)鍵性的按鈕。
作為一個(gè)在線學(xué)習(xí)網(wǎng)站，Lambda 所用的主題基本上是經(jīng)過(guò)深度定制的，深藍(lán)灰和白色占據(jù)了大量的面積，而黃色在整個(gè)網(wǎng)站中作為提亮色，很好的強(qiáng)調(diào)了關(guān)鍵性的內(nèi)容與操作。
Fitness 是一個(gè)為健身房和運(yùn)動(dòng)所定制的一個(gè)WP主題，極簡(jiǎn)的風(fēng)格、黃黑為主的色彩搭配讓這個(gè)主題在視覺(jué)上頗為突出。
Mobirise 是一個(gè)免費(fèi)的BootStrap 模板，整體設(shè)計(jì)風(fēng)格非常現(xiàn)代。和前面許多網(wǎng)站在配色上不同，它沒(méi)有使用黃黑來(lái)搭配，而是使用偏橙色的黃色和灰色搭配起來(lái)，文字內(nèi)容則使用了白色。
ENERGY 是一個(gè)運(yùn)動(dòng)健身類(lèi)的WP主題，黃色醒目的特色在這個(gè)主題中被體現(xiàn)的淋漓盡致。
Ethanol Portfolio 是一個(gè)干凈簡(jiǎn)約的免費(fèi)Bootstrap 網(wǎng)站模板，這個(gè)簡(jiǎn)約的模板是多功能的。黃色的文本標(biāo)題在暗色調(diào)的背景上顯得無(wú)比清晰。
Xpress 用作作品展示或者時(shí)尚類(lèi)的內(nèi)容網(wǎng)站都是是相當(dāng)不錯(cuò)的選擇，黃色這一配色在網(wǎng)站中被很好的運(yùn)用了起來(lái)。
Darklowpress 是一個(gè)WP博客主題，大量的可定制的輪播圖能夠讓你更好的展示多媒體信息。
Pluton 是一款現(xiàn)代多功能的HTML5著陸頁(yè)，基于BootStrap來(lái)開(kāi)發(fā)的。整個(gè)網(wǎng)站使用了許多最新的HTML5、CSS3 和 jQuery 技術(shù)。
Agency 是一款有范兒的單頁(yè)式Bootstrap主題，對(duì)于商業(yè)機(jī)構(gòu)和小公司而言，這個(gè)主題相當(dāng)?shù)牟诲e(cuò)。這套主題的設(shè)計(jì)則是基于Golden PSD。
這個(gè)網(wǎng)站是一個(gè)為出租車(chē)公司所設(shè)計(jì)的，黃色的色調(diào)和出租車(chē)的基礎(chǔ)色調(diào)保持了一致。
Hotel Deluxe 同樣是一個(gè)響應(yīng)式的網(wǎng)頁(yè)模板，其中黃色也是網(wǎng)站中最醒目的色彩而起到關(guān)鍵性的作用。
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 1100+ 字，整篇閱讀約需 2 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，應(yīng)用灰度效果，讓頁(yè)面變成黑白顯示。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見(jiàn)解！
body {
filter: grayscale(1); // 1相當(dāng)于100%
}分享原因
這段代碼展示了如何使用 CSS 濾鏡來(lái)將整個(gè)網(wǎng)頁(yè)變?yōu)榛叶刃Ч?/span>
在特殊的日子里，網(wǎng)頁(yè)有整體變灰色的需求，可以使用這段代碼，這個(gè)需求很有必要。
再就是做一些老照片或黑白電影的效果，也可以使用這段代碼。
代碼解析
1. 選擇器 body
這一部分選擇了 HTML 文檔的 <body> 元素，即整個(gè)網(wǎng)頁(yè)的主體。
CSS 的 filter 屬性通常用于圖像，但也可以應(yīng)用到其他任何 HTML 元素上。
2. grayscale(1);
grayscale 濾鏡將元素的顏色變成灰度效果。
參數(shù) 1 表示 100% 灰度，參數(shù) 0 表示無(wú)灰度效果。
3. filter 所有屬性值 大盤(pán)點(diǎn)！
CSS 的 filter 屬性提供了多種圖形效果，且這些屬性值可以組合用起來(lái)，且可以應(yīng)用于任何元素。
以下是 filter 屬性的所有值及其詳細(xì)解釋?zhuān)?/span>
blur()
功能：應(yīng)用模糊效果。
參數(shù)：接受一個(gè)長(zhǎng)度值（如 px、em），默認(rèn)值是 0。
示例：filter: blur(5px);
brightness()
功能：調(diào)整圖像的亮度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始亮度。值小于 1 會(huì)降低亮度，值大于 1 會(huì)增加亮度。
示例：filter: brightness(0.5);
contrast()
功能：調(diào)整圖像的對(duì)比度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始對(duì)比度。值小于 1 會(huì)降低對(duì)比度，值大于 1 會(huì)增加對(duì)比度。
示例：filter: contrast(200%);
drop-shadow()
功能：應(yīng)用陰影效果。
參數(shù)：類(lèi)似于 box-shadow，包括偏移量、模糊半徑和顏色。
示例：filter: drop-shadow(10px 10px 10px #000);
grayscale()
功能：將圖像變?yōu)榛叶取?/span>
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)灰度，1 為完全灰度。
示例：filter: grayscale(1);
hue-rotate()
功能：旋轉(zhuǎn)圖像的色相。
參數(shù)：接受一個(gè)角度值，單位為度（deg）。
示例：filter: hue-rotate(90deg);
invert()
功能：反轉(zhuǎn)圖像的顏色。
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)效果，1 為完全反轉(zhuǎn)。
示例：filter: invert(1);
opacity()
功能：調(diào)整圖像的透明度。
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為完全透明，1 為完全不透明。
示例：filter: opacity(0.5);
saturate()
功能：調(diào)整圖像的飽和度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始飽和度。值小于 1 會(huì)降低飽和度，值大于 1 會(huì)增加飽和度。
示例：filter: saturate(2);
sepia()
功能：將圖像變?yōu)樽睾稚?/span>
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)效果，1 為完全棕褐色。
示例：filter: sepia(1);
url()
功能：引用 SVG 濾鏡。
參數(shù)：接受一個(gè) URL，指向一個(gè)包含 SVG 濾鏡的文件。
示例：filter: url(#filter-id);
- end -
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
