Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化

HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化
Copyright : vasilyrosca / 123RF Stock Photos

現在比較少有機會從頭到尾、以原始碼編寫一個網頁,記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站,最早的網頁就是直接用 HTML 文字編輯器寫出來,後來有了所見即所得編輯器,很多事情變得很方便,也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容,看看呈現出來的結果是否正確,可試試接下來的免費工具。

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故,造成許多旅客輕重傷甚至死亡,也對台灣交通運輸安全打上一個大大的問號,各種資訊隨著時間不斷被揭露出來,讓我懷疑需要多好的運氣才能平安度過每一天?發生憾事後再多道歉和賠償也無法撫平傷痛,或許平常就該認真謹慎面對所有大小事情,扣除天災更多的是人禍,往往都是過於疏忽怠慢、不夠嚴謹造成的。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

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

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType Sample 這類工具快速找到我要的資訊。

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤
(Copyright: photovibes / 123RF Stock Photo

若你有接手編輯過他人網頁,或是複製其他頁面版型的經驗,應該會發現最困難的往往不是編輯網站,而是將現有的程式碼整理乾淨,讓它能夠格式化,呈現出一致的效果。尤其對於一些較為複雜的頁面,可能經過許多人無數次編輯後已經有些四不像,這時候就必須將不必要的部份代碼刪除,只留下最基本的部分,而這些過程大部分都是手動進行,不但很耗費時間心力,而且很可能因為修改錯誤而讓整個頁面跑掉。

超實用!一行程式碼將瀏覽器變身網頁編輯器,支援各種常見瀏覽器

超實用!一行程式碼將瀏覽器變身網頁編輯器

這幾天在 Twitter 看到一則推文分享,只要一段程式碼,就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能,直接在網頁內進行內容編輯測試(對,直接編輯網頁中的文字),這對於網頁開發者來說很有用,尤其是當你想知道選單可以容納多少文字,或是標題、內文會在多少字以後換行,就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁!直接把瀏覽器變身網頁測試工具」又要更簡單一些。

HTML Editor 線上所見即所得編輯器,將內容快速轉為 HTML 原始碼

HTML Editor 線上所見即所得編輯器,將內容快速轉為 HTML 原始碼
(Copyright: grinvalds / 123RF Stock Photo

記得以前剛開始接觸網頁製作時都是使用 Microsoft FrontPage 編輯器,也正因為有所見即得編輯器,才能讓原本複雜難懂的 HTML 原始碼變得更簡單易懂,它將原始碼轉換成可視化內容,只要直接輸入文字、圖片、超鏈結後修改樣式即可將網頁製作出來,當然這些頁面背後仍是有所謂的 HTML 程式碼存在,只在需要時才會切換原始碼模式。

Type Anything 從瀏覽器測試建立完美網頁排版,一鍵匯出 CSS 樣式

Type Anything 從瀏覽器測試並建立最完美網頁排版,一鍵將 CSS 樣式匯出套用
(Copyright: pakhnyushchyy / 123RF Stock Photo

不怕說出來讓大家知道,其實我對網頁設計很挑剔,尤其在排版方面。如果你經常回來免費資源網路社群,應該會發現這裡更新頻率很高,不單單只有文章內容汰舊換新,連最細節的文字設定我都費盡心思,主要是希望能帶給讀者最好的閱讀感覺。儘管沒有一項設計能符合所有人喜好,我仍在不斷測試、交換中找到最適合大多數人閱讀習慣的排版風格。

Font Fit 在你的網站上測試各種字型排版,即時預覽字體大小顏色樣式

Font Fit 在你的網站上測試各種字型排版,即時預覽字體大小顏色樣式
(Copyright: baks / 123RF Stock Photo

設計網頁時排版和色彩選擇非常重要,其中色彩可以參考「BrandColors」從世界知名品牌標準色來獲得靈感,或是一些我曾經介紹過的配色工具;排版的話考量到字型和字體大小、間距、行高等等,這也是我平時不斷調整及測試的部分。對內容網站來說,提供閱聽者良好閱讀體驗不僅是考驗也是需要努力的目標,試著以讀者角度想,當你在閱讀網站時,會想要得到什麼樣的感覺,這麼說好像有點抽象,你可以利用 Font Fit 來找出最合適的排版設計。