CSSのivoryは#FFFFF0、beigeは#F5F5DCです。この2つの規定値では、ivoryのほうが白に近く、beigeのほうが暗い値になります。ただし、衣服や壁紙の商品名に使われるアイボリー・ベージュが、このCSS値と一致するとは限りません。
色名とCSS値の一覧
CSS white
RGB 255, 255, 255。比較の基準となる白。
3色を同じ明るさの画面で並べて、黄みと明暗を確認します。
CSS ivory
RGB 255, 255, 240。青成分だけが白より15小さい値。
Webの広い余白にわずかな色みを加えたい場合の候補です。
CSS beige
RGB 245, 245, 220。ivoryより各成分が小さい値。
白と並べて面を分けたいときに試せますが、差だけで操作の境界を示さないようにします。
参考色をコピー・保存する
CSSで定義されたsRGB値です。衣服・壁紙・塗料などの実物色を保証する値ではありません。
3 / 3 色。保存する内容は下の色表と同じです。
| 色見本・名前 | HEX / RGB | 使う |
|---|---|---|
| CSS white | #FFFFFFrgb(255 255 255) | |
| CSS ivory | #FFFFF0rgb(255 255 240) | |
| CSS beige | #F5F5DCrgb(245 245 220) |
色名で決めず、使う値と素材を分ける
Web制作ではコードを渡せば同じsRGB値を指定できます。一方、服・カーテン・壁紙を選ぶ場合は、商品ごとの実物見本を優先します。照明、素材の光沢、周囲の色で見え方が変わるため、「アイボリーなら必ず合う」と色名だけで決めず、組み合わせたい物の隣で確認しましょう。
淡い色同士の境界には、線や余白を加える
白い背景にivoryのカードを置くと、色の差が小さく輪郭が見つけにくいことがあります。枠線、余白、見出しを併用し、入力欄やボタンを背景色だけで見分けさせない構成にします。beigeへ変えても十分かどうかは別途確認が必要です。
文字色は背景色とは別に選ぶ
この2色はどちらも明るい背景の候補なので、まず黒や濃い灰色の文字を合わせて比較します。アクセントに使う茶色や緑を、そのまま小さな本文へ転用しないでください。色板に背景色と文字色を保存して比較するか、コントラストツールで実際の組み合わせを確認できます。
服と部屋では同じ照明・同じ面積で試す
服なら顔の近くに置くトップスと、小面積の靴やバッグを分けて考えます。部屋なら壁やカーテンなど大きな面を先に決め、木部や小物を並べます。比較する見本の面積と光をそろえ、昼と夜で確認すると、購入後の組み合わせを想像しやすくなります。画面の色板はその相談用メモとして使えます。
アイボリーの余白・濃い文字・青緑のアクセント
順に背景、本文、装飾の編集提案です。淡い背景を広く、青緑を小さな面に使います。面積を変えて比較し、色板で文字との比率も確認してください。
ベージュの背景・茶の文字・白の余白
順に背景、本文、余白の編集提案です。白との境界が必要な場所には茶の線や余白を加えます。布・紙の実物色や診断用配色を再現したものではありません。
出典と確認日
確認：2026-10-14 · 編集：いろレシピ。出典の説明と独自の使い方提案を区別しています。