Green カラー

緑 — 成功と自然の色

#008000Green

カラー値

HEX#008000

RGBrgb(0, 128, 0)

HSLhsl(120°, 100%, 25%)

CSSgreen

シェードパレット

#F0FFF4

100

#C6F6D5

300

#68D391

500

#48BB78

700

#276749

900

#1C4532

補色

↔

#800080

Purple

類似色

#408000

Olive Green

#008040

Sea Green

CSS使用例

CSS

/* By name */
color: green;
background-color: green;

/* By HEX */
color: #008000;
background-color: #008000;

/* By RGB */
color: rgb(0, 128, 0);

/* By HSL */
color: hsl(120deg, 100%, 25%);

/* With opacity */
color: rgba(0, 128, 0, 0.8);
color: hsl(120deg 100% 25% / 80%);

CSS `green`(#008000)はかなり暗い色です。明るく鮮やかな緑には`lime`(#00FF00)または#22C55E(Tailwind green-500)を使用してください。白い背景でのテキストには#15803D(Tailwind green-700)以上が必要です。

CSSの標準的な緑(#008080)は人間の目が最も敏感に反応する波長域にあり、視認性が高いです。成功・完了・健康・自然を象徴し、UIでは成功メッセージ、完了状態、承認ステータスに使われます。CSSの`green`は#008000(濃い緑)で、明るい緑は`lime`(#00FF00)です。現代のUIではTailwindのgreen-500(#22C55E)が広く使われています。

主な使用例

▸成功メッセージ — '保存完了'、'支払い成功'などのポジティブフィードバック
▸進捗インジケーター — ローディングバーや進捗バーの完了状態
▸エコ・環境ブランド — サステナビリティ関連のUIテーマ
▸価格比較 — 割引価格や低コストオプションの強調
▸ステータスインジケーター — 'アクティブ'、'オンライン'、'接続済み'状態
▸金融データ — 株価上昇、収益増加の表示

Green カラー

CSS使用例

主な使用例

関連カラー