White カラー

白 — 清潔感と空間の色

#FFFFFFWhite

カラー値

HEX#FFFFFF

RGBrgb(255, 255, 255)

HSLhsl(0°, 0%, 100%)

CSSwhite

シェードパレット

#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 — 清潔感と信頼感の伝達
▸アイコンの反転色 — ダーク背景上の白いアイコン

White カラー

CSS使用例

主な使用例

関連カラー