VSCodeでカラーコードを扱う方法について

2026年10月26日

VSCode（Visual Studio Code）には、カラーコードを扱いやすくする機能が標準で搭載されています。

CSSやSCSS、Lessなどで#ffffffやrgb()、hsl()といった色指定を記述すると、カラーコードの近くに色のプレビューが表示されます。

さらに、色のプレビューをクリックしたり、カラーコードにマウスカーソルを合わせたりすると、カラーピッカーを使って直感的に色を変更できます。

Web制作でカラーコードを頻繁に扱う場合は、VSCodeの標準機能を理解しておくと、外部のカラーピッカーツールを使う手間を減らせます。

VSCodeで扱う主なカラーコード

HEX形式

Web制作でよく使われるのがHEX形式です。

基本的には、次のように記述します。

color: #ff0000;

6桁のHEXカラーは、次の構造になっています。

#RRGGBB

それぞれ、

RR = Red
GG = Green
BB = Blue

を16進数で表しています。

例えば、赤は次のようになります。

color: #ff0000;

緑は次の通りです。

color: #00ff00;

青は次のように指定します。

color: #0000ff;

3桁に短縮できる色もあります。

color: #f00;

これは、

color: #ff0000;

と同じ意味です。

また、アルファ値を含む4桁や8桁のHEX表記も使用できます。

color: #ff000080;

このような形式では、末尾部分で透明度を指定できます。

RGB形式

RGB形式では、赤・緑・青を数値で指定します。

color: rgb(255, 0, 0);

これは赤を表しています。

現在のCSSでは、スペース区切りの書き方も使用できます。

color: rgb(255 0 0);

透明度を加える場合は、次のような記述も可能です。

color: rgb(255 0 0 / 50%);

従来のrgba()を使う書き方も利用できます。

color: rgba(255, 0, 0, 0.5);

HSL形式

HSLは、色相・彩度・明度を使って色を指定する形式です。

color: hsl(0, 100%, 50%);

透明度を指定する場合は、次のようにも書けます。

color: hsl(0 100% 50% / 50%);

従来のhsla()も使用できます。

color: hsla(0, 100%, 50%, 0.5);

VSCodeのカラーピッカーを使う方法

CSSにカラーコードを記述する

例えば、CSSファイルに次のようなコードを記述します。

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

VSCodeでは、#3498dbの近くに、その色を表す小さなプレビューが表示されます。

この表示はカラーデコレーターと呼ばれます。

色のプレビューをクリックする

カラーコードの横に表示されている色のプレビューをクリックすると、カラーピッカーを開けます。

カラーピッカーでは、色相や彩度、明るさなどを調整しながら色を選択できます。

透明度も設定できます。

カラーコードにマウスを合わせる

CSSなどでは、カラーコードにマウスカーソルを合わせることでカラーピッカーが表示される場合もあります。

例えば、

color: #3498db;

の#3498db付近にマウスを置くと、色を編集できるUIが表示されます。

選択した色がコードへ反映される

カラーピッカーで別の色を選択すると、コード内のカラーコードも自動的に変更されます。

例えば、

background-color: #3498db;

をカラーピッカーから変更すると、

background-color: #e74c3c;

のように書き換えられます。

外部サイトで色を探してコピー＆ペーストしなくても、VSCode内で色を選択できます。

カラーコードの表現形式を切り替える

HEXやRGBなどを切り替えられる

VSCodeのカラーピッカーでは、利用可能な範囲で色の表現形式を切り替えられます。

例えば、

#3498db

という色を、

rgb(52, 152, 219)

や、

hsl(204, 70%, 53%)

といった別の形式で扱える場合があります。

カラーピッカー上部に表示されているカラー文字列を操作することで、利用可能なカラーモードを変更できます。

ただし、常にすべての形式へ変換できるとは限りません。

対象の言語やカラー情報を提供している機能によって、選択できる形式が異なる場合があります。

Standalone Color Pickerを使う

コマンドパレットを開く

既存のカラーコードをクリックせずに色を選びたい場合は、Standalone Color Pickerを利用できます。

Windows・Linuxでは、次のショートカットでコマンドパレットを開きます。

Ctrl + Shift + P

macOSでは次の通りです。

Command + Shift + P

Standalone Color Pickerを起動する

コマンドパレットで、次のようなコマンドを検索します。

Show or Focus Standalone Color Picker

Standalone Color Pickerを利用すると、コード上の既存カラーコードに依存せず、独立したカラーピッカーを表示できます。

新しい色を挿入したり、既存の色を置き換えたりしたい場合に便利です。

CSSでカラーコードを扱う

CSSでは標準でカラーピッカーを利用できる

VSCodeでカラーコードを扱う際、特に使いやすいのがCSSです。

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

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

.button {
    background-color: #0078d4;
    color: #ffffff;
    border: 1px solid #005ea6;
}

各カラーコードの近くに色のプレビューが表示されるため、コードだけを見ても色を把握しやすくなります。

SCSSとLessも標準サポートされている

VSCodeでは、CSSだけでなくSCSSとLessも標準でサポートされています。

SCSSでは、例えば次のように色を変数で管理できます。

$primary-color: #3498db;
$secondary-color: #2ecc71;

.button {
    background-color: $primary-color;
}

Lessでは、次のように記述できます。

@primary-color: #3498db;

.button {
    background-color: @primary-color;
}

ただし、インデント構文を使用する.sassについては、必要に応じて対応する拡張機能を利用します。

HTMLでカラーコードを扱う

style要素内でカラーコードを指定する

HTMLでは、<style>要素内にCSSを記述できます。

<style>
    .title {
        color: #3498db;
    }
</style>

VSCodeでは、このようなHTML内のスタイルセクションでもカラーコードを扱えます。

style属性でも色を指定できる

HTMLのstyle属性でも色を指定できます。

<p style="color: #ff0000;">
    赤い文字
</p>

ただし、VSCode公式ドキュメントで明示的にカラーピッカー対応が説明されているのは、HTML内のスタイルセクションです。

HTML内のすべての位置で常に同じ動作になるとは限らない点には注意が必要です。

JavaScriptやTypeScriptでカラーコードを扱う

JavaScript内に色を定義する

ReactやJavaScriptベースのWebアプリでは、JavaScript内でカラーコードを管理することもあります。

const colors = {
    primary: "#3498db",
    secondary: "#2ecc71",
    danger: "#e74c3c"
};

TypeScriptでも同様です。

const colors = {
    primary: "#3498db",
    secondary: "#2ecc71",
    danger: "#e74c3c"
} as const;

CSS-in-JSでもカラーコードを使える

例えば、JavaScriptのオブジェクトとしてスタイルを定義する場合は次のようになります。

const buttonStyle = {
    backgroundColor: "#3498db",
    color: "#ffffff"
};

このようなCSS以外のファイルで色のプレビューを表示したい場合は、editor.defaultColorDecoratorsを利用できる場合があります。

CSS以外でもカラーコードをプレビューする

editor.defaultColorDecoratorsを有効にする

CSS形式のカラーコードを、さまざまなファイルタイプで表示したい場合は、settings.jsonで次の設定を利用できます。

{
    "editor.defaultColorDecorators": true
}

例えばJavaScriptに、

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

と書かれている場合に、カラーコードを視覚的に確認できる場合があります。

ただし、ファイルの種類や言語機能、拡張機能などによって動作が異なる場合があります。

そのため、CSS以外のすべてのファイルで必ずカラー表示されるというわけではありません。

カラーコードのプレビューを非表示にする

Settingsから無効にする

カラーコードの横に表示される色のプレビューが不要な場合は、設定から無効にできます。

Windows・Linuxでは、

Ctrl + ,

macOSでは、

Command + ,

でSettingsを開きます。

検索欄に、

Color Decorators

と入力します。

「Editor: Color Decorators」を無効にすると、色のプレビューを非表示にできます。

settings.jsonから無効にする

settings.jsonでは、次のように設定します。

{
    "editor.colorDecorators": false
}

この設定はカラーコード自体を無効化するものではありません。

あくまで、エディタ上に表示される色のプレビューを非表示にする設定です。

特定の言語だけ無効にする

CSSだけカラーデコレーターを無効にする場合は、次のように設定できます。

{
    "[css]": {
        "editor.colorDecorators": false
    }
}

SCSSで無効にしたい場合は次のようになります。

{
    "[scss]": {
        "editor.colorDecorators": false
    }
}

このように言語別設定を利用すれば、ファイルタイプごとに動作を変更できます。

カラーデコレーターの表示数を調整する

editor.colorDecoratorsLimitを利用する

大量のカラーコードを含むファイルでは、パフォーマンスへの影響を抑えるために、表示されるカラーデコレーター数に上限があります。

設定項目は次の通りです。

editor.colorDecoratorsLimit

巨大なCSSファイルやSVG、デザイントークンを大量に含むファイルなどを扱う場合に調整できます。

通常のWeb制作では、基本的に初期設定のままで問題ありません。

VSCodeでカラーコードを検索する

ワークスペース全体から特定の色を検索する

プロジェクト全体で特定のカラーコードがどこに使われているか確認したい場合は、ワークスペース検索を利用します。

Windows・Linuxでは、

Ctrl + Shift + F

macOSでは、

Command + Shift + F

を押します。

例えば、

#3498db

と検索すると、プロジェクト内でそのカラーコードを使用している場所を確認できます。

カラーコードを一括置換する

ブランドカラーを変更する場合などは、検索と置換を組み合わせると便利です。

例えば、

#3498db

を、

#0066cc

へ変更する場合、ワークスペース全体で検索して置換できます。

ただし、同じカラーコードが異なる用途で使用されている可能性があります。

一括置換する前に検索結果を確認することが重要です。

正規表現でHEXカラーコードを検索する

6桁HEXを検索する

6桁のHEXカラーを検索したい場合は、正規表現を有効にして次のようなパターンを利用できます。

#[0-9a-fA-F]{6}\b

例えば、

#ffffff
#333333
#3498db
#e74c3c

などに一致します。

3桁・4桁・6桁・8桁を検索する

CSSで使用される代表的なHEX表記を広く検索したい場合は、一例として次のような正規表現を利用できます。

#[0-9a-fA-F]{3,4}\b|#[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?\b

これにより、

#fff
#ffff
#ffffff
#ffffffff

などを検索できます。

ただし、正規表現ではCSSカラーではない文字列まで一致する可能性があります。

一括置換を行う場合は、検索結果を必ず確認しましょう。

CSS変数でカラーコードを管理する

同じ色を何度も直接記述しない

Webサイト全体で同じ色を利用する場合は、カラーコードを直接何度も書くより、CSSカスタムプロパティを利用した方が管理しやすくなります。

例えば、次のように定義します。

:root {
    --color-primary: #0066cc;
    --color-secondary: #00a67e;
    --color-text: #222222;
    --color-background: #ffffff;
}

実際のCSSでは次のように使用します。

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

用途ごとに色を管理する

大規模なサイトでは、単に「青」「赤」といった色名ではなく、用途ごとに変数名を付けると管理しやすくなります。

:root {
    --color-primary: #0066cc;
    --color-secondary: #00a67e;

    --color-text-primary: #222222;
    --color-text-secondary: #666666;

    --color-background: #ffffff;
    --color-background-sub: #f5f5f5;

    --color-success: #2e7d32;
    --color-warning: #ed6c02;
    --color-error: #d32f2f;
}

このように整理しておけば、デザイン変更の際にカラーコードを一括管理しやすくなります。

VSCode自体のカラーを変更する

workbench.colorCustomizationsを使う

Webサイトのカラーコードとは別に、VSCode自身のUIカラーも変更できます。

settings.jsonに、例えば次のように記述します。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#1e1e1e",
        "statusBar.background": "#007acc",
        "editor.background": "#101010"
    }
}

これにより、アクティビティバーやステータスバー、エディタ背景などの色をカスタマイズできます。

Webページの配色を変更する機能とは別なので、用途を混同しないようにしましょう。

VSCodeのカラーテーマを変更する

ショートカットからテーマを切り替える

VSCode全体の見た目を変更したいだけであれば、カラーコードを直接編集する必要はありません。

Windows・Linuxでは、

Ctrl + K
Ctrl + T

macOSでは、

Command + K
Command + T

でカラーテーマの選択画面を表示できます。

コマンドパレットから変更する

コマンドパレットから、

Preferences: Color Theme

を実行する方法もあります。

テーマを選択するとプレビューされ、好みのテーマを決定できます。

VSCodeでカラーコードを効率よく管理するコツ

カラーピッカーで視覚的に色を調整する

色を細かく調整するときは、HEX値を手入力するより、カラーピッカーを利用した方が効率的です。

特に、色相や明るさを少しずつ変更したい場合に便利です。

CSS変数でサイト全体の色を統一する

複数ページで同じブランドカラーを利用する場合は、CSSカスタムプロパティにまとめて管理します。

これにより、ブランドカラーを変更するときも修正箇所を減らせます。

検索機能で既存のカラーコードを確認する

既存サイトの配色を整理するときは、VSCodeのワークスペース検索を利用すると効率的です。

同じカラーコードがどのファイルに使われているか確認できるため、色の統一にも役立ちます。

一括置換は慎重に行う

同じHEX値でも、ボタン・文字・背景など異なる目的で使われていることがあります。

そのため、カラーコードを一括置換するときは、単純にすべて変更するのではなく、検索結果を確認してから実行することが重要です。

VSCodeでカラーコードを扱う方法のまとめ

VSCodeには、カラーコードを効率よく扱うためのさまざまな機能が搭載されています。

CSSやSCSS、Lessなどでは、カラーコードの横に色のプレビューを表示し、カラーピッカーから直感的に色を編集できます。

Standalone Color Pickerを利用すれば、既存のカラーコードがない場所でも色を選択できます。

また、editor.defaultColorDecoratorsを利用することで、CSS以外のファイルでもCSS形式のカラーコードを視覚的に確認できる場合があります。

プロジェクト内のカラーコードを確認するときはワークスペース検索が便利です。

さらに、サイト全体の配色を管理する場合は、HEXコードを各所に直接記述するのではなく、CSSカスタムプロパティにまとめると保守性が向上します。

VSCodeでカラーコードを扱う場合は、**「カラーピッカーで確認・編集する」「CSS変数で管理する」「検索機能で使用箇所を確認する」**という流れを意識すると、Web制作のカラー管理を効率化できます。

以上、VSCodeでカラーコードを扱う方法についてでした。

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VSCodeでカラーコードを扱う方法について

採用はこちら

VSCodeで扱う主なカラーコード

HEX形式

RGB形式

HSL形式

VSCodeのカラーピッカーを使う方法

CSSにカラーコードを記述する

色のプレビューをクリックする

カラーコードにマウスを合わせる

選択した色がコードへ反映される

カラーコードの表現形式を切り替える

HEXやRGBなどを切り替えられる

Standalone Color Pickerを使う

コマンドパレットを開く

Standalone Color Pickerを起動する

CSSでカラーコードを扱う

CSSでは標準でカラーピッカーを利用できる

SCSSとLessも標準サポートされている

HTMLでカラーコードを扱う

style要素内でカラーコードを指定する

style属性でも色を指定できる

JavaScriptやTypeScriptでカラーコードを扱う

JavaScript内に色を定義する

CSS-in-JSでもカラーコードを使える

CSS以外でもカラーコードをプレビューする

editor.defaultColorDecoratorsを有効にする

カラーコードのプレビューを非表示にする

Settingsから無効にする

settings.jsonから無効にする

特定の言語だけ無効にする

カラーデコレーターの表示数を調整する

editor.colorDecoratorsLimitを利用する

VSCodeでカラーコードを検索する

ワークスペース全体から特定の色を検索する

カラーコードを一括置換する

正規表現でHEXカラーコードを検索する

6桁HEXを検索する

3桁・4桁・6桁・8桁を検索する

CSS変数でカラーコードを管理する

同じ色を何度も直接記述しない

用途ごとに色を管理する

VSCode自体のカラーを変更する

workbench.colorCustomizationsを使う

VSCodeのカラーテーマを変更する

ショートカットからテーマを切り替える

コマンドパレットから変更する

VSCodeでカラーコードを効率よく管理するコツ

カラーピッカーで視覚的に色を調整する

CSS変数でサイト全体の色を統一する

検索機能で既存のカラーコードを確認する

一括置換は慎重に行う

VSCodeでカラーコードを扱う方法のまとめ

関連記事