色搭配不知所措?顏色參考找不到心儀網(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)系。