<-- IE錯誤修正 --> Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能) - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2 週前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Click the image to open in full size.

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。



本文要介紹的「Site Palette」是一款免費 Google Chrome 擴充功能,它的功能很簡單,從網站獲取該頁面的基本顏色配色,一鍵產生完整調色盤資訊,是設計師和前端開發人員必備工具。尤其是經常碰到色彩問題,或是喜歡從其他網站來獲得色彩靈感,Site Palette 會相當有幫助。



不僅如此,Site Palette 還能將色彩頁面產生為分享鏈結,以及匯出完整色彩模版,可快速輸入你慣用的編輯器,包括 Sketch 或 Adobe Swatch,也能將配色丟到 Google Palette 或 Coolors 看看能不能變出更多不同的色彩方案。

擴充功能資訊

元件名稱:Site Palette
適用平台:Chrome
程式語系:英文
官方網站:http://palette.site/
安裝頁面:從 Chrome 線上應用程式商店下載

使用教學

STEP 1

以 Google Chrome 開啟「Site Palette」擴充功能頁面,點選「加到 Chrome」免費下載、安裝至瀏覽器。

Click the image to open in full size.

安裝後會在右上角出現一個 Site Palette 按鈕,當要獲取頁面配色時只要點擊該圖示就會自動產生色彩資訊頁面。

Click the image to open in full size.

STEP 2

下圖是 Site Palette 產生的色彩資訊頁面,包括左邊有一張網頁擷圖,右邊則是主要色彩部分,會有顏色預覽、色碼和色彩名稱等資訊。

Click the image to open in full size.

點選色塊可快速複製色碼資訊。

Click the image to open in full size.

STEP 3

另一個比較實用的功能是點選左下角「Share This Palette」可產生分享鏈結,因為外掛在產生色彩資訊時是直接顯示於瀏覽器中,如果要分享給其他人,必須產生鏈結才形,產生後就能複製底下網址讓其他人看到一樣的畫面。

Click the image to open in full size.

STEP 4

最後,還有一項重要功能推薦給大家,Site Palette 可將看到的色碼快速匯出為 Sketch 或 Adobe 適用的格式,只要點選下方對應按鈕即可,除此之外,也能把顏色丟進 Google Palette 和 Coolors 服務來創造更多可能性。

Click the image to open in full size.

Site Palette 還能依照獲取的網頁配色,產生最接近的「中位切割演算法」(Median cut)和 Google 的 Material design 色系,有興趣的朋友可以自行研究一下。

Click the image to open in full size.

值得一試的三個理由:
  1. 快速從網頁獲取完整配色資訊,列出所有色塊預覽和色碼
  2. 也能轉為 Median cut 和 Material design 色系
  3. 將調色盤匯出為 Sketch 或 Adobe Swatch 適用格式
喜歡 Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能) 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
Site Inspector 讓 COMODO 幫你檢測網站安全性 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-12-01 10:06 AM
Twitter My Site 線上推特Follow Me按鈕產生器 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2009-09-15 04:00 PM
Site Meter - 全世界最多人使用的計數器! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2008-12-27 06:18 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 08:53 PM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2