~/devtools / color / green
tool::color-guide

Green カラー

緑 — 成功と自然の色

ad · 728×90
#008000Green
カラー値
HEX#008000
RGBrgb(0, 128, 0)
HSLhsl(120°, 100%, 25%)
CSSgreen
シェードパレット
50
#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テーマ
  • 価格比較 — 割引価格や低コストオプションの強調
  • ステータスインジケーター — 'アクティブ'、'オンライン'、'接続済み'状態
  • 金融データ — 株価上昇、収益増加の表示

関連カラー

Red#FF0000 · RGB(255, 0, 0)
Blue#0000FF · RGB(0, 0, 255)
ad · 300×250
カラーコンバーターに戻る
// related tools
Cron Expression Generator
ビジュアルエディタでcron式を作成・解析。次回5回の実行時刻をプレビューし、よく使うプリセットから始められます。
jwt
JWT Decoder
JWTトークンをデコードして内容を確認。ヘッダー・ペイロード・署名の詳細を表示します。
rx
Regex Tester
リアルタイムでマッチをハイライト表示。グループのキャプチャや説明付きで正規表現をテストできます。
ts
Timestamp Converter
Unixタイムスタンプを人間が読める日付に変換。ms/s・UTC/ローカル・相対時刻に対応。