Zi 字媒體

做網站設計或平面設計，甚至是簡報，配色都是很讓人頭疼的問題，隨時準備好找靈感用的配色工具，尋找最適用的色彩組合。本篇會不定期更新。 網站名稱：Hex Naw 網 址：https://hexnaw.com/ 教學介紹：https://free.com.tw/hex-naw/ 特色簡介：檢測你的網站配色對比和可視性評分，找出最具網頁親和力色彩組合。 網站名稱：Coolors 網 址：https://coolors.co/ 教學介紹： 特色簡介：Coolors 最大特色就是提供了免費的「自動配色器」，隨機產生推薦的配色結果，讓你知道那些顏色適合一起搭配使用，在快速產生的多組配色中，也能激發我們的設計靈感。只要打開 Coolors 的［ Generator ］線上工具，按下空白鍵就能快速切換不同配色，也能在［ Browser ］頁面瀏覽那些設計師們推薦的經典配色。 網站名稱：BrandColors 網 址：https://brandcolors.net/ 教學介紹： 特色簡介：BrandColors 收集了世界上許多知名品牌的配色表，讓我們知道一個成功品牌如何在它的網頁、產品、 Logos 上做顏色設計，是非常直接有效的參考，也能讓我們下載任何一個品牌的配色表。 網站名稱：Plartton 網 址：http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF 教學介紹： 特色簡介：Plartton 是一個免費而且強大的配色產生器，他的第一個特色是透過調色盤可以輕鬆的產生符合色彩設計原理的配色表，我們只要在調色盤中選擇一個顏色，就能自動計算顏色對比，產生各種設計建議。按下右下方的［ Examples ］，在一個模擬網頁中查看這個配色呈現出來的實際效果。 網站名稱：0to255 網 址：http://www.0to255.com/ 教學介紹： 特色簡介：0to255 就是一個快速的顏色挑選網站，我們先選擇一個主要的顏色，接著就可以看到這個色系中所有顏色的對比表，方便我們挑選出一個適合的顏色代碼來使用。 網站名稱：COLOURlovers 網 址：http://www.colourlovers.com/ 教學介紹： 特色簡介：比起機器的配色，或許來自人的色彩設計靈感更能觸動人心， COLOURlovers 由社群用戶分享各種主題的配色靈感，你可以在這裡找到婚禮、印刷、網頁設計的各種配色表，這些配色方法都是由不同的設計師提供，你還能看到大家的評價。 網站名稱：Adobe Color CC 網 址：https://color.adobe.com/zh/create/color-wheel/ 教學介紹： 特色簡介：透過線上的 Color CC 自動調色盤，經過專業的顏色對比模擬，讓你快速選出適合的配色方案。我們只要在調色盤上輕鬆拉動滑鼠，就能在專業的色彩設計原理下產生不同的配色結果，或者也能瀏覽 Adobe 上由專業設計師提供的［配色方案］。 網站名稱：uicolors 網 址：http://getuicolors.com/ 教學介紹： 特色簡介：uicolors 讓你挑選顏色後，可以立刻嘗試看看用這個顏色當作介面底色的實際範例，更容易找出我們想要的效果。 網站名稱：flatuicolors 網 址：https://flatuicolors.com/ 教學介紹： 特色簡介：這個網站提供了扁平化設計中常用的色彩，只要按下喜愛的扁平化設計常用顏色，就能直接複製 Hex 色碼。 網站名稱：Stylifyme 網 址：http://stylifyme.com/ 教學介紹： 特色簡介：看到一個網站設計覺得很漂亮，想知道它的顏色是怎麼搭配的？那麼只要到 Stylifyme 中輸入網站網址，就能立刻獲得這個網站的配色表啦！對設計師來說是非常實用的參考工具。 網站名稱：Gradient Backgrounds 網 址：https://cssgradient.io/gradient-backgrounds/ 教學介紹：https://free.com.tw/gradient-backgrounds/ 特色簡介：一站式漸層背景產生器，收錄各種服務方便切換 網站名稱：ColorSpark 網 址：https://colorspark.app/ 教學介紹：https://free.com.tw/colorspark/ 特色簡介：隨機產生顏色或漸層色組合，顯示 CSS3 代碼快速複製 網站名稱：Site Palette 網 址：http://palette.site/ 教學介紹：https://free.com.tw/site-palette/ 特色簡介：從網站獲取配色，快速產生完整調色盤資訊（Chrome 擴充功能） 網站名稱：CSSPeeper 網 址：https://csspeeper.com/ 教學介紹：https://free.com.tw/csspeeper/ 特色簡介：CSSPeeper 讓使用者以簡單、有組織性、更漂亮方式去檢查網站樣式和各種元件，例如以視覺化方式快速列出網站的配色、查看各部分使用的字型、字體大小、行高、對齊方向和顏色，還能快速匯出頁面中的所有圖片。 網站名稱：HTML Color Codes 網 址：https://htmlcolorcodes.com/ 教學介紹：https://free.com.tw/html-color-codes/ 特色簡介：全方位免費線上選色器，輕鬆獲取色彩代碼、RGB 和 HSL 網站名稱：Klart Colors 網 址：https://klart.io/colors/ 教學介紹：https://free.com.tw/klart-colors/ 特色簡介：使用方法很簡單，打開網站，就能看到無數個調色盤，按下空白鍵會重新整理，載入新的顏色，不過你也可以利用滑鼠不斷往下滾動，Colors 會持續載入更多的配色選項。點擊顏色後會顯示色碼 網站名稱：Straightline 網 址：http://bm.straightline.jp/ 教學介紹：https://steachs.com/archives/28494 特色簡介：這個日本網站目前收集了 7608 個不同的網頁設計類型，除了日文還有一些歐美的英文版網站，包含服飾品牌、旅遊介紹、唱片、咖啡店網站等等，相當豐富，喜歡即可加入收藏供實作參考。 分享此文： Facebook Twitter Google Pocket LinkedIn