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)，讓動畫的銜接更為順暢
- 使用優雅的無聲定時播放音效方式來製造音檔緩存
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中