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