2023-6-9 周周
如果想知道某個網(wǎng)站配色方式，除了打開開發(fā)人員工具或是檢視源碼，也有第三方服務(wù)可以使用，即使無法完整復(fù)制別人的配色，也能快速得知網(wǎng)站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務(wù)或許可以滿足，這項(xiàng)服務(wù)會提取特定網(wǎng)頁使用的顏色，讓顏色相關(guān)信息更一目了然。
本文要介紹的「Alwane」是一個網(wǎng)頁色彩提取工具，可以在使用者輸入特定的網(wǎng)址后取得該網(wǎng)站使用的顏色代碼或描述，產(chǎn)生為調(diào)色盤鏈接，重新分類、編排各種顏色，最簡單的使用方式是輸入網(wǎng)站網(wǎng)址就能提取，也能顯示其他相關(guān)色彩，如果想分析、保存某個網(wǎng)站或品牌使用的顏色，Alwane 是個非常方便而且好用的工具。
除了將提取的顏色代碼以可視化方式呈現(xiàn)，還能夠以調(diào)色盤或是程序代碼方式呈現(xiàn)，包括 CSS 和 SASS 兩種顯示程序代碼，對于要取得特定的網(wǎng)站顏色來說很有用，若有類似需求的話不妨打開 Alwane 網(wǎng)站試試看。
網(wǎng)站鏈接：https://alwane.io/
使用教學(xué)
開啟 Alwane 網(wǎng)站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網(wǎng)址，預(yù)設(shè)情況下會從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設(shè)定選項(xiàng)找到。
從提取后的色彩結(jié)果可以看到各種顏色分布，包括顏色的預(yù)覽、變量名稱和色碼（hex code），從左側(cè)可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。
從上方選項(xiàng)切換調(diào)色盤或程序代碼模式，也能快速將所有 CSS 代碼復(fù)制到剪貼簿。
如果想要保存或分享網(wǎng)站的配色、調(diào)色盤、CSS 等信息，點(diǎn)選右上角「Generate」就能產(chǎn)生鏈接咯！
值得一試的三個理由：
文章來源：優(yōu)設(shè)網(wǎng) 作者：PSERIC
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com