カラーコードとパレット
グリーン系の色一覧
グリーンはデジタルプロダクトに成長、自然、ポジティブな結果のイメージを与えます。淡いミント、バランスのよいエメラルド、深いフォレストグリーンを収録し、状態表示、ダッシュボード、アイデンティティデザインに使えます。
グリーン
#22C55E
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Mint Cream | #F0FDF4 | 240, 253, 244 | 138, 76%, 97% | ||
| Mint Light | #DCFCE7 | 220, 252, 231 | 141, 84%, 93% | ||
| Mint | #BBF7D0 | 187, 247, 208 | 141, 79%, 85% | ||
| Seafoam | #86EFAC | 134, 239, 172 | 142, 77%, 73% | ||
| Spring Green | #4ADE80 | 74, 222, 128 | 142, 69%, 58% | ||
| Green | #22C55E | 34, 197, 94 | 142, 71%, 45% | ||
| Grass | #16A34A | 22, 163, 74 | 142, 76%, 36% | ||
| Forest | #15803D | 21, 128, 61 | 142, 72%, 29% | ||
| Dark Green | #166534 | 22, 101, 52 | 143, 64%, 24% | ||
| Pine | #14532D | 20, 83, 45 | 144, 61%, 20% | ||
| Emerald Light | #ECFDF5 | 236, 253, 245 | 152, 81%, 96% | ||
| Emerald Pale | #D1FAE5 | 209, 250, 229 | 149, 80%, 90% | ||
| Emerald Soft | #A7F3D0 | 167, 243, 208 | 152, 76%, 80% | ||
| Emerald | #6EE7B7 | 110, 231, 183 | 156, 72%, 67% | ||
| Jade | #34D399 | 52, 211, 153 | 158, 64%, 52% | ||
| Teal Green | #10B981 | 16, 185, 129 | 160, 84%, 39% | ||
| Sea Green | #059669 | 5, 150, 105 | 161, 94%, 30% | ||
| Ocean Green | #047857 | 4, 120, 87 | 163, 94%, 24% | ||
| Deep Green | #065F46 | 6, 95, 70 | 163, 88%, 20% | ||
| Hunter | #064E3B | 6, 78, 59 | 164, 86%, 16% |
CSS キーワード: green
CSS ではキーワード green で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 2.28:1
不合格
Aa 黒い文字 9.22:1
AAA
グリーンの使い方
成功・完了の状態表示
サステナビリティやウェルネスのブランド
金融のグラフとダッシュボード
グリーン と相性のよい色
#22C55E をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。