［設計工具］Paletton - The Color Scheme Designer

paletton 是一個免費的線上調色工具，而且不需註冊就能使用。它主要是以色環的方式讓使用者選擇顏色，然後再加上六種不同的配色方案，讓使用者可以很容易地調出令人賞心悅目的配色。另外它還能讓使用者預覽將配色套用在網頁上的效果，以及匯出色碼（ HTML 、CSS、LESS 等）、Photoshop 色票檔、隨機配色、色盲模擬等功能。


網站：http://paletton.com/

《瀏覽器支援》

• Chrome
• 看不懂英文可按滑鼠右鍵／翻譯成中文
• 手機版的色環操作略為不便
• Firefox
• IE 9 以上

　　※以上沒有列出的瀏覽器尚未測試。


《配色方案》

• Monochromatic（單色配色）：
  以單一顏色做為基礎色，再以飽合度、亮度變化出其它搭配的色。因為是屬於同一個色系，所以這種配色法較能調配出舒適的色彩感受。
• Accented Analogic（互補類似色配色）：
  以三個類似色為基礎，再加上色環對面的一個對比色構成一種既不失優雅又能強調重點的有效配色法。
• Triad（三分色配色）：
  以一個主色以及在色環對面的兩個補色組成較為柔合的對比效果。
• Tetrad（四分色配色）：
  以兩個主色以及在色環對面的兩個補色營造出一種強烈的視覺效果。
• Free style（自由設定）：
  選擇 2-colors、3-colors、4-colors後，按下 Shift + 滑鼠左鍵，可自由拖曳各個小圓點，自由設置不同的風格。

《使用介紹》

選擇配色方案：在左上角選擇一個配色方案，依照所選方案的不同，在色環上會有不同數量的圓點，我們可以利用滑鼠拖動圓點改變它們在色環的位置。在色環右邊會即時呈現配色的預覽圖，在預覽圖的下面有「Preview（預覽）」可以設定為自己需要的顯示方式。

預覽網頁配色：預覽圖下方的「Examples（範例）」點下去即會出現套用到網頁的樣式，在右方有一些檢視項目與微調選項可供設定。

調整配色：在色環上選好色調之後，色環周圍的四個角落也都有協助調色的細項，另外我們還可以在色環下方的「Presets（預設）」頁籤裡選擇不同的「亮度」和「飽合度」配色等。

顏色列表：在預覽圖下方的「Color Table」裡面會列出目前配色的所有顏色加上對應的各種色碼，包括RGB、CMYK等。可見這個調色盤的功用不只可用在網頁，也可以用於輸出。而右方就是超實用的Color List（匯出色碼）、Color Swatches（色樣）與 Color Combinations（色彩組合）

最後，設計好想分享給朋友，直接複製網址就可以貼到想分享的地方囉~

ps 如果不小心設計壞了，預覽圖的上方有Reset（重置）可以還原，而在Reset右邊的「Randomize（隨機配色）」無聊也可以玩玩 XD

以上，如有不足之處，歡迎告知 ~ ^ ^ * )