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 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
特別色印刷的基本概念
在印刷領域，色彩的精確表現一直是設計師們追求的目標。然而，有些印刷品需要的顏色是基本的CMYK油墨無法達到的，這時候特別色印刷就派上了用場。特別色印刷是使用專門調製的油墨，來呈現那些CMYK無法表現的獨特色彩。這些特別調和的油墨，不僅能精確地再現設計師心中的顏色，還能避免色彩
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
在視覺設計中，色彩不僅僅是裝飾，它傳遞情感、引導用戶行為，並加強品牌識別。Netflix作為一個領先的串流媒體服務平台，其網站和應用的色彩選擇，就是從電影院的經典色彩組合中汲取靈感：黑色、白色和紅色。這不僅是一種視覺策略，也是一種心理策略，旨在為用戶提供最佳體驗。
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
特別色印刷的基本概念
在印刷領域，色彩的精確表現一直是設計師們追求的目標。然而，有些印刷品需要的顏色是基本的CMYK油墨無法達到的，這時候特別色印刷就派上了用場。特別色印刷是使用專門調製的油墨，來呈現那些CMYK無法表現的獨特色彩。這些特別調和的油墨，不僅能精確地再現設計師心中的顏色，還能避免色彩
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
前幾天我在網路上看見一個不錯的網站，如果喜歡繪畫的你，這將會是一個不錯的輔助工具。
那就快快收藏吧!
小編喜歡收集一些覺得不錯用的資訊，目前不定時的發文，希望可以達到每天發文，並且找到值得收藏的好東西。
而今日要跟各位介紹的就是一款可以讓你簡易操作幫你搭配色彩的好工具。
有見過的那
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
在視覺設計中，色彩不僅僅是裝飾，它傳遞情感、引導用戶行為，並加強品牌識別。Netflix作為一個領先的串流媒體服務平台，其網站和應用的色彩選擇，就是從電影院的經典色彩組合中汲取靈感：黑色、白色和紅色。這不僅是一種視覺策略，也是一種心理策略，旨在為用戶提供最佳體驗。
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中