メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
カラー
/
Material Green
◉
Material Green
color/material-green-shades
Material Design 2014のGreen 50〜900の通常シェード10件をHEX付きで表示する。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
Material Greenでは、Material Design 2014のGreen 50〜900の通常シェード10件をHEX付きで表示する。
関連する観点として Material Green、material green shades、カラー変換 を確認し、結果をコピーして別の作業に使えます。
項目
内容
50
#E8F5E9
100
#C8E6C9
200
#A5D6A7
300
#81C784
400
#66BB6A
500
#4CAF50
600
#43A047
700
#388E3C
800
#2E7D32
900
#1B5E20
使い方
Green 50〜900の番号を見て、明るい背景向けか濃い状態表示向けかを選びます。
目的の行のHEX値を確認し、成功色や自然系アクセントの候補に転記します。
白文字を重ねる用途では、別途
コントラスト比
を確認します。
入力例・出力例
INPUT
Green 100
OUTPUT
#C8E6C9
淡い背景として使いやすい行です。
INPUT
Green 500
OUTPUT
#4CAF50
Material Greenの代表値です。
INPUT
Green 800
OUTPUT
#2E7D32
濃いステータス表現の候補になります。
よくある利用シーン
成功、完了、環境系のUI色をMaterial Design 2014のGreenから選びたいとき。
Green 500を中心に、淡い背景用の100や濃いラベル用の800を並べたいとき。
Tailwind emerald/greenとは別体系の固定値として、Materialの緑を参照したいとき。
結果確認のポイント
色空間、透明度、コントラスト、コピーしたコード形式が用途に合うか確認してください。
Material Green、material green shades、カラー変換の観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
画面やOSの色管理により見え方が変わるため、最終判断は実機でも確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
Material Greenの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
Material Design の Green パレットにはどんな色がありますか?
このツールに載っているのはGreen 50(#E8F5E9)から Green 900(#1B5E20)までの通常シェード10行です。Accent A100〜A700は表示せず、Green 500(#4CAF50)など標準段階だけを確認できます。
Material Green 500 はどんな場面に向いていますか?
緑はポジティブ・成功・環境をイメージさせるため、成功メッセージのアラート色・進捗バー・確認ボタンなどに使われます。アクセシビリティの観点では白テキストとのコントラスト比が約3.8:1と低めなので、重要テキストには Green 700 以上を推奨します。
Lime や Teal はこのパレットに含まれますか?
含まれません。Lime(#CDDC39)・Teal(#009688)は Material Design で別カラーファミリーとして独立しています。黄緑系は Lime、青緑系は Teal のシェード一覧を参照してください。
関連ツール
カラーシェード生成
指定色の明暗バリエーション(10段階)を自動生成。
アクセシブルカラー生成
前景色・背景色をHEXで指定するとWCAG 2.1のコントラスト比を自動計算。通常テキスト(AA 4.5:1/AAA 7:1)と大きい文字(AA 3:1/AAA 4.5:1)それぞれの合否をバッジで表示し、プレビュー文で実際の見え方も確認できます。
ANSIカラー一覧
ANSIエスケープシーケンスの文字色コード(標準8色 SGR 30〜37、高輝度8色 90〜97)と背景色コード(40〜47、100〜107)を色名・番号・エスケープシーケンスの対応表で確認できるツール。ターミナル配色の把握やシェルスクリプトの色指定に。
ブランドカラー一覧
主要ブランド名と代表的なHEXカラー値を2列の固定表で確認できる。
CMYK→HEX変換
CMYKカラー値をHEXに変換する。
コントラスト比早見表
WCAGでよく使う1:1、3:1、4.5:1、7:1、21:1の意味を固定表で確認できる。
WCAG AA 白背景
入力HEX色を白背景と比較し、通常テキストと大テキストのWCAG AA到達可否を表示する。
HEX #追加
改行区切りの各行について、#が無いHEX表記の先頭に#を付ける単純変換。