配色方案 | 現代調色板系列 2022

已發表: 2022-05-04

又到了一年中的那個時候——我們會考慮過去幾年的顏色趨勢，以及這些趨勢在 2022 年可能會發生怎樣的變化。2022 年將推出哪些配色方案？ 什麼顏色會死去，死氣沉沉，淪落到打折架上？

  • 對於希望在 2022 年更新工作的設計師來說，這個令人敬畏的調色板列表將是一個很好的工具。
  • 這些不是自動生成的，而是由設計師為設計師策劃的。
  • 我們整合了一些網絡上最好的調色板，並添加了一些我們自己的！

我在 2022 年見過的最酷的設計調色板工具之一——Happy Hues！

2022 年色彩趨勢 - 色彩工具和調色板生成器 - 快樂色調

首先，以下是我們根據時裝設計師和塗料公司對 2021 年色彩趨勢的一些預測：

我們為什麼提供這份清單？ 我們為承包商和家庭服務公司提供營銷+網頁設計服務！ 查看我們關於管道引線、電工引線、屋頂引線、HVAC 引線、建築引線、改造引線和我們的管道 SEO、電工 SEO、屋頂 SEO、承包商 SEO、改造 SEO 和 HVAC SEO 服務的博客文章！

目錄

2022 年配色方案！

2021年橙色和綠色網站配色方案撕裂 - 2021 年的明亮配色方案

配色方案 2021

舒適合身的棕褐色粉紅色綠色配色方案 2021

柔和的綠色和黃色配色方案 2021

這是去年的配色方案“2020 配色方案”——2020 年 12 月共享！

Bitchin 廚房調色板 2020

風滑翔機配色方案 2020

復古性感調色板方案、室內設計和平面設計

2020 年可信來源配色方案

2020 年時髦的配色方案

粉紅色秋季調色板2020

柔和/複雜的配色方案調色板 2020

平整、舒適的調色板方案

兒童房調色板2020

復古黃昏調色板 20202020年鄉村西式調色板柔和微妙的調色板 2020PB a 和 J 調色板 2020丁香色調色板 2020柔和的薰衣草色盤 202080 年代霓虹調色板 2020Bright Treefrog 兒童房調色板 2020海濱別墅調色板 2020雷暴調色板 2020錦鯉魚調色板 2020復古 80 年代晚餐調色板 2020

自從我 2012 年開始寫博客以來，對更多網站配色方案的需求一直非常高。 這就是為什麼當我看到 AWSM Color Instagram 時，我著迷了。 我在任何地方的互聯網上都找不到以任何易於保存的方式策劃的這些配色方案。 那麼為什麼不將它們分享給所有尋找2019-2020 年網站配色方案的人！

我希望你和我一樣喜歡它們——請在 Instagram 上關注 AWSM Color。

藍暗淺灰方案藍粉橙配色方案紫色粉紅色深色方案粉紅橙棕褐色 20201-color-schemes-2019綠棕黃橙配色方案 2020橙粉色1-綠-灰-顏色黑黃黑配色方案 2021紫色配色方案 2019顏色-粉色-紫色-調色板紫灰藍黑調色板 2020棕橙棕2019藍綠白配色方案 2019粉色-紫色-白色-顏色藍橙灰調色板方案趨勢-red-brown-pink-color-palette-2019粉色灰色黑色調色板 2018粉紅紫色配色方案awsm-color-2019粉色橙色紫色配色方案tan-creme-makeup-fashion-palette-2019-web-design-schemes-trends藍綠色灰色顏色 2019棕色-粉紅色-棕褐色-調色板-2019橙藍黑調色板 20211-color-scheme-20191-紫橙粉紅方案1-棕色-棕褐色-調色板-2019橙黑灰現代調色板方案綠灰棕配色方案 2019藍綠灰色配色方案 2019粉紅色-綠色-深綠色-灰色-2017-方案粉色-紫色-黃色-灰色-調色板方案

2022 年最佳配色方案工具：

標準：

  • 需要易於導出配色方案
  • 可以免費使用
  • 實際上想出了很棒的配色方案。
  1. Coolers.co – 提供了一些不錯的配色方案 – 只需按幾次 generate 即可啟動並運行它的引擎！

配色方案 2020

2. Paletton - “添加互補色”並在顏色圖上的選擇器周圍拖動以輕鬆找到顏色。 嘗試一些其他設置來熟悉這個超級有用和強大的工具。

配色方案 2020 - 使用工具

3. Colormind.io——據說Colormind使用“深度學習”來吸收流行電影和藝術的配色方案——以幫助提出更好的配色方案。 如果不出意外，這是 2022 年配色方案的有趣旋轉！ 配色方案工具 感謝您閱讀 - 為這篇文章添加書籤。 隨著我們開始分析 2021 年的高級時裝設計師趨勢，我們將很快為 2021 年添加更多配色方案。我們還將在接下來的幾週內撰寫一篇關於這些趨勢的深入文章，所以請保持小心。

來自原始帖子：2019 配色方案：

2019-2021 年使用的 12 種現代調色板工具

1. Coolors.io

最適合：平面設計師/網頁設計師

冷卻器公司

Coolors.co 是此列表中可用於生成調色板和方案的第一個也是最全面的工具。 該平台非常強大，具有用於生成的 Web 應用程序以及 IOS 應用程序、圖像上傳到顏色、高級調整和導出/共享選項。 它甚至帶有一個用於 Adob​​e CC 程序（Photoshop 和 Illustrator）的插件，儘管該功能的成本為 5 美元（我個人認為這是相當實惠的）。 不過，我最喜歡的一件事是，您可以註冊一個免費帳戶來管理和組織您生成的調色板。 此帳戶還將同步到 iOS + Adob​​e 應用程序。 如果您是一名圖形或網頁設計師，希望跟踪您為各種客戶生成的顏色，這將特別有用。 如果您在設計時需要快速訪問，它也會派上用場。 另一個好處是 Coolors 在 Skillshare.com 上提供了兩個月的免費課程。 我會說這是相當搶斷！

2. Canva.com

最適合：業餘平面設計師

帆布

Canva.com 提供了一個工具，允許用戶上傳將生成調色板的圖像。 很棒的是，該工具完全免費提供，無需註冊。 在為具有強烈攝影影響力且顏色與品牌無關的品牌設計材料時，這非常有用。 或者，客戶可能會被一張特定的照片所吸引，並希望從中為他們的品牌生成調色板。

Canva.com 還提供各種其他免費工具，例如排版匹配工具、設計尺寸指南、徽標製作工具和照片編輯工具。 但是，如果用戶想要利用完整的 Canva 平台，其中包括更強大的功能，包括帳戶管理、導出和 Photoshop 式網絡應用程序，那麼他們將需要支付月費。 學生和非營利組織也有折扣。

3. Colormind.io

最適合：平面設計師/網頁設計師

Colormind.io

當我找到 Colormind.io 時，我以為它是一個簡單的配色方案生成應用程序，但在深入挖掘之後，我意識到它比這更酷更酷。 Colormind 的核心是一個 Web 應用程序，可讓您為您的網站生成配色方案。 但它的獨特之處在於它實際上為您在網站上可視化了它的外觀。 它還具有內置的材料設計支持和圖像上傳支持。 多麼酷啊？ 簡單但確實從它的作用中獲得了一些里程。 在 Colormind.io 上親自檢查一下。

4.Mycolor.space

最適合：網頁設計師 / UI 設計師

色彩空間

這是我個人經常使用的工具。 我真正喜歡 MyColor.Space 的地方在於它的簡單性和乾淨的 UI。 調色板生成工具允許您選擇一種顏色，Web 應用程序將從該顏色中吐出基於該顏色的各種漸變和十六進制代碼。 此外，該網絡應用程序還具有一些出色的漸變生成工具。 我真正喜歡漸變生成工具的地方在於它可以輸出生成漸變所需的 CSS。 因此，您可以簡單地將它們複製並粘貼到您的前端代碼中！

5. 設計種子

最適合：視覺設計師/平面設計師/網頁設計師

設計種子

如果不包含 Design Seeds，調色板工具博客文章會是什麼？ 它不是一個調色板生成網絡應用程序，而是一個致力於發布調色板靈感的博客。 他們要做的就是拍張照片，然後根據這張照片發布一個調色板，上面有一個時髦的名字，比如“Moody Opulence”和“Drift”。 我個人並不經常使用這個網站，但我會在試圖弄清楚他們的品牌時將它發送給客戶。 如果您沒有起點或真正知道在設計靈感方面要尋找什麼，那將是有益的。 我也認為這會延伸到室內設計領域。

6. 潘通工作室

最適合：平面設計師/印刷設計師

彩通工作室

如果不提到 Pantone，這個列表就不會完整，特別是因為他們本質上是色彩方面的領先專家。 事實證明，他們有一個非常酷的應用程序可以將調色板放在一起。 使用該應用程序，您可以發現各種顏色和諧、值和交叉引用，同時將它們轉換為 RGB、CMYK 和 HEX。 唯一的缺點是該應用程序僅適用於 iOS，因此 Android 用戶會失敗。 我也不確定我是否真的在我的設計過程中使用過這樣的手機應用程序，但它可能對其他人更有效。 試試看它是否適合你！

7. Adob​​e Kuler（色輪）

最適合：平面設計師 / 網頁設計師 / UI 設計師

Adobe 色輪

我很早就知道 Adob​​e Kuler，因為它曾經作為 iOS 應用程序存在。 我承認，我可能還沒有證實這一點。 但是，如果您訪問該站點，它現在鏈接到一個非常簡單的調色板生成工具。 這裡沒有多餘的裝飾，但是您可以通過導入圖像或使用色輪來生成調色板。 然後，您可以保存這些主題。 如果您有 Adob​​e CC 帳戶，則可以將其保存到您的個人資料中並與您的 CC 應用程序同步。 如果你問我，那就太好了！ 這裡唯一的問題是，如果你沒有超級靈感（我建議在帖子的前面查看 Design Seeds），那麼開始可能會很困難。

8. 網站調色板

最適合：網頁設計師 / UI 設計師 / 前端開發人員

網站調色板

在這個列表中給 Web/UI/Front-End 更多的愛，我向你介紹 Site Palette。 Site Palette 是 Chrome、Safari 和 Firefox 的擴展，允許您生成複雜的調色板。 它還能夠從現有網站中抓取/提取配色方案。 因此，如果您喜歡其他人的所作所為，那麼您就可以接受。 這是一個漂亮的工具，具有出色的 UI，您可以在其中共享到 Sketch 和 Adob​​e 等應用程序。 如果您想更深入地研究，它甚至帶有用於語義顏色提取的 API。 這比我的工資等級要理解一些，但此列表中沒有其他內容可以做到。 雖然有一個免費版本，但它還附帶一個 PRO 版本，如果您需要，它的定價基於 API 請求。

9.引導魔術

最適合：網頁設計師 / UI 設計師 / 前端開發人員引導魔術

向所有使用 Bootstrap 的 Web、UI 和前端設計師致敬！ 這個星球上最流行的響應式框架！ 我個人不喜歡 Bootstrap 的一件事是標準顏色非常通用。 如果您知道我在說什麼並且熟悉嘗試這樣做，那麼定制那是大量的 PTA。 進入 Bootstrap Magic，自定義 Bootstrap 的配色方案變得輕而易舉。 為每件事物挑選顏色仍然很乏味，但至少你有一個花哨的 UI 來做這件事，而不是鑽研 SASS 變量和 mixin 的縮小行。 Bootstrap 甚至帶有一個 HTML 編輯器，因此如果需要，您可以直接從 UI 中執行此操作（我經常調整按鈕和行高等內容）。 這是一個免費的網絡應用程序，所以去瘋狂吧！

10. 引導程序構建

最適合：網頁設計師 / UI 設計師 / 前端開發人員

引導構建

Bootstrap.build 與上面的 Bootstrap Magic 非常相似，儘管它似乎更健壯一些。 這個網絡應用程序更專注於具有大量 SASS 變量自定義的開發人員。 它還具有專用的導出/導入選項以及預覽模式。 在我看來，用戶界面也更令人愉悅。 這個帶有每月 5 美元的專業選項，可讓您將 Bootstrap 主題組織到各種項目中。 您還可以通過 CDN 託管主題。 如果您正在為客戶進行大量設計和開發，這些都是非常有價值的功能。 看看它是否適合你！</p

11. 材質顏色工具

最適合： UI 設計師/應用程序設計師

如果我們要給 Bootstrap 一些愛，我們需要給 Material、Google 的設計標準以及一些關注。 谷歌推出了 Material 作為在所有平台上簡化設計的一種手段。 他們甚至向公眾發布了這些標準，以使應用程序集成看起來更加無縫和原生。 作為其中的一部分，他們為設計人員和開發人員提供了各種 Web 應用程序工具，以幫助構建基於這些標準的界面。 這就是 Google 材質顏色工具發揮作用的地方。 這是一個相當複雜的野獸，但如果你正在設計一個符合 Material 設計標準的 Android 應用程序，那麼這個工具對於實現這一點至關重要。

12. 材質調色板

最適合： UI 設計師 / 應用程序設計師 / 網頁設計師

另一個基於 Material 的工具是 Material Design Palette。 這比 Google 的 Material 工具簡單得多。 調色板工具允許您選擇兩種顏色，然後根據 Google 的材料標準自動生成調色板。 雖然該工具的目的是以應用程序為中心，但如果您只是在尋找一種生成色覺的方法，它可能會有所幫助。 該應用程序會吐出十六進制代碼，因此它們的顏色可以真正用於任何應用程序。 還有一個漂亮的材料圖標參考指南以及一個材料顏色參考指南，您可以在其中復制和粘貼十六進制代碼。 看看這個！

62% 的受訪公司表示，他們認為網站應該每 2-3 年重新設計一次。 資料來源：掛鉤機構網站應該多久重新設計一次 - 營銷統計數據和圖表 2020

我希望您喜歡這些用於網站和配色方案工具的令人敬畏的現代調色板/配色方案！

非常感謝您的閱讀——如果對您有用，請在您的綜述中鏈接回我們，或分享到您的社交網絡

如果您想繼續閱讀，請查看這篇關於 Cody Warren 的帖子：明尼蘇達州最性感的男人，或我們的管道工 SEO 指南。