配色黃金比例60：30：10的實際應用！
更新於 發佈於 閱讀時間約 3 分鐘
你知道有一個非常實用的配色技巧嗎？那就是黃金比例60：30：10！這個比例能夠運用在絕大部分的視覺設計上，無論是網站設計、室內設計、App設計、服裝搭配、相片構圖等都能適用。現在就跟著哈利熊一起來看看60：30：10到底是什麼魔法吧！
在設計顏色運用6個秘密技巧大公開中，我們有提到一個非常實用的配色技巧，那就是黃金比例60：30：10！這個比例能夠運用在絕大部分的設計上，無論是網站、室內設計、App設計、服裝搭配、相片構圖等等都能夠使用這個技巧。
什麼是60：30：10？
其實概念很簡單，就是在作品的顏色呈現上，要符合60：30：10的比例，60%主色相 + 30%輔助色相 + 10%強調色相。
- 主色相
佔了設計中絕大部分的顏色，通常是用於背景，也因為使用面積龐大，建議使用中性色。 - 輔助色相
佔了設計中大約30%的顏色，通常是品牌主色調，用於標題等。 - 強調色相
和主、輔色有強烈的對比，主要用以吸引目光注意。用於按鈕、圖標、小標題，或是其他行動呼籲等元素。
配色黃金比例的實際應用
網站設計應用
60：30：10在網站視覺設計中是一個很常被使用的技巧。
比如說在知名網站MailChimp中，就使用了淺黃色為60%的主色調，而黑色則為輔助色調，按鈕則用了與黃色呈現強烈對比的藍色，整個畫面感覺非常協調又清楚。
又比如HeadSpace頂空公司，這是一家線上醫療保健公司，專門提供冥想與放鬆的相關週邊產品。這個品牌的設計風格都非常一致，所有的元素，包括按鈕、LOGO、圖示，甚至是吉祥物的頭，都採用了圓形的設計，之前在設計系列文章也有介紹過圓形設計的好處。
而頂空選擇了淺灰色作為背景顏色，黃色作為輔助色調，藍色作為強調色調。我們可以看到頂空公司雖然在大Banner中使用了不一樣的橘色，但其實都是黃色色調的延伸。
品牌如果想要在設計中增加第四或第五個色彩元素，建議就使用色盤中的顏色去做深淺的調配。
App應用
這種顏色搭配的比例在App應用上特別常見。
比如說星巴克的App設計其實就用了非常簡單的綠、白、灰三色去做搭配。對於重要的行動呼籲「加入星禮程」等訊息就用了在白色背景上會非常醒目的綠色。
而美國購物平台Amazon亞馬遜的App設計也是走這種風格。使用簡單、乾淨的白色背景為主色調、藍綠色作為輔助色調、並以與藍綠色產生強烈對比的橘黃色作為強調色調。而在Banner的設計上，也使用的是橘黃色與藍綠色所延伸出來的顏色，整個畫面顯得非常協調。
室內設計應用
60：30：10的配色守則在室內設計中也非常常見。
通常，60%、30%、10%的顏色的使用如下：
- 主色調（60%）：用於牆面、大型傢俱、地毯、沙發等。
- 輔助色調（30%）：用於窗簾、邊張椅子、小型傢俱。
- 強調色調（10%）：藝術作品、點綴裝飾、小枕頭。
這一個室內設計就是以藍色色調為主，應用於整個牆面。而地板、邊桌則是以米色為主。點綴的畫作、擺設則是以灰色為主。
而下面另一間的設計則是以白色為主要的牆面顏色，搭配米咖色的地板以及衣櫃，最後再以盆栽的綠色搭配。
希望這一篇配色技巧對你有幫助，如果對於配色不是很熟悉的朋友們，可以看看設計師一定要知道的5大配色技巧。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
黃金比例60:30:10的應用思考討論，以及RWD網站的靈感資源分享
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
如果說素描是繪畫的基礎，那色彩原理就是配色的基礎。我們提到色彩原理就是配色的基礎，這句話稍微狹隘了一些，其實了解色彩原理能夠提升的不只有配色，還有設計視覺運用，甚至是印刷觀念都跟色彩原理有關。
在數位時代，網頁設計不僅是美學，更是企業成功的關鍵，一個出色的網站能讓您的品牌在競爭中脫穎而出，設計一個令人驚艷的網站不僅僅是選擇漂亮的圖片和顏色，而是涉及到深思熟慮的佈局和直觀的導航。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
看了SCA在網頁上的25 magazine裡有一編關於咖啡包裝顏色的調查，頗為有趣，但結果一點也不意外。他們用了七隻顏色再加黑白共九隻顏色，再加上七隻顏色的50% Saturation，所以有十六隻不同顏色的包裝給人選擇。簡單的說說結果，總體來說人們喜歡淡一點50% Saturation的那一批。
五色時間管理法由曉一創立，旨在協助人們平衡工作、學習、生活和人際關係。透過將時間分為五種不同的時間元，分別代表不同的功能，並以盡量做到「藍色+綠色」 = 「紅色+黃色」的原則來實踐。
文案設計是一種重要的視覺傳達技巧，透過文字、圖形、色彩等元素的搭配，傳達出品牌或產品的訊息。其中，色彩是文案設計中不可或缺的元素，它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中，可以讓你的設計更加吸引人，一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力，以及它們適合用在哪裡
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
黃金比例60:30:10的應用思考討論，以及RWD網站的靈感資源分享
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
如果說素描是繪畫的基礎，那色彩原理就是配色的基礎。我們提到色彩原理就是配色的基礎，這句話稍微狹隘了一些，其實了解色彩原理能夠提升的不只有配色，還有設計視覺運用，甚至是印刷觀念都跟色彩原理有關。
在數位時代，網頁設計不僅是美學，更是企業成功的關鍵，一個出色的網站能讓您的品牌在競爭中脫穎而出，設計一個令人驚艷的網站不僅僅是選擇漂亮的圖片和顏色，而是涉及到深思熟慮的佈局和直觀的導航。
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
看了SCA在網頁上的25 magazine裡有一編關於咖啡包裝顏色的調查，頗為有趣，但結果一點也不意外。他們用了七隻顏色再加黑白共九隻顏色，再加上七隻顏色的50% Saturation，所以有十六隻不同顏色的包裝給人選擇。簡單的說說結果，總體來說人們喜歡淡一點50% Saturation的那一批。
五色時間管理法由曉一創立，旨在協助人們平衡工作、學習、生活和人際關係。透過將時間分為五種不同的時間元，分別代表不同的功能，並以盡量做到「藍色+綠色」 = 「紅色+黃色」的原則來實踐。
文案設計是一種重要的視覺傳達技巧，透過文字、圖形、色彩等元素的搭配，傳達出品牌或產品的訊息。其中，色彩是文案設計中不可或缺的元素，它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中，可以讓你的設計更加吸引人，一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力，以及它們適合用在哪裡