網頁設計配色分享介紹(一)- LOL Color 與 NIPPON COLORS

網頁設計配色分享介紹

網頁設計配色 分享介紹 :

1. LOL Color 網站介紹

2. NIPPON COLORS 網站介紹

網頁設計配色 分享介紹 – 設計網頁的時候,你是否常常因為網頁配色的緣故而被退稿?或是沒有色彩設計靈感,絞盡腦汁後配色結果也非常奇怪呢?色彩對於CIS企業識別、Logo設計與網站設計來說,是非常重要的一項工作,關乎整體視覺帶給觀賞者的感受,一不小心色彩沒搭配好,再精心的設計一瞬間也會從大師美感變成可怕的長輩圖,反之,好的色彩搭配,不僅讓人賞心悅目,更能輔助整體的視覺體驗。

既然配色這麼重要,對於設計老手或是沒有經驗的新手而言,有沒有什麼快速的工具協助顏色的搭配,讓你的設計更上一層樓,完成重要的色彩任務呢?別擔心,現在線上有多免費的配色網站與配色工具,可以提昇大家的配色技巧與激發創意,有許多專業設計師配好的顏色組合可以挑選,你只要動動手指頭,就能找到想要的配色組合囉。

在這麼多的配色網站裡,也許讓你眼花撩亂,不知道該怎麼使用與選用才好,因此鵠學苑精挑細選幾個既實用又好用的配色網站與大家分享,免去大家在茫茫資訊大海中搜尋的煩惱。今天分享的配色懶人包網站 LOL Color 與日本配色網站 NIPPON COLORS ,免費又好用的配色工具,讓你的網站視覺更上一個層次,也能有效地提升設計效率!

LOL Color網站連結:https://www.webdesignrankings.com/resources/lolcolors/

NIPPON COLORS 網站連結:http://nipponcolors.com/

LOL Color 網站介紹

這是一個相當可愛與直接的配色網站,進到此網站無需動腦配色,也沒有複雜的選擇功能,有許多的現成品都幫你配好囉!藉由水滴狀的四組顏色排列加上白色背景,讓視覺非常的直觀,沒有其他介面干擾,能直接體驗色彩帶給瀏覽者的感受。在此網站沒有複雜的搜尋功能,雖然比起其他的配色網站, LOL Color 的配色方案不是很多,但是每一組顏色都是精心挑選,相當的好看、實用與易用,作為整體網站的配色都不成問題,是不是超級方便的!?

網頁設計配色分享介紹

 

進到網站後,所有的配色組合一目瞭然,滾動滑鼠,你可以快速又方便的選擇你所需的組合。

網頁設計配色分享介紹

 

看到喜歡的顏色組合,將滑鼠移到該顏色上,就會出現對應的色碼。下方的投票按讚系統,可以看到熱門的顏色組合(按讚投票的功能目前暫停使用中)。

網頁設計配色分享介紹

 

 

NIPPON COLORS 網站介紹

NIPPON COLORS 是一個日本配色網站,裡面搜羅了 250 色的日本的傳統色,附上 RGB 、 CMYK 和色碼方便大家複製使用。顏色千變萬化,雖然沒有方便的組合懶人包,但是網站中的每種顏色都是好看與細膩的顏色,可以選用網站中的合適顏色做為主色的搭配,不用看著色彩盤猶豫不決,不知道該選哪一個才好看。另外,網站的整體設計也相當細膩,不論是字型的搭配、互動效果都有著自己獨特的設計韻味,喜愛和風配色的朋友們絕對不能錯過!貼心提醒各位,若要參考配色,不要只看小方框的顏色顯示,可以點選該顏色讓背景整體呈現,比較能了解這個顏色所帶來的完整風貌!

進入網站後,左邊為所有日本色顯示、名稱、色碼的列表,中間顯示 RGB 、CMYK的數值,右邊則是目前你所選擇的顏色主題。

網頁設計配色分享介紹

 

網站的編排很有趣,顏色小方框的下方排列CMYK與RGB的數值圖,HOVER效果出現相對應的顏色。

網頁設計配色分享介紹

 

點選你需要的顏色後,右邊的主題文字與背景會隨著變化。

網頁設計配色分享介紹

 

將滑鼠移至 RGB 的數值上,會出現該顏色的色碼,可以直接複製使用。

網頁設計配色分享介紹

 

另外,此網站有一個特別的功能,開啟右邊的 Munsell 功能,會轉成特別的動畫模式,所有主題顏色為一起轉動,每隔幾秒會換一個顏色主題,非常有趣。

網頁設計配色分享介紹

 

 

結語:

分享了兩個精彩又好用的配色網站,希望能夠幫助大家在顏色上的選用能夠更上一層樓,提升視覺的美學素養。今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

網站平面設計及架站資源相關教學文章:

網頁視覺設計 – 以貝茲曲線網站 10 種字母測驗圓弧圖是否完美

Mac 截圖教學 – 螢幕快照內建基本設定與操作示範圖解

Mac 預覽程式教學 – 圖片去背、裁切、轉檔及修改註解

網站視覺設計 – 當代藝術館展覽心得,從藝術思考網頁外觀設計

Google Chrome Labs Squoosh 高品質線上圖片壓縮工具介紹

一頁式網站也能打造獨特的品牌魅力 – 日本網站 Slowmuffi 分享

網站架設知識推薦閱讀:

WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器

Google Maps API 開始收費了?解析 Google 地圖費用與規則!

免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top