MENU
contact

VSCodeのColorize拡張機能の使い方について

VSCode

採用はこちら

Colorizeは、VSCode上に記述されたカラーコードを実際の色で視覚的に表示できる拡張機能です。

CSSやSCSSなどに記述されている#ff0000やrgb(255, 0, 0)といった値を見ただけでは、具体的にどのような色なのか判断しにくいことがあります。

Colorizeを利用すると、カラーコードの背景や下線などに実際の色が表示されるため、コードを編集しながら色を確認しやすくなります。

Webサイト制作やフロントエンド開発など、カラーコードを頻繁に扱う場合に便利な拡張機能です。

この記事では、Visual Studio Marketplaceで公開されている「Colorize（拡張機能ID：kamikillerto.vscode-colorize）」を前提として使い方を解説します。

目次

Colorizeでできること

カラーコードを実際の色で表示できる

Colorizeの基本的な機能は、ソースコードに記述されているカラーコードを視覚化することです。

たとえば、CSSに次のようなコードが記述されているとします。

.button {
  background-color: #3498db;
  color: #ffffff;
}

Colorizeを有効にすると、#3498dbや#ffffffなどに対応する色がエディター上に表示されます。

カラーコードをブラウザやカラーピッカーで毎回確認する必要がなくなるため、配色を確認しながらコーディングしやすくなります。

さまざまなカラー形式を扱える

Colorizeでは、代表的なCSSカラー形式を扱えます。

たとえば、次のような記述です。

/* HEX */
color: #ff0000;

/* 短縮HEX */
color: #f00;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

/* 名前付きカラー */
color: red;

設定上は、HEXA、ARGB、RGB、HSL、BROWSERS_COLORS、OKLAB、OKLCHなどのカラータイプを指定できます。

そのため、一般的なHEX・RGB・HSLだけでなく、oklab()やoklch()などを扱う場合にも利用できます。

Colorizeをインストールする方法

VSCodeの拡張機能画面を開く

VSCodeを起動し、画面左側にある「拡張機能」のアイコンをクリックします。

WindowsやLinuxでは、次のショートカットでも拡張機能画面を開けます。

Ctrl + Shift + X

macOSでは次のショートカットです。

Cmd + Shift + X

Colorizeを検索する

拡張機能の検索ボックスに次のように入力します。

Colorize

類似した名前の拡張機能も存在するため、インストールする際は拡張機能IDを確認すると確実です。

対象となるColorizeの拡張機能IDは次のとおりです。

kamikillerto.vscode-colorize

Installをクリックする

目的のColorizeを開き、「Install」をクリックします。

インストールが完了すると、対応しているファイルでカラーコードの装飾が利用できるようになります。

Colorizeの基本的な使い方

CSSファイルを開く

Colorizeをインストールした状態でCSSファイルを開きます。

たとえば、次のようなコードを記述します。

body {
  background-color: #ffffff;
  color: #333333;
}

.button {
  background-color: #007bff;
}

Colorizeがカラーコードを認識すると、それぞれのカラーコードに対応した色が表示されます。

初期設定では、カラーコードの背景部分に色を表示するbackground方式が使用されます。

カラーコードを変更する

カラーコードを編集すると、表示される色も変更されます。

たとえば、

color: #ff0000;

を、

color: #0000ff;

に変更すると、赤色から青色に対応した表示へ変わります。

コードを書きながら色を確認できるため、配色調整を効率化できます。

Colorizeの設定を変更する方法

settings.jsonを開く

Colorizeの設定は、VSCodeのsettings.jsonから細かく変更できます。

コマンドパレットを開きます。

WindowsやLinuxでは、

Ctrl + Shift + P

macOSでは、

Cmd + Shift + P

を使用します。

続いて、

Preferences: Open User Settings (JSON)

を選択すると、ユーザー設定のsettings.jsonを開けます。

特定のプロジェクトだけに設定を適用したい場合は、ワークスペース内の次のファイルに記述します。

.vscode/settings.json

全プロジェクト共通で利用したい場合はユーザー設定、特定プロジェクトのみで利用したい場合はワークスペース設定を使い分けるとよいでしょう。

ColorizeをJavaScriptやTypeScriptで使う方法

colorize.languagesを設定する

Colorizeでは、colorize.languagesを利用して対象となる言語を指定できます。

たとえば、JavaScriptを対象に追加する場合は次のように設定します。

{
  "colorize.languages": [
    "css",
    "scss",
    "javascript"
  ]
}

これにより、JavaScript内に記述されているカラーコードもColorizeの対象にできます。

たとえば、次のようなコードです。

const primaryColor = "#3498db";
const dangerColor = "#e74c3c";

JavaScriptやTypeScriptでデザインシステムの色やテーマカラーを定数として管理している場合に便利です。

React系ファイルも対象にできる

Reactを利用している場合は、必要に応じて次の言語IDも追加できます。

{
  "colorize.languages": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ]
}

ただし、必要以上に対象言語を増やす必要はありません。

自分のプロジェクトで実際に使用している言語のみを指定すると管理しやすくなります。

Colorizeの表示方法を変更する

backgroundで背景色を表示する

Colorizeでは、colorize.decoration_typeによって表示方法を変更できます。

初期設定は次のbackgroundです。

{
  "colorize.decoration_type": "background"
}

カラーコードの背景に実際の色が表示されるため、もっとも分かりやすい表示方法です。

underlineで下線を表示する

背景色を付けると文字が読みにくい場合は、underlineを利用できます。

{
  "colorize.decoration_type": "underline"
}

カラーコードの下に色付きの線を表示できるため、コード自体の読みやすさを維持しやすくなります。

outlineで枠線を表示する

カラーコードの周囲に枠線として色を表示したい場合は、outlineを使用します。

{
  "colorize.decoration_type": "outline"
}

背景全体を塗りつぶしたくない場合に便利です。

dotやsquare-dotも利用できる

Colorizeでは、このほかに次の表示方式も利用できます。

dot
square-dot

背景を大きく着色せず、色をコンパクトに表示したい場合に選択肢となります。

表示するカラー形式を限定する方法

colorize.colorized_colorsを設定する

Colorizeでは、colorize.colorized_colorsによって対象となるカラー形式を指定できます。

たとえば、HEXカラーだけを対象にする場合は次のように設定します。

{
  "colorize.colorized_colors": [
    "HEXA"
  ]
}

複数の形式を対象にする場合は、次のように指定できます。

{
  "colorize.colorized_colors": [
    "HEXA",
    "RGB",
    "HSL"
  ]
}

必要なカラー形式だけに絞ることで、自分の開発環境に合わせてColorizeを利用できます。

OKLABやOKLCHも指定できる

Colorizeでは、設定上次のカラータイプも指定できます。

OKLAB
OKLCH

そのため、CSSでoklab()やoklch()を利用している場合にも設定対象として利用できます。

ColorizeでCSS変数を扱う方法

CSSカスタムプロパティにも対応している

Colorizeでは、CSSのカスタムプロパティを使ったカラー管理にも対応しています。

たとえば次のようなコードです。

:root {
  --primary-color: #3498db;
  --danger-color: #e74c3c;
}

.button {
  background-color: var(--primary-color);
}

Colorizeにはワークスペース内から変数を検索する機能があり、CSS変数やプリプロセッサー変数を扱う際に利用できます。

colorize.enable_search_variablesを設定する

変数検索に関係する設定が次の項目です。

{
  "colorize.enable_search_variables": true
}

初期値はtrueです。

この設定が有効になっている場合、Colorizeは対象となるワークスペースファイルを解析して変数を検索します。

ただし、プロジェクトの規模やファイル数によっては、変数検索がVSCodeの動作に影響する場合があります。

動作が重い場合は、次のように無効化することも検討できます。

{
  "colorize.enable_search_variables": false
}

SassやLessの変数をColorizeする

SCSSの変数を扱える

SCSSでは、次のような変数による色指定があります。

$primary: #3498db;
$danger: #e74c3c;

.button {
  background-color: $primary;
}

Colorizeは、このようなプリプロセッサー変数にも対応しています。

Lessの変数も扱える

Lessでは、次のように変数を定義できます。

@primary: #3498db;

.button {
  background-color: @primary;
}

対象とする変数形式は、colorize.colorized_variablesから調整できます。

たとえば、Lessの変数だけを対象にする場合は次のように設定します。

{
  "colorize.colorized_variables": [
    "LESS"
  ]
}

CSSだけでなく、SassやLessを利用しているプロジェクトでもColorizeを活用できます。

カーソルを置いた行でも色を表示する方法

hide_current_line_decorationsを変更する

Colorizeには、現在カーソルがある行の装飾を非表示にする設定があります。

設定名は次のとおりです。

colorize.hide_current_line_decorations

初期値はtrueです。

そのため、カーソルをカラーコードがある行に移動すると、一時的に色の装飾が消える場合があります。

常に色を表示したい場合は、次のように設定します。

{
  "colorize.hide_current_line_decorations": false
}

Colorizeを利用していて「カーソルを合わせると色が消える」と感じる場合は、この設定を確認してみましょう。

Colorizeの対象ファイルを指定する方法

colorize.includeで対象を追加する

colorize.includeを利用すると、Colorizeの対象となるファイルやフォルダーを指定できます。

globパターンを利用して、自分のプロジェクト構成に合わせて対象を調整できます。

標準の対象範囲では不足する場合などに利用すると便利です。

colorize.excludeで対象から除外する

反対に、Colorizeで解析する必要がないファイルやディレクトリはcolorize.excludeで除外できます。

大規模なプロジェクトでは、不要なファイルまで解析対象になっていると処理量が増える可能性があります。

そのような場合は、必要に応じて解析対象を絞ることを検討するとよいでしょう。

ただし、特定のディレクトリを除外すれば必ず高速化するとは限りません。

実際の対象ファイルやプロジェクト構成を確認したうえで設定することが重要です。

Colorizeが重い場合の対処法

変数検索を無効化してみる

Colorizeを利用していてVSCodeの起動や操作が重く感じる場合は、まず変数検索機能を確認してみましょう。

次の設定で無効化できます。

{
  "colorize.enable_search_variables": false
}

変数検索が不要なプロジェクトであれば、無効化することでColorizeが解析する処理を減らせる可能性があります。

Colorizeを一時的に無効化する

大規模なプロジェクトでメモリ使用量が増えたり、VSCodeが極端に重くなったりした場合は、Colorizeを一度無効化して原因を切り分ける方法も有効です。

ColorizeのGitHub Issuesには、メモリ使用量やパフォーマンスに関するユーザー報告もあります。

ただし、これらはすべての環境で発生することを意味するものではありません。

動作に問題がある場合の切り分け方法の一つとして覚えておくとよいでしょう。

Colorizeが動かない場合の対処法

対象言語を確認する

CSSでは表示されるものの、JavaScriptやTypeScriptでは表示されない場合は、colorize.languagesを確認します。

たとえば、次のように設定します。

{
  "colorize.languages": [
    "css",
    "scss",
    "less",
    "javascript",
    "typescript"
  ]
}

利用している言語が対象に含まれているかを確認しましょう。

拡張機能が有効になっているか確認する

VSCodeの拡張機能画面からColorizeを開き、拡張機能が有効になっているか確認します。

「Disable」と表示されていれば現在は有効です。

「Enable」と表示されている場合は、Colorizeが無効になっています。

VSCodeを再読み込みする

設定を変更しても反映されない場合は、VSCodeのウィンドウを再読み込みします。

コマンドパレットを開き、次のコマンドを実行します。

Developer: Reload Window

拡張機能や設定が再読み込みされるため、不具合の切り分けにも利用できます。

VSCode標準のColor Decoratorsとの違い

VSCodeにも標準の色表示機能がある

VSCodeには、Colorizeをインストールしなくてもカラーコードを視覚的に表示する「Color Decorators」という機能があります。

そのため、

「Colorizeをインストールしていないのにカラーコードの横に色が表示される」

という場合は、VSCode標準のColor Decoratorsが動作している可能性があります。

標準機能は次の設定で制御できます。

{
  "editor.colorDecorators": true
}

無効にする場合は次のようにします。

{
  "editor.colorDecorators": false
}

Colorizeと表示が重なる場合がある

VSCode標準のColor DecoratorsとColorizeを同時に利用すると、環境によっては色の表示が重複して見えることがあります。

Colorizeだけを利用したい場合は、

{
  "editor.colorDecorators": false
}

として、VSCode標準のカラー装飾を無効化する方法があります。

逆に、単純にCSSのカラーコードを確認するだけであれば、VSCode標準機能だけで十分な場合もあります。

Colorizeのおすすめ設定例

Web制作向けの設定例

CSS、SCSS、JavaScript、TypeScriptなどを扱う場合は、たとえば次のように設定できます。

{
  "colorize.languages": [
    "css",
    "scss",
    "less",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "colorize.decoration_type": "background",
  "colorize.hide_current_line_decorations": false,
  "colorize.colorized_colors": [
    "HEXA",
    "RGB",
    "HSL",
    "BROWSERS_COLORS",
    "OKLAB",
    "OKLCH"
  ]
}

ただし、すべての設定を必ず追加する必要はありません。

使用している言語や必要なカラー形式だけに絞って設定するほうが管理しやすくなります。

動作が重い場合の設定例

大規模なプロジェクトなどでColorizeの動作が気になる場合は、次の設定も検討できます。

{
  "colorize.enable_search_variables": false
}

CSS変数やSass・Lessの変数検索が必要なければ、変数検索機能を無効化することで処理を減らせる可能性があります。

Colorizeがおすすめな人

Colorizeは、Web制作やフロントエンド開発でカラーコードを頻繁に扱う人に向いています。

たとえば、次のように複数のカラーコードが並んでいる場合があります。

#1abc9c
#3498db
#9b59b6
#e74c3c

カラーコードだけを見て、それぞれの色を正確に判断するのは簡単ではありません。

Colorizeを利用すれば、コード上で実際の色を確認できるため、配色を把握しやすくなります。

特に、CSSやSCSSの配色確認、デザインシステムのカラー管理、CSS変数の確認、JavaScriptやTypeScript内のカラー定数の確認などに役立ちます。

Colorizeを使う際の注意点

VSCode標準機能だけで十分な場合もある

VSCodeには標準のColor Decoratorsが用意されています。

そのため、単純にCSSのカラーコードを視覚化したいだけであれば、Colorizeを追加しなくても目的を達成できる場合があります。

Colorizeは、対象言語や表示形式、変数検索などをより細かく設定したい場合に検討するとよいでしょう。

大規模プロジェクトではパフォーマンスを確認する

Colorizeはワークスペース内の変数を検索する機能を備えているため、プロジェクトの規模によってはVSCodeの起動やメモリ使用量に影響する場合があります。

VSCodeの動作が重くなった場合は、

{
  "colorize.enable_search_variables": false
}

を試したり、Colorizeを一時的に無効化したりして原因を切り分けましょう。

まとめ

Colorizeは、VSCode上のカラーコードを実際の色として視覚的に表示できる拡張機能です。

HEX、RGB、HSL、名前付きカラー、OKLAB、OKLCHなどを扱うことができ、CSSだけでなく設定によってJavaScriptやTypeScriptなども対象にできます。

また、背景色、下線、枠線、ドットなど表示方法を変更したり、対象言語やカラー形式を絞り込んだりすることも可能です。

一方で、VSCodeには標準のColor Decorators機能もあります。

単純なカラーコードの確認であれば標準機能だけで十分な場合があるため、自分の用途に合わせて使い分けることが重要です。

Colorizeを導入する場合は、まず標準設定で試し、必要に応じてcolorize.languagesやcolorize.decoration_typeなどを調整するとよいでしょう。

大規模なプロジェクトで動作が重くなる場合は、colorize.enable_search_variablesを無効にするなど、解析範囲や機能を調整しながら利用するのがおすすめです。

以上、VSCodeのColorize拡張機能の使い方についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeのColorize拡張機能の使い方について
目次