HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具
更新於 發佈於 閱讀時間約 2 分鐘
簡介
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近 140 種網頁保留色，覺得似乎記住或是有系統的管理這些顏色有助於提升開發效率，因此決定做一個能夠幫助開發、同時也能作為美術作品來展示的 web app。色卡的外觀設計上，聯想到在 2020 年風靡一時的新擬物風格 Neumorphism (即 New Skeuomorphism)，對於使用亮暗陰影就能做出 3D 視覺效果而深受啟發，未曾嘗試過的好奇心驅使我完成了這次的作品。
外觀與互動設計
- 以 Neumorphism 新擬物風格作為主視覺，再加上可愛的圓角，呈現出比 Pantone 色票 更為討喜、耐看的色票卡片
- 顏色名稱的字體大小和上下間距，依照長度做三段漸進調整
- 封鎖不必要的文字選取、拖拉和右鍵點擊操作，並設計雙擊左鍵 (觸控設備點兩下) 直達頁首
- 在鼠標碰觸到顏色名稱、HEX/RBG 碼時，更換鼠標為滴管圖案以提示可複製區域，同時也將預設和客製化鼠標改得稍大一些，且統一顏色為較淡一點的黑色 (`#222`)
- 點擊複製顏色名稱、HEX/RBG 碼時，加入複製成功的音效，提升使用體驗
- 將網站設計為可在網址後加入 Query String 參數 `colors`，實現方便的顏色分享功能 (範例)
開發紀錄
- 自製 色彩資料 API
- 使用相似於 Preact 的 micro-library petite-vue，開發無需 build
- 排版採手機優先 (mobile first)，並使用 Flexbox 讓色票卡片達到自適應效果，以及使用 `rem` 和 `em` 作為元件單位，達成在任何尺寸裝置上 (120 吋超大螢幕也 ok！)，保持一致絕佳比例的響應式設計
- 將網頁元素預設為不可見 (`opacity: 0`)，等資料掛載後再配合動畫做淡入 (fade in)，讓動畫的銜接更為順暢
- 使用優雅的無聲定時播放音效方式來製造音檔緩存
為什麼會看到廣告
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
在這篇文章中，我們將介紹 HTML 和 CSS 的一些基礎概念，並一步一步教你如何利用這些工具設計美觀且實用的網頁。無論你是剛開始學習網頁開發還是希望深入了解如何控制頁面的布局，這篇文章都會幫助你打好基礎，開始設計你自己的網站。
這篇文章提供HTML基礎教學，涵蓋HTML基本架構、常用標籤、文字格式、圖片、表單、連結、HTML5語意標籤和class屬性等重要概念，並包含許多程式碼範例及輸出效果說明，適合初學者快速學習HTML網頁開發。
本文將介紹語意化標籤在 HTML 中的重要性，並列舉與解釋常用的語意化標籤，例如 <header>, <nav>, <main>, <article>, <section>, <aside>, 和 <footer> 的用途。
這篇文章說明HTML表單的基本結構，包含<form>、<input>、<label>、<select>、<button>等標籤的用法與屬性，並說明如何建立不同類型的輸入欄位，例如文字輸入、密碼輸入、電子郵件輸入、單選按鈕、複選框等等。
本文將介紹 HTML 表格的基本結構、使用方法與屬性，包含 <table>、<tr>、<th>、<td> 標籤，以及 border、cellpadding、cellspacing、rowspan 和 colspan 屬性，並說明如何合併儲存格與表格的使用時機。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
在這篇文章中，我們將介紹 HTML 和 CSS 的一些基礎概念，並一步一步教你如何利用這些工具設計美觀且實用的網頁。無論你是剛開始學習網頁開發還是希望深入了解如何控制頁面的布局，這篇文章都會幫助你打好基礎，開始設計你自己的網站。
這篇文章提供HTML基礎教學，涵蓋HTML基本架構、常用標籤、文字格式、圖片、表單、連結、HTML5語意標籤和class屬性等重要概念，並包含許多程式碼範例及輸出效果說明，適合初學者快速學習HTML網頁開發。
本文將介紹語意化標籤在 HTML 中的重要性，並列舉與解釋常用的語意化標籤，例如 <header>, <nav>, <main>, <article>, <section>, <aside>, 和 <footer> 的用途。
這篇文章說明HTML表單的基本結構，包含<form>、<input>、<label>、<select>、<button>等標籤的用法與屬性，並說明如何建立不同類型的輸入欄位，例如文字輸入、密碼輸入、電子郵件輸入、單選按鈕、複選框等等。
本文將介紹 HTML 表格的基本結構、使用方法與屬性，包含 <table>、<tr>、<th>、<td> 標籤，以及 border、cellpadding、cellspacing、rowspan 和 colspan 屬性，並說明如何合併儲存格與表格的使用時機。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那