![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg869lcu-Z7CW3ymk7pIKR1uegjhArm_KSRJf0iC1Yf3Wi16IN0ENmK5GEsPS3nBv-ztP38O59YN9_WgBcp_5yPYjK9QTKLIbZFTNPnAdkkHadgMOu_nRIcmseyAuLXbrwIcBJgkmNu0gwPNzldupGBNlCvwnJ6NsOl8daJXQwuBlWHIpC2Vp_qIzOZS5pf/s600-rw/realtime-colors01.webp)
服務介紹:
Realtime Colors 提供免費的即時視覺化選色工具,幫助用戶快速選定網頁配色和字體樣式。進入網站會看到浮動工具列,包含文字、背景、主色/輔色、深色/淺色主題。在工具列上選擇顏色,網頁將立即呈現對應的配色效果,還可隨機產生配色方案。選定顏色後可以獲取 HEX、RGB、HSL 等色碼。語言:英文
網址:https://www.realtimecolors.com/
如何使用 Realtime Colors 線上工具:
1. 開啟 Realtime Colors 網站,在網頁下方有一個浮動工具列,讓使用者選擇文字、背景、主要/次要等顏色。![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgme-8nDpAYa1QMfd4ARFEhHD_L0UihluUEj1VM0ldp1laaXaDh0qUcs4GVbVWpUvhE5hsHBYmj5k2rLVPXASFUfxLU9sUd_pXQLOZPSYIhzzLwHd98Odu4RxrEV49rC0SiGVd2ivV7qgnw0AL70donwTW7ijM7x6v6WSZur6eyDdQP2xwX0pS6xFZw3Bp-/s900-rw/realtime-colors02.webp)
2. 例如,點擊「Text」會展開選色盤,選擇顏色就看到網頁上的文字顏色跟著改變,方便預覽配色效果。
![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhbqfxqvrDrRYlucvRSdMxo-KFS5cyEyLPeUo0VFVfSbSmi2k5iuRW6k9P-4x-AszeV2UeU5yAr2orqF3_m3gmCBPPs5904XDGZCqm0BbtlNLFi6NhnYfoJ6Wry7vTVXk6MRT42rEMMXr7OpecqLceJt37H7HL4UJZVSPOko4mjuWrk9TLcM0lPkBUFfr/s900-rw/realtime-colors03.webp)
3. 使用 Realtime Colors 可以快速測試不同的顏色組合,如果要設計深色主題的網站,點擊「Dark/Light」按鈕會切換深色/淺色主題。
![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kJO_myXo7XLkGUArFfXnytv2csy-UnPnwgHSNW_rJViJf_92Jpb4SnSuhHfi7ugyhy3DTgs6OPetTeIqlbOVEIvLiqyym4PcStGXc6gbHmn54VpJV9HeWB9oXxhRVnfx2DbIXWD69nISzGeXcjdsZGcoA2-JAzr0GUmSJdxZPVsw-XIrooeQ9o9BIYc6/s900-rw/realtime-colors04.webp)
4. 除了在網站首頁預覽配色效果,點擊「Templates」可選擇預覽 Dashboard 或 Blog Post 範本。
![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zIeqkX0h1m2_qnLioSDRW6Z9BJTl_MRV0C7crlIFaauDHkSblpo6_oL0BLrcZ1X8b2EHLFppVhlb10k1RjBzaV_4KNScWBctiwb07X1e10NXwN9PhMKX7IY9mVS7Fg3HDY9l67Qy6MUIJvtodhb_CHu-koXKuT_treb0wXI2W4G-uIt-o81v7cXWWkwB/s900-rw/realtime-colors05.webp)
5. 對於如何配色沒有概念的話,點擊「Randomize Colors」會隨機更換顏色,讓使用者挑選不同的顏色搭配。
![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga-fCVHKHDHyRg72RDq49SCVQ_aRtCmsSHiM0zW_9G-4xkQdXONzOJ4TvR6UDsLf5JgBZP_MJFbqRiEeetb2goPQ7VRNU3iXnWk0kpjYHRs1lx8ZT2lnbS_cIcG2LRMcYF4Hy7kivpoJm3t1ic0WPcMch2jKqHLumfLbBjB-_nDF8xXLpN2BJFHQcIICV5/s800-rwa/realtime-colors06.webp)
6. 選定配色效果後,點擊「Export」按鈕會有 CSS、Tailwind CSS、SCSS 代碼和 HEX、RGB、HSL、OKLAB、OKLCH 色碼,可以直接用於網站設計。
![Realtime Colors 即時視覺化網站配色工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq745mZRcTHMUH9PrtBzD-BB08mo_wRDzepphQtaPNv0dxX0gm5lVedVVTFSjN3E0vNt1HCiWMdO287j3j8UTnupKuRrFXJEf9amP2cVYZX-vMSPe7VNdMrbLEmVN6WYRApR9z1fvuQyzt7X9q5mlIQmslwTWbjqA1TMCwa53PcAEPg1_Wrr7hKTAVrRfM/s900-rw/realtime-colors07.webp)
延伸閱讀:
0 留言