{"id":21802573,"url":"https://github.com/rayc2045/html-reserved-colors","last_synced_at":"2026-05-01T21:33:57.136Z","repository":{"id":140269956,"uuid":"434147621","full_name":"rayc2045/html-reserved-colors","owner":"rayc2045","description":"A simple yet powerful color picker that lets users instantly select and copy HTML reserved colors with a single click.","archived":false,"fork":false,"pushed_at":"2025-04-21T13:31:40.000Z","size":183,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T23:48:19.963Z","etag":null,"topics":["color-palette","color-picker","colorpicker","neumorphic","neumorphic-css","neumorphic-design","neumorphic-ui","neumorphism","neumorphism-ui","petite-vue","vue","vue3"],"latest_commit_sha":null,"homepage":"https://color-names.netlify.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-02T08:55:43.000Z","updated_at":"2025-04-21T13:31:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"9d6edab4-9946-4593-a9b6-822a0f351c5f","html_url":"https://github.com/rayc2045/html-reserved-colors","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rayc2045/html-reserved-colors","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fhtml-reserved-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fhtml-reserved-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fhtml-reserved-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fhtml-reserved-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/html-reserved-colors/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fhtml-reserved-colors/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259952352,"owners_count":22936945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-palette","color-picker","colorpicker","neumorphic","neumorphic-css","neumorphic-design","neumorphic-ui","neumorphism","neumorphism-ui","petite-vue","vue","vue3"],"created_at":"2024-11-27T11:29:32.041Z","updated_at":"2025-10-07T11:52:20.902Z","avatar_url":"https://github.com/rayc2045.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具\n\n![Cover](https://cdn.dribbble.com/users/3800131/screenshots/17078957/___2021-12-05___10.44.52.png)\n\n[\u003e HTML Reserved Colors](https://color-names.netlify.app/)\n\n### 簡介\n雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 [HTML Color Names](https://www.w3schools.com/tags/ref_colornames.asp) 才知道有將近 140 種網頁保留色，覺得似乎記住或是有系統的管理這些顏色有助於提升開發效率，因此決定做一個能夠幫助開發、同時也能作為美術作品來展示的 web app。色卡的外觀設計上，聯想到在 2020 年風靡一時的新擬物風格 Neumorphism (即 New Skeuomorphism)，對於使用亮暗陰影就能做出 3D 視覺效果而深受啟發，未曾嘗試過的好奇心驅使我完成了這次的作品。\n\n### 外觀與互動設計\n- 以 Neumorphism 新擬物風格作為主視覺，再加上可愛的圓角，呈現出比 [Pantone 色票](https://www.pantone.com/media/wysiwyg/pantone-color-swatches-palette-fashion-color-report-fall-2017-new-york.jpg) 更為討喜、耐看的色票卡片\n- 顏色名稱的字體大小和上下間距，依照長度做三段漸進調整\n- 封鎖不必要的文字選取、拖拉和右鍵點擊操作，並設計雙擊左鍵 (觸控設備點兩下) 直達頁首\n- 在鼠標碰觸到顏色名稱、HEX/RBG 碼時，更換鼠標為滴管圖案以提示可複製區域，同時也將預設和客製化鼠標改得稍大一些，且統一顏色為較淡一點的黑色 (`#222`)\n- 點擊複製顏色名稱、HEX/RBG 碼時，加入複製成功的音效，提升使用體驗\n- 將網站設計為可在網址後加入 Query String 參數 `colors`，實現方便的顏色分享功能 ([範例](https://color-names.netlify.app/?colors=darkorange+indianred+sandybrown+seagreen+darkseagreen+lightslategray))\n\n### 開發紀錄\n- 自製 [色彩資料 API](https://raw.githubusercontent.com/rayc2045/html-reserved-colors/main/src/api/colors.json)\n- 使用相似於 [Preact](https://preactjs.com/) 的 micro-library [petite-vue](https://github.com/vuejs/petite-vue)，開發無需 build\n- 將通用型程式碼與專案用程式碼進行拆分，需要時再模組化引入做使用 (module import)\n- 排版採手機優先 (mobile first)，並使用 Flexbox 讓色票卡片達到自適應效果，以及使用 `rem` 和 `em` 作為元件單位，達成在任何尺寸裝置上 (120 吋超大螢幕也 ok！)，保持一致絕佳比例的響應式設計\n- 將網頁元素預設為不可見 (`opacity: 0`)，等資料掛載後再配合動畫做淡入 (fade in)，讓動畫的銜接更為順暢\n- 使用優雅的無聲定時播放音效方式來製造音檔緩存","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fhtml-reserved-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fhtml-reserved-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fhtml-reserved-colors/lists"}