本文へ移動

メニュー

カラーカラーパレット

デジタル庁デザインシステムで定義済みのプリミティブカラーとニュートラルカラーです。実際のカラーのデータはデザインデータ(Figma)を参照してください。

プリミティブカラー

プリミティブカラーはカラーの基盤となる基本的な色で構成され、多様なウェブサイトごとに統一感のあるカラースキームを作成するために利用します。各カラーは広範なカラー設定を導出するための色相と明度の段階で構成されています。プリミティブカラーを参考とし、色相、明度、彩度などを調整しウェブサイトのトーン&マナーとして相応しいカラースキームを構築します。

青(Blue)

スクリーンショット:明るいブルーから暗いブルーまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ライトブルー(Light Blue)

スクリーンショット:明るいライトブルーから暗いライトブルーまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

シアン(Cyan)

スクリーンショット:明るいシアンから暗いシアンまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

緑(Green)

スクリーンショット:明るい緑から暗い緑までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ライム(Lime)

スクリーンショット:明るいライムから暗いライムまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

黄(Yellow)

スクリーンショット:明るい黄色から暗い黄色までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

オレンジ(Orange)

スクリーンショット:明るいオレンジから暗いオレンジまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

赤(Red)

スクリーンショット:明るい赤から暗い赤までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

マゼンタ(Magenta)

スクリーンショット:明るいマゼンタから暗いマゼンタまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

紫(Purple)

スクリーンショット:明るい紫から暗い紫までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ニュートラルカラー

グレー、ホワイトなどのニュートラルカラーは、背景、ディバイダー、ボーダーなど、さまざまなデザイン要素に対して共通カラーとして使用されます。

ホワイト(White)

スクリーンショット:白のカラーチップ。

ブラック(Black)

スクリーンショット:黒のカラーチップ。

グレー(Gray)

スクリーンショット:明るいグレーから暗いグレーまでの10階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。
3:1→
Gray-420が、白(#FFFFFF)に対してコントラスト比3:1を確保できるカラーであり、これよりも暗いグレーは非テキスト要素のコントラスト要件を満たす。
4.5:1→
Gray-536が、白(#FFFFFF)に対してコントラスト比4.5:1を確保できるカラーであり、これよりも暗いグレーはテキストのコントラスト要件を満たす。
←3:1
Gray-600が、黒(#000000)に対してコントラスト比3:1以上を確保できるカラーであり、これよりも明るいグレーは非テキスト要素のコントラスト要件を満たす。
←4.5:1
Gray-536が、黒(#000000)に対してコントラスト比4.5:1以上を確保できるカラーであり、これよりも明るいグレーはテキストのコントラスト要件を満たす。

なお、ライブラリ内のグレーはHEXカラーで設定された「Solid Gray」、または、黒の透過度によって設定された「Opacity Gray」が選択できます。