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

White カラー

白 — 清潔感と空間の色

ad · 728×90
#FFFFFFWhite
カラー値
HEX#FFFFFF
RGBrgb(255, 255, 255)
HSLhsl(0°, 0%, 100%)
CSSwhite
シェードパレット
50
#FAFAFA
100
#F5F5F5
200
#ECECEC
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
補色
#000000
Black
類似色
#F5F5F5
White Smoke
#ECECEC
Platinum

CSS使用例

CSS
/* By name */
color: white;
background-color: white;

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

/* By RGB */
color: rgb(255, 255, 255);

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

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

純粋な白(#FFFFFF)の背景は長時間の読書で眩しく感じることがあります。読書向けのインターフェースには#FAFAFAや#F8F8F8のようなオフホワイトを使うことで目の疲れを軽減できます。

白(#FFFFFF)はすべての可視光を反射し、清潔感・純粋さ・シンプルさ・開放感を象徴します。ほとんどのウェブサイトとアプリのデフォルト背景色であり、黒いテキストとの組み合わせで最高の可読性を提供します。ホワイトスペース(余白)はデザインの重要な原則で、コンテンツに呼吸する余地を与え、視覚的な階層を改善します。医療・清潔・ミニマルデザインに欠かせない色です。

主な使用例

  • ページ背景 — ライトテーマのデフォルト背景
  • カードコンポーネントの背景 — 関連情報を視覚的にグループ化
  • モーダルダイアログ — ダークオーバーレイ上のコンテンツ領域
  • フォーム入力フィールドの背景 — テキスト入力エリアの表示
  • 医療・ヘルスケアUI — 清潔感と信頼感の伝達
  • アイコンの反転色 — ダーク背景上の白いアイコン

関連カラー

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