ColorZilla 色碼工具教學Chrome 擴充程式抓取網頁特定顏色 ... | 取色器chrome
ColorZilla 色碼工具教學，Chrome 擴充程式抓取網頁特定顏色代碼 · 第一步：進入Chrome 線上應用程式商店下載。
· 第二步：點選“加到Chrome” 後會跳出小視窗 ...SkiptocontentWordPressWordPress教學ＷordPress主題WordPress外掛WordPress相關工具WordPress客製Elementor教學WooCommerceWooCommerce教學WooCommerce主題WooCommerce外掛WooCommerce客製WordPress網頁設計SEO工具SearchConsole教學GoogleAnalytics教學GoogleAds教學架站資源聯絡我們選單WordPressWordPress教學ＷordPress主題WordPress外掛WordPress相關工具WordPress客製Elementor教學WooCommerceWooCommerce教學WooCommerce主題WooCommerce外掛WooCommerce客製WordPress網頁設計SEO工具SearchConsole教學GoogleAnalytics教學GoogleAds教學架站資源聯絡我們搜尋>架站資源>ColorZilla色碼工具教學，Chrome擴充程式抓取網頁特定顏色代碼架站資源ColorZilla色碼工具教學，Chrome擴充程式抓取網頁特定顏色代碼內容目錄ColorZilla安裝教學ColorZilla使用教學結語：歡迎回到鵠學苑—WordPress網頁設計超詳細攻略–ColorZilla製圖軟體，在配色、抓色，都會用到類似Photoshop內的“滴管”來抓取此色塊色號，我們都知道程式內的滴管無法直接抓取網頁上的色塊，那在網頁上看到喜歡的配色、想知道色號套用在自己的圖或網站內你會怎麼做？有種方式是截圖下來後拉進你的做圖程式再用滴管抓色。
那有沒有更方便的方法？有的，就是ColorZilla。
ColorZilla是一款瀏覽器擴充工具，根據官方擴充程式的介紹說明：ColorZilla包括拾色器，滴管，漸變發生器和許多其他高級顏色工具，使用ColorZilla，可以從瀏覽器中的任何位置獲取顏色，以CSS、RGB、Hex和其他格式自動將生成或採樣的顏色複製到剪貼板，目前可以在Chrome及FireFox上使用。
接下來跟著鵠學苑的腳步，讓我們開始學習吧！Chrome線上應用程式下載https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnpColorZilla官方網址https://www.colorzilla.com/ColorZilla安裝教學第一步：進入Chrome線上應用程式商店下載。
第二步：點選“加到Chrome”後會跳出小視窗，點選新增擴充功能。
在官網上有聲明ColorZilla不會在任何網站上收集您的任何數據或瀏覽活動但需要此權限才能從網站中選擇顏色的基本功能。
第三步：安裝完畢後即可在工具列上看到滴管圖示的ColorZilla。
ColorZilla使用教學第一步：點擊滴管圖示點選PageColorPickerActive，將鼠標移置想要抓取的色塊上，確定好後點擊滑鼠一下，色號就會自動複製到黏貼板內了。
第二步：PickedColorHistory選項：右邊格子裡會顯示出你查詢過的顏色，而左邊則是調色盤功能意義上並不大。
第三步：PaletteBrowser選項：可以查詢色彩飽和度、網頁安全用色等等。
第四步：WebpageColorAnalyzer選項：顯示出你現在網頁上所有CSS顏色，典籍顏色可看到色碼。
第五步：最後CSSGradientGenerator選項：點擊後會另開一個視窗，可以設定漸層顏色，包含垂直、水平、斜角，除了有預設的顏色外也可自行設定漸層。
第六步：而設定完後即可得到一組CSS碼，如此就可以得知控制當前網頁樣式的CSS語法了喔！結語：在使用過程中，發現查詢網頁所有CSS色彩的功能會有無法顯示的狀況，除此大家可以使用抓色的功能運用在自己的圖及網頁中呦！今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新WordPress教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到鵠崙設計 做線上免費諮詢喔！我們下次的教學見～架站資源相關文章：GooglePageSpeedInsight網站速度測試Google試算
· 第二步：點選“加到Chrome” 後會跳出小視窗 ...SkiptocontentWordPressWordPress教學ＷordPress主題WordPress外掛WordPress相關工具WordPress客製Elementor教學WooCommerceWooCommerce教學WooCommerce主題WooCommerce外掛WooCommerce客製WordPress網頁設計SEO工具SearchConsole教學GoogleAnalytics教學GoogleAds教學架站資源聯絡我們選單WordPressWordPress教學ＷordPress主題WordPress外掛WordPress相關工具WordPress客製Elementor教學WooCommerceWooCommerce教學WooCommerce主題WooCommerce外掛WooCommerce客製WordPress網頁設計SEO工具SearchConsole教學GoogleAnalytics教學GoogleAds教學架站資源聯絡我們搜尋>架站資源>ColorZilla色碼工具教學，Chrome擴充程式抓取網頁特定顏色代碼架站資源ColorZilla色碼工具教學，Chrome擴充程式抓取網頁特定顏色代碼內容目錄ColorZilla安裝教學ColorZilla使用教學結語：歡迎回到鵠學苑—WordPress網頁設計超詳細攻略–ColorZilla製圖軟體，在配色、抓色，都會用到類似Photoshop內的“滴管”來抓取此色塊色號，我們都知道程式內的滴管無法直接抓取網頁上的色塊，那在網頁上看到喜歡的配色、想知道色號套用在自己的圖或網站內你會怎麼做？有種方式是截圖下來後拉進你的做圖程式再用滴管抓色。
那有沒有更方便的方法？有的，就是ColorZilla。
ColorZilla是一款瀏覽器擴充工具，根據官方擴充程式的介紹說明：ColorZilla包括拾色器，滴管，漸變發生器和許多其他高級顏色工具，使用ColorZilla，可以從瀏覽器中的任何位置獲取顏色，以CSS、RGB、Hex和其他格式自動將生成或採樣的顏色複製到剪貼板，目前可以在Chrome及FireFox上使用。
接下來跟著鵠學苑的腳步，讓我們開始學習吧！Chrome線上應用程式下載https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnpColorZilla官方網址https://www.colorzilla.com/ColorZilla安裝教學第一步：進入Chrome線上應用程式商店下載。
第二步：點選“加到Chrome”後會跳出小視窗，點選新增擴充功能。
在官網上有聲明ColorZilla不會在任何網站上收集您的任何數據或瀏覽活動但需要此權限才能從網站中選擇顏色的基本功能。
第三步：安裝完畢後即可在工具列上看到滴管圖示的ColorZilla。
ColorZilla使用教學第一步：點擊滴管圖示點選PageColorPickerActive，將鼠標移置想要抓取的色塊上，確定好後點擊滑鼠一下，色號就會自動複製到黏貼板內了。
第二步：PickedColorHistory選項：右邊格子裡會顯示出你查詢過的顏色，而左邊則是調色盤功能意義上並不大。
第三步：PaletteBrowser選項：可以查詢色彩飽和度、網頁安全用色等等。
第四步：WebpageColorAnalyzer選項：顯示出你現在網頁上所有CSS顏色，典籍顏色可看到色碼。
第五步：最後CSSGradientGenerator選項：點擊後會另開一個視窗，可以設定漸層顏色，包含垂直、水平、斜角，除了有預設的顏色外也可自行設定漸層。
第六步：而設定完後即可得到一組CSS碼，如此就可以得知控制當前網頁樣式的CSS語法了喔！結語：在使用過程中，發現查詢網頁所有CSS色彩的功能會有無法顯示的狀況，除此大家可以使用抓色的功能運用在自己的圖及網頁中呦！今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新WordPress教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到鵠崙設計 做線上免費諮詢喔！我們下次的教學見～架站資源相關文章：GooglePageSpeedInsight網站速度測試Google試算