Sublime Text 3:色のプレビューとPhotoshop風カラーピッカー

この記事は約3分で読めます。
記事内に広告が含まれています

操作画面

こんにちは、さち です。

先日、「Sublime Text 3」に
カラーコードをインラインプレビュー(色見本)で確認できる「ColorHelper」
Photoshop 風のカラーピッカーが使える「ColorPicker」
2つのパッケージを新しく導入しました。

今回は、これらのパッケージの機能や設定などについて
書いていきます。

スポンサーリンク

カラーコードの横に色見本を表示する「ColorHelper」

概要

  1. パッケージ「ColorHelper」を導入すると
    カラーコードの横にインラインプレビュー(色見本)が表示されるようになります。
    操作画面
  2. インラインプレビューをクリックすると
    カラーコードの記述形式、パレットやピッカーからの色選択
    現在の色をパレットにお気に入り登録(mark)ができます。
    操作画面
  3. カラーピッカーはこんな感じ。エクセルの「色の設定」みたいですね。
    操作画面

設定

下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。

  1. メニューの「基本設定」→「Package Settings」と進みます。
    Sublime Text 3 Package Settings パッケージ設定
  2. 「ColorHelper」→「Settings」と進みます。
    操作画面
  3. 「color_helper.sublime-settings - User」の方に変更する設定を記述します。
    初期設定の方に各項目の解説(英語)があるので大体分かると思います。
    私は下記のように設定を変更しました。

    {
      // インラインプレビュー(色見本)の位置を右に
      "inline_preview_position": "right",
      // カラーボックスのサイズを小さく
      "graphic_size": "small",
      // カラーボックスをクリックしたらカラーピッカーを開く
      "click_color_box_to_pick": "color_picker",
      // カラーピッカーに「ColorPicker」パッケージを使う
      "use_color_picker_package": true,
      // カラーコードを大文字で記述
      "upper_case_hex": true,
    }

 

Photoshop 風のカラッピッカーを実装する「ColorPicker」

概要

操作画面

「ColorPicker」パッケージを導入すると
上のような、カラッピッカーを使用できるようになります。

Photoshop 風のデザインのカラーピッカーなので
Photoshop に慣れ親しんでいる人に使いやすいと思います。

前述の、「ColorHelper」と連携することで
「ColorHelper」のカラーピッカーを「ColorPicker」のものに変更できます

ただ、カラーピッカーの動作が若干重いのが難点です。

設定

「ColorPicker」を起動するショートカットキーが機能しなかったので
ユーザのキーバインドとして登録します。

下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。

  1. メニューの「基本設定」→「キーバインド - ユーザ」と進みます。
    Sublime Text 3 キーバインド
  2. 「ColorPicker」を表示するショートカットキーを記述します。
    下記例の場合、「Ctrl + Shift + C」キーを押すとカラーピッカーが表示されます。

    {
      //「ColorPicker」を起動するショートカットキー
      { "keys": ["ctrl+shift+c"], "command": "color_pick" },
    }

コメント

タイトルとURLをコピーしました