[完全用 GNU/Linux 工作] 14. 色碼擷取器 - Gpick, Gcolor2
在開發網頁時多少會自訂些顏色來符合網站整體的風格,這時凍仁會先透過「色碼擷取器」來挑選適合的顏色。在 GNU/Linux 裡我們可以使用 Gpick 及 Gcolor2 來擷取它們。
Gpick 是個基於 C++ 及 GTK+ 所開發的進階色碼擷取器,完整度比 Gcolor2 高上不少。前者除了色碼擷取 (Color picker) 跟色碼產生器 (Scheme generation) 以外,更多了協助色碼擷取的貼心放大鏡以及版面預覽 (Layout preview) 功能。
![2013-10-01-gpick-01.png.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOv7RVMQnNBw-ITd9pJn3UbjfAohYGP5pBRuIcDUnGpif1ehD3GoytPtPSKAWkl2M_Th76LBiadL73L-nNs-xWhAEK47aaEUs0yC_Y0j3ntjI0D6ZvW1BfybbSqgvixeZ7iNFdCMHpltQ/s400/2013-10-01-gpick-01.png.png)
▲ Gpick 截圖。
安裝 gpick。
移動滑鼠並於欲擷取的地方按下空白鍵。
![2013-10-01-gpick-02.png.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo9_XVILGdMkGvQsMtolLpgq1LiHUiwmT8W-HjyQviUgrbsweggTkXqgk4_qv-e72iVb8cBqvVDRZ6mwhF_-bR0Jd2COPaT9oyRVHpcTHVfelCwSnitA7H8MdvHBRVDctI2ti_Y32Zi4/s400/2013-10-01-gpick-02.png.png)
▲ Color picker 。
轉動色盤以產生各種顏色。
![2013-10-01-gpick-03.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5_EgHoetSJN-itj44X-pVbO5SJnogcIQIgFIO2FfgbpJTUHGQd_Yx_mhLPl7sSTfhrlQGymecjgX6-gYvpDVU87axojkeWdFXx5BzF89_UwjwwHeisMYsLzIkgksXTD350HXlrMpGHw/s400/2013-10-01-gpick-03.png)
▲ Scheme generation。
藉由蒐集的色碼進行網頁、選單等的設計。
![2013-10-01-gpick-04.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL24GB3p5ThH55gCdDV9wgkpLWLlDgKY4IX-1DBfGEMItjiXneJP_yrNnNv-I7FmvkeCMwyjdjzVQYE-7yRQWF_q5zyIG7vpNJeQ9hQGkHNBc6ZbanWUolv3ot-DU32jy4fb28c_-6eLQ/s400/2013-10-01-gpick-04.png)
▲ Layout preview。
在色碼、區塊上開啟右鍵選單時可透過「複製到寫字板 (Copy to clipboard)」將色碼轉成 16 進位、RGB、HSL 三種格式。
![2013-10-01-gpick-05.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5vqPrPBiGqvknKbjs4-2MOfjftqqpCIWvn9ybA3hMw9NjngDvbH7qCzQZzBPZmmUMfe2ymGzbk0eG0jhuaf0QHKNKjaaQrjBNTqEg_xSaa1IFr69qaWEuNBfKf4okiZqPDVelis1iZM/s400/2013-10-01-gpick-05.png)
▲ Copy to clipboard。
若客官喜歡功能較簡潔的色碼擷取器,不訪試試看 Gcolor2,其套件容量約比 Gpick 小 3 倍。
![2013-10-01-gcolor2-01.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdhmM8NVxFbpThwZMLvyr8pCOaoWMXHlVTnXzlK_8__fHZdvbqwtStjKOxT-WGx25sFdYl5E9VOgQJ6Uhvui9wVKnN9o3QCsgu_bMsc1d8YTo_9JGz4ljwKgb-ij1MVu3a9y-1_13QK8/s400/2013-10-01-gcolor2-01.png)
▲ gcolor2 截圖。
安裝 gcolor2。
Gpick 是個基於 C++ 及 GTK+ 所開發的進階色碼擷取器,完整度比 Gcolor2 高上不少。前者除了色碼擷取 (Color picker) 跟色碼產生器 (Scheme generation) 以外,更多了協助色碼擷取的貼心放大鏡以及版面預覽 (Layout preview) 功能。
![2013-10-01-gpick-01.png.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOv7RVMQnNBw-ITd9pJn3UbjfAohYGP5pBRuIcDUnGpif1ehD3GoytPtPSKAWkl2M_Th76LBiadL73L-nNs-xWhAEK47aaEUs0yC_Y0j3ntjI0D6ZvW1BfybbSqgvixeZ7iNFdCMHpltQ/s400/2013-10-01-gpick-01.png.png)
▲ Gpick 截圖。
安裝 gpick。
[ jonny@linux ~ ]
# Arch Linux
$ sudo pacman -S gpick
# CentOS, RHEL, Fedora
$ sudo yum install gpick
# Debian, Ubuntu
$ sudo aptitude install gpick
# SUSE, openSUSE
$ sudo zypper in gpick
1. 色碼擷取 (Color picker)
移動滑鼠並於欲擷取的地方按下空白鍵。
![2013-10-01-gpick-02.png.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo9_XVILGdMkGvQsMtolLpgq1LiHUiwmT8W-HjyQviUgrbsweggTkXqgk4_qv-e72iVb8cBqvVDRZ6mwhF_-bR0Jd2COPaT9oyRVHpcTHVfelCwSnitA7H8MdvHBRVDctI2ti_Y32Zi4/s400/2013-10-01-gpick-02.png.png)
▲ Color picker 。
2. 色碼產生器 (Scheme generation)
轉動色盤以產生各種顏色。
![2013-10-01-gpick-03.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5_EgHoetSJN-itj44X-pVbO5SJnogcIQIgFIO2FfgbpJTUHGQd_Yx_mhLPl7sSTfhrlQGymecjgX6-gYvpDVU87axojkeWdFXx5BzF89_UwjwwHeisMYsLzIkgksXTD350HXlrMpGHw/s400/2013-10-01-gpick-03.png)
▲ Scheme generation。
3. 版面預覽 (Layout preview)
藉由蒐集的色碼進行網頁、選單等的設計。
![2013-10-01-gpick-04.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL24GB3p5ThH55gCdDV9wgkpLWLlDgKY4IX-1DBfGEMItjiXneJP_yrNnNv-I7FmvkeCMwyjdjzVQYE-7yRQWF_q5zyIG7vpNJeQ9hQGkHNBc6ZbanWUolv3ot-DU32jy4fb28c_-6eLQ/s400/2013-10-01-gpick-04.png)
▲ Layout preview。
4. 色碼轉換
在色碼、區塊上開啟右鍵選單時可透過「複製到寫字板 (Copy to clipboard)」將色碼轉成 16 進位、RGB、HSL 三種格式。
![2013-10-01-gpick-05.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5vqPrPBiGqvknKbjs4-2MOfjftqqpCIWvn9ybA3hMw9NjngDvbH7qCzQZzBPZmmUMfe2ymGzbk0eG0jhuaf0QHKNKjaaQrjBNTqEg_xSaa1IFr69qaWEuNBfKf4okiZqPDVelis1iZM/s400/2013-10-01-gpick-05.png)
▲ Copy to clipboard。
5. 補充說明 (Gcolor2)
若客官喜歡功能較簡潔的色碼擷取器,不訪試試看 Gcolor2,其套件容量約比 Gpick 小 3 倍。
![2013-10-01-gcolor2-01.png](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdhmM8NVxFbpThwZMLvyr8pCOaoWMXHlVTnXzlK_8__fHZdvbqwtStjKOxT-WGx25sFdYl5E9VOgQJ6Uhvui9wVKnN9o3QCsgu_bMsc1d8YTo_9JGz4ljwKgb-ij1MVu3a9y-1_13QK8/s400/2013-10-01-gcolor2-01.png)
▲ gcolor2 截圖。
安裝 gcolor2。
[ jonny@linux ~ ]
# Debian, Ubuntu
$ sudo aptitude install gcolor2
# CentOS 6.4 的套件庫尚未收錄 gcolor2。
本文同步發佈於 iT 邦幫忙。
相關連結:
★ HSL 和 HSV 色彩空間 - 維基百科
★ [CSS3] hsl 及 hsla 顏色 | 男丁格爾's 脫殼玩
★ PicPick - Color picker for Windows.
★ PicPick v3.2.7 抓圖、圈選、畫箭頭、加註解…一次搞定!(繁體中文版) | 重灌狂人
資料來源:
★ gpick: 功能强大的拾色器 — LinuxTOY
★ Digitized Life: 玄關色彩計畫 - Gpick