Godzilla. 2019-02-18 網(wǎng)站建設(shè)

上海網(wǎng)站設(shè)計(jì)公司：面向網(wǎng)頁(yè)設(shè)計(jì)師的12大網(wǎng)頁(yè)色彩工具

　選擇完美的配色方案應(yīng)該不是一項(xiàng)艱巨的任務(wù)。您所需要的只是適合工作和設(shè)計(jì)注意力的工具。我無(wú)法幫助你改善色彩感知，但我可以分享一套方便的工具來(lái)處理顏色，這些工具可能會(huì)在你使用它們時(shí)改善你的眼睛。

　　這些工具也都是100％免費(fèi)的，因此它們很容易被標(biāo)記并重復(fù)使用。它們還可以用于Web，移動(dòng)，打印或任何其他需要令人難以置信的顏色的介質(zhì)。

　　1. ColorHexa

　　最近上海網(wǎng)站設(shè)計(jì)公司瀏覽網(wǎng)頁(yè)并偶然發(fā)現(xiàn)了ColorHexa。它是迄今為止我見過的最酷的色彩工具之一。

　　這在技術(shù)上不是顏色生成器或方案設(shè)計(jì)工具。相反，它是所有顏色的信息庫(kù)，包括建議的漸變思想，相關(guān)陰影和許多顏色代碼（例如：十六進(jìn)制，RGB，CMYK，CIE-LAB，HSL等）。

　　您永遠(yuǎn)不會(huì)找到更完整的顏色信息列表。這對(duì)包括網(wǎng)頁(yè)設(shè)計(jì)師在內(nèi)的所有設(shè)計(jì)師都非常有用，而且它是開始研究項(xiàng)目顏色的好地方。

　　2. Colors.css

　　如果你對(duì)色彩心理學(xué)進(jìn)行一些研究，你將會(huì)學(xué)到不同的顏色如何疊加在一起以及它們給出了什么樣的情緒。這與某些類型的顏色以及它們?nèi)绾螀f(xié)同工作形成對(duì)比。

　　每個(gè)瀏覽器都有默認(rèn)顏色，通常太苛刻。Colors.css修復(fù)了這個(gè)問題。

　　這是一個(gè)免費(fèi)的CSS庫(kù)，可以重新設(shè)置默認(rèn)調(diào)色板。這意味著您可以使用具有完全不同值的“藍(lán)色”和“紅色”等顏色名稱。

　　他們甚至還有一個(gè)完整的輔助功能頁(yè)面，其中包含匹配顏色方案的想法，這些方案可以提高您網(wǎng)站的可讀性。

　　3. ColorPick Eyedropper Extension

　　您多久找一次具有漂亮配色方案的網(wǎng)站？我總是找到了很棒的網(wǎng)站，很難從樣式表中導(dǎo)出這些顏色。

　　您可以使用Chrome DevTools，但這需要在代碼中挖掘以選擇十六進(jìn)制顏色。相反，您可以使用專為Google Chrome設(shè)計(jì)的ColorPick Eyedropper擴(kuò)展程序。

　　您只需單擊擴(kuò)展程序面板中的切換窗口，然后懸停您要學(xué)習(xí)的任何顏色。這將為您提供完整的十六進(jìn)制代碼以及“復(fù)制”鏈接，以將確切的顏色復(fù)制到剪貼板。很酷吧？它是一個(gè)免費(fèi)的插件，所以嘗試它沒有損失的。

　　4. Coolors

　　Coolors網(wǎng)站是一個(gè)大型配色方案生成器。你可以在網(wǎng)上找到幾十個(gè)生成器，但是這個(gè)有點(diǎn)不同，因?yàn)樗С謳в凶约旱母郊咏M件的Adobe程序。

　　您也可以將其作為Chrome擴(kuò)展程序，甚至作為手機(jī)的自定義iOS應(yīng)用程序。

　　真正的價(jià)值在于瀏覽器webapp，它可以動(dòng)態(tài)自動(dòng)生成顏色方案。然后，您可以混合和匹配顏色，更改設(shè)置，調(diào)整色盲，并根據(jù)特定條件隨機(jī)化您自己的方案。

　　上海網(wǎng)站設(shè)計(jì)公司認(rèn)為這是一個(gè)很棒的應(yīng)用程序，但它帶有一個(gè)小的學(xué)習(xí)曲線。不應(yīng)該超過15-20分鐘來(lái)弄清楚它是如何工作的。

　　5. Palettte App

　　Palettte是顏色編輯和重新映射工具。它允許您構(gòu)建從一個(gè)到另一個(gè)的顏色方案，并微調(diào)單個(gè)顏色樣本。您還可以導(dǎo)入，分析和編輯現(xiàn)有顏色方案。創(chuàng)作者已經(jīng)寫了更多關(guān)于這個(gè)顏色應(yīng)用背后的動(dòng)機(jī)。

　　6.Material UI Colors

　　通過快速谷歌搜索，您可以在網(wǎng)上找到一堆甜蜜的材料設(shè)計(jì)工具。它們似乎永無(wú)止境，其中許多都依賴于Android應(yīng)用中常見的顏色樣式。

　　使用Material UI Colors webapp，您可以找到符合Google材料指南的完美配色方案。

　　使用屏幕左上角的滑塊輕松更改所有顏色的色調(diào)?；螂S機(jī)化您的選擇以匹配現(xiàn)有網(wǎng)站的顏色選擇。您還可以根據(jù)所需的格式在十六進(jìn)制和RGB之間切換。適合材料設(shè)計(jì)愛好者的絕佳應(yīng)用。

　　7.Color Supply

　　Color Supply網(wǎng)站非常獨(dú)特，但也很奇怪。它為您提供了一系列有趣的顏色工具，用于匹配顏色方案，選擇前景和背景，以及不同的方法來(lái)比較這些顏色在頁(yè)面上的外觀。

　　但這沒有任何指導(dǎo)或具體目的。它就像一個(gè)配色方案生成器，你必須隨時(shí)學(xué)習(xí)。這在《12個(gè)極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)的勵(lì)志范例》中也有詳細(xì)的說過，可以多去了解一下。

　　它將輸出不同的顏色，并在頁(yè)面底部附近使用十六進(jìn)制代碼進(jìn)行復(fù)制。此外，它還將向您展示這些顏色如何在漸變，圖標(biāo)和文本中工作。不錯(cuò)的工具，但它也帶來(lái)了一個(gè)尷尬的學(xué)習(xí)曲線。

　　8.Color Safe

　　WCAG努力尋求更易于訪問的網(wǎng)站。顏色是在不丟失時(shí)間測(cè)試的情況下，構(gòu)建可訪問性的最簡(jiǎn)單方法之一。

　　Color Safe是一款免費(fèi)的webapp，可以測(cè)試您的顏色選擇。您可以從一小組字體和大小中選擇，然后選擇您想要的前景和背景顏色。

　　從那里，您將獲得可訪問性評(píng)級(jí)以及如何改善顏色選擇的建議（如果需要）。

　　對(duì)于任何關(guān)注網(wǎng)絡(luò)可訪問性的人來(lái)說，它都是非常棒的工具。

　　9. Color Hunt

　　對(duì)于用戶策劃的配色方案庫(kù)，請(qǐng)查看Color Hunt。

　　這個(gè)免費(fèi)項(xiàng)目在幾年前推出，并繼續(xù)成為設(shè)計(jì)靈感的源泉。人們將自己的配色方案提交到網(wǎng)站，然后其他人對(duì)這些配色方案進(jìn)行投票。您可以按最新或最受歡迎的方式排序，甚至可以對(duì)您的收藏進(jìn)行投票。很酷吧？

　　這是一個(gè)非常簡(jiǎn)單的Web應(yīng)用程序，所以不要期望太多的功能。這只是一種可以同時(shí)在視覺上瀏覽多種不同顏色模式的簡(jiǎn)潔方法。

　　10.Open Color

　　尋找一些更適合網(wǎng)絡(luò)的東西？然后查看Open Color庫(kù)。

　　這是一個(gè)圍繞可訪問性和瀏覽器支持構(gòu)建的大量開源顏色選擇。無(wú)論您的布局設(shè)計(jì)如何，每種顏色都經(jīng)過優(yōu)化，易于匹配。

　　查看GitHub倉(cāng)庫(kù)以獲取更多信息并下載樣式的副本。

　　11. HTML顏色代碼

　　HTML顏色代碼是另一種以信息為中心的顏色webapp。

　　這使您可以直接從應(yīng)用程序中提取所有形式的HTML / CSS代碼以供您選擇顏色。您可以搜索您想要的任何顏色，或者按照他們的建議進(jìn)行搜索。此外，這甚至還有一個(gè)生成調(diào)色板的工具，您可以下載為Adobe Swatch文件。不要讓這個(gè)名字欺騙你：這個(gè)應(yīng)用程序不僅僅是HTML顏色。

　　對(duì)于希望輕松訪問顏色代碼和可重復(fù)使用調(diào)色板的所有類型的數(shù)字設(shè)計(jì)師而言，它是一款出色的工具。

　　12. Adobe Color CC

　　我無(wú)法不使用令人難以置信的Adobe Color CC webapp。

　　這個(gè)免費(fèi)工具以前稱為Adobe Kuler，但多年來(lái)經(jīng)歷了幾次迭代。它仍然是一個(gè)免費(fèi)的顏色選擇器，但界面已經(jīng)改變，使設(shè)計(jì)師更容易構(gòu)建和保存配色方案。

　　如果您是Adobe用戶，則此工具值得加入書簽。它在一個(gè)方案中支持多達(dá)5種不同的顏色，您甚至可以上傳圖像以自動(dòng)提取動(dòng)態(tài)配色方案。

下一篇：2019年網(wǎng)站優(yōu)化的四大實(shí)用策略 上一篇：體現(xiàn)網(wǎng)校搭建重要性的8大原因