Godzilla. 2019-02-18
網(wǎng)站建設(shè)
上海網(wǎng)站設(shè)計公司：面向網(wǎng)頁設(shè)計師的12大網(wǎng)頁色彩工具
選擇完美的配色方案應(yīng)該不是一項艱巨的任務(wù)。您所需要的只是適合工作和設(shè)計注意力的工具。我無法幫助你改善色彩感知，但我可以分享一套方便的工具來處理顏色，這些工具可能會在你使用它們時改善你的眼睛。
這些工具也都是100％免費的，因此它們很容易被標記并重復(fù)使用。它們還可以用于Web，移動，打印或任何其他需要令人難以置信的顏色的介質(zhì)。
1. ColorHexa
最近上海網(wǎng)站設(shè)計公司瀏覽網(wǎng)頁并偶然發(fā)現(xiàn)了ColorHexa。它是迄今為止我見過的最酷的色彩工具之一。
這在技術(shù)上不是顏色生成器或方案設(shè)計工具。相反，它是所有顏色的信息庫，包括建議的漸變思想，相關(guān)陰影和許多顏色代碼（例如：十六進制，RGB，CMYK，CIE-LAB，HSL等）。
您永遠不會找到更完整的顏色信息列表。這對包括網(wǎng)頁設(shè)計師在內(nèi)的所有設(shè)計師都非常有用，而且它是開始研究項目顏色的好地方。
2. Colors.css
如果你對色彩心理學(xué)進行一些研究，你將會學(xué)到不同的顏色如何疊加在一起以及它們給出了什么樣的情緒。這與某些類型的顏色以及它們?nèi)绾螀f(xié)同工作形成對比。
每個瀏覽器都有默認顏色，通常太苛刻。Colors.css修復(fù)了這個問題。
這是一個免費的CSS庫，可以重新設(shè)置默認調(diào)色板。這意味著您可以使用具有完全不同值的“藍色”和“紅色”等顏色名稱。
他們甚至還有一個完整的輔助功能頁面，其中包含匹配顏色方案的想法，這些方案可以提高您網(wǎng)站的可讀性。
3. ColorPick Eyedropper Extension
您多久找一次具有漂亮配色方案的網(wǎng)站？我總是找到了很棒的網(wǎng)站，很難從樣式表中導(dǎo)出這些顏色。
您可以使用Chrome DevTools，但這需要在代碼中挖掘以選擇十六進制顏色。相反，您可以使用專為Google Chrome設(shè)計的ColorPick Eyedropper擴展程序。
您只需單擊擴展程序面板中的切換窗口，然后懸停您要學(xué)習的任何顏色。這將為您提供完整的十六進制代碼以及“復(fù)制”鏈接，以將確切的顏色復(fù)制到剪貼板。很酷吧？它是一個免費的插件，所以嘗試它沒有損失的。
4. Coolors
Coolors網(wǎng)站是一個大型配色方案生成器。你可以在網(wǎng)上找到幾十個生成器，但是這個有點不同，因為它支持帶有自己的附加組件的Adobe程序。
您也可以將其作為Chrome擴展程序，甚至作為手機的自定義iOS應(yīng)用程序。
真正的價值在于瀏覽器webapp，它可以動態(tài)自動生成顏色方案。然后，您可以混合和匹配顏色，更改設(shè)置，調(diào)整色盲，并根據(jù)特定條件隨機化您自己的方案。
上海網(wǎng)站設(shè)計公司認為這是一個很棒的應(yīng)用程序，但它帶有一個小的學(xué)習曲線。不應(yīng)該超過15-20分鐘來弄清楚它是如何工作的。
5. Palettte App
Palettte是顏色編輯和重新映射工具。它允許您構(gòu)建從一個到另一個的顏色方案，并微調(diào)單個顏色樣本。您還可以導(dǎo)入，分析和編輯現(xiàn)有顏色方案。 創(chuàng)作者已經(jīng)寫了更多關(guān)于這個顏色應(yīng)用背后的動機。
6.Material UI Colors
通過快速谷歌搜索，您可以在網(wǎng)上找到一堆甜蜜的材料設(shè)計工具。它們似乎永無止境，其中許多都依賴于Android應(yīng)用中常見的顏色樣式。
使用Material UI Colors webapp，您可以找到符合Google材料指南的完美配色方案。
使用屏幕左上角的滑塊輕松更改所有顏色的色調(diào)?；螂S機化您的選擇以匹配現(xiàn)有網(wǎng)站的顏色選擇。您還可以根據(jù)所需的格式在十六進制和RGB之間切換。適合材料設(shè)計愛好者的絕佳應(yīng)用。
7.Color Supply
Color Supply網(wǎng)站非常獨特，但也很奇怪。它為您提供了一系列有趣的顏色工具，用于匹配顏色方案，選擇前景和背景，以及不同的方法來比較這些顏色在頁面上的外觀。
但這沒有任何指導(dǎo)或具體目的。它就像一個配色方案生成器，你必須隨時學(xué)習。這在《12個極簡網(wǎng)頁設(shè)計的勵志范例》中也有詳細的說過，可以多去了解一下。
它將輸出不同的顏色，并在頁面底部附近使用十六進制代碼進行復(fù)制。此外，它還將向您展示這些顏色如何在漸變，圖標和文本中工作。不錯的工具，但它也帶來了一個尷尬的學(xué)習曲線。
8.Color Safe
WCAG努力尋求更易于訪問的網(wǎng)站。顏色是在不丟失時間測試的情況下，構(gòu)建可訪問性的最簡單方法之一。
Color Safe是一款免費的webapp，可以測試您的顏色選擇。您可以從一小組字體和大小中選擇，然后選擇您想要的前景和背景顏色。
從那里，您將獲得可訪問性評級以及如何改善顏色選擇的建議（如果需要）。
對于任何關(guān)注網(wǎng)絡(luò)可訪問性的人來說，它都是非常棒的工具。
9. Color Hunt
對于用戶策劃的配色方案庫，請查看Color Hunt。
這個免費項目在幾年前推出，并繼續(xù)成為設(shè)計靈感的源泉。人們將自己的配色方案提交到網(wǎng)站，然后其他人對這些配色方案進行投票。您可以按最新或最受歡迎的方式排序，甚至可以對您的收藏進行投票。很酷吧？
這是一個非常簡單的Web應(yīng)用程序，所以不要期望太多的功能。這只是一種可以同時在視覺上瀏覽多種不同顏色模式的簡潔方法。
10.Open Color
尋找一些更適合網(wǎng)絡(luò)的東西？然后查看Open Color庫。
這是一個圍繞可訪問性和瀏覽器支持構(gòu)建的大量開源顏色選擇。無論您的布局設(shè)計如何，每種顏色都經(jīng)過優(yōu)化，易于匹配。
查看GitHub倉庫以獲取更多信息并下載樣式的副本。
11. HTML顏色代碼
HTML顏色代碼是另一種以信息為中心的顏色webapp。
這使您可以直接從應(yīng)用程序中提取所有形式的HTML / CSS代碼以供您選擇顏色。您可以搜索您想要的任何顏色，或者按照他們的建議進行搜索。此外，這甚至還有一個生成調(diào)色板的工具，您可以下載為Adobe Swatch文件。不要讓這個名字欺騙你：這個應(yīng)用程序不僅僅是HTML顏色。
對于希望輕松訪問顏色代碼和可重復(fù)使用調(diào)色板的所有類型的數(shù)字設(shè)計師而言，它是一款出色的工具。
12. Adobe Color CC
我無法不使用令人難以置信的Adobe Color CC webapp。
這個免費工具以前稱為Adobe Kuler，但多年來經(jīng)歷了幾次迭代。它仍然是一個免費的顏色選擇器，但界面已經(jīng)改變，使設(shè)計師更容易構(gòu)建和保存配色方案。
如果您是Adobe用戶，則此工具值得加入書簽。它在一個方案中支持多達5種不同的顏色，您甚至可以上傳圖像以自動提取動態(tài)配色方案。
文章評論：