網路城邦
上一篇 回創作列表 下一篇   字體:
好用的網頁配色網站
2014/09/15 12:14:16瀏覽7250|回應1|推薦25




學習的過程中, 對於網頁的選色, 還真叫我無所適從, 


畢竟對色彩會牽動著訪客對網頁的第一印象, 

太多選擇, 對初學的人, 反而是種折磨, 

其實沒有美術素養的人, 可以交給專家來幫我們調色, 

今天紀錄幾個可以決定網頁配色的方法。

網頁配色, 決定網站風格

隨著配色不同, 網頁感覺會有很大變化

色彩三要素, 色相、明度、彩度合稱色彩三個屬性,也可稱為構成色彩的三要素。


色相 (Hue): 即色彩的相貌,也就是區別色彩差異的名稱,每一種色彩都有一個「名稱」,如紅、橙、黃、綠、藍、紫、象牙白、祖母綠、棗紅、檸檬黃…等。

明度 (Brightness): 即色彩的明暗程度。如黃色較亮,明度較高;紫色較暗,明度較低。

      任何顏色,加入白色越多,明度就會越高;

                加入黑色越多,明度就會越低。

彩度 (Saturation): 色彩的飽和度,或是色彩的純度。飽和度愈高表示色彩愈鮮艷。



色彩有著它的獨特性, 選擇合乎主題的主色調, 貫穿所有頁面, 能快速構成深刻印象

在開始設計前, 我們需對網站屬性或目標對象挑選色彩組合,

下面這個網頁可以提供我們參考值, 這是配色分類字典, 

提供了很多主題配色的方案, 我們可依不同需求選擇的顏色表現 



 

EX: 優雅的-顯示優雅單一以及2色, 3色的搭配方式


一個網頁配色基本上有

一.  主色 - 企業色, 以營業項目類別為主

網頁中面積最大的色彩為畫面的主色調,網站中所有的頁面,出現次數最多的就是主色調。

二. 輔色

主色調是掌握整個畫面色彩氣氛的主要元素,而輔色面積小,負責緩衝調合的作用,

三. 強調色,是空間中動感和活力的來源,還可以因其色彩「點」的作用,使主色協調整個畫面得以連貫,這種一般為醒目突出的色彩。

另外可再加上基色-黑、白 和介質色 - 灰 


網頁背景色設計

背景色彩或底色的設計,是突出主體的重要手段。

要把網頁作的「亮」一些, 並不是白底就可完成, 白色是明亮的色彩,但是白本身並不具有「亮」的作用,可是黑底上的白色則非常醒目。

網頁的感覺,亮一些應該使底色與主體色調在色相、明度、飽合度的對比大一些,

如果主體色調的鮮豔明快,底色通常用中低明度和飽合度較沉靜的色彩,以利於襯托主體。

再來介紹幾個好用的配色網站



它也支援photoshop 的色票, 


1. 單色配色-版面由單一顏色漸變方式而成

2. 相近色-沈穏,帶給人舒適自然感受, 是最常被使用的方式

   3色 , 4色- 活潑

2. 選取需要色, 及輔色型態

   2.1 輸入主色(企業色)

   2.2 選擇輔色型態

   2.3 系統產生 my palette


   2.4 


        1. PREVIEW - 預視配色結果

         2. EXAMPLE - 套入範例中預視

            positive design , negative design 可切換

     

       3. COLOR TABLE 可存成色票, 在PS中載入

          點入 color table -> 可存成 html, css...

           

          點擊 Color swatches -> as ACO (可由photoshop 載入)

          

          點擊後會自動下載 mypalette.aco

         

3. 回到 photoshop

   色票面板 -> 點擊右上的隠藏選單 -> 載入色票(或取代色票)

     

   即可載入下載的 mypalette

   

  此時可載入我們設定的配色組合

   



 

它是依網頁安全色所製作的調色盤,

點選左方所需顏色, 對應色會新增到右側版面,找出令人滿意的組合


搭配不同顏色的組合,

 

 




 


  這網站可以幫我們找到需要的顏色


  images 我們可上傳圖片, 抓取我們喜歡顏色!


它可將圖面分析出不同的色票, 

 

search : 輸入一個物品名稱(例如 sky)就能產生相關顏色


四. Adobe Kuler



 



這也是個常用的配色網站, 提供您參考!!


另外,剛剛看到的色胚子這個免費軟體, 應該也是不錯用的好工具!

有興趣的朋友可以參考 http://sofun.tw/colorbase/


搜尋 色胚子下載 也可以找到很多載點哦! 我還沒好好使用, 就不多做介紹了!


最後最後, 提醒一個Photoshop 也有安全網頁色盤:

 Photoshop 

   視窗 -> 延伸功能 -> Kuler -> 建立              

   a. 選取規則 (配色規則) : 類比, 單色, 互補...    

                  


   b. 選取基本色,  就可得到所需的色盤

              




看吧! 活在現在的我們真是幸福,

軟體幫我們解決了許多專家的規則,

但藉由軟體幫忙, 可以讓自己累積能量, 慢慢不再頭大哦!

繼續加油吧!

 

 
( 知識學習檔案分享 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=runa2012&aid=17241836

 回應文章

K君
2019/05/30 16:52

您好,覺得文章的內容很豐富,也教得很仔細。另外,最近有看到一篇CTMaxs網路銷公司的文章,覺得介紹的也蠻清楚,其網頁配色的工具更簡單好用,希望你可以參考看看^^。https://ctmaxs.com/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E9%85%8D%E8%89%B2/

(K123456789@yahoo.com.tw)