カラー(カラーパレット)
デジタル庁デザインシステムで定義済みのプリミティブカラーとニュートラルカラーです。実際のカラーのデータはデザインデータ(Figma)を参照してください。
プリミティブカラー
プリミティブカラーはカラーの基盤となる基本的な色で構成され、多様なウェブサイトごとに統一感のあるカラースキームを作成するために利用します。各カラーは広範なカラー設定を導出するための色相と明度の段階で構成されています。プリミティブカラーを参考とし、色相、明度、彩度などを調整しウェブサイトのトーン&マナーとして相応しいカラースキームを構築します。
青(Blue)
ライトブルー(Light Blue)
シアン(Cyan)
緑(Green)
ライム(Lime)
黄(Yellow)
オレンジ(Orange)
赤(Red)
マゼンタ(Magenta)
紫(Purple)
ニュートラルカラー
グレー、ホワイトなどのニュートラルカラーは、背景、ディバイダー、ボーダーなど、さまざまなデザイン要素に対して共通カラーとして使用されます。
ホワイト(White)
ブラック(Black)
グレー(Gray)
- 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」が選択できます。