いろめく いろめく

アイボリー・クリームの色コードと特徴|配色ガイド

アイボリー クリーム 洋色 カラーコード 白系
広告スペース (article-top)

アイボリーとクリームは、純粋な白にわずかな黄みを加えた温かみのある色です。真っ白よりも柔らかく目に優しい印象を与えるため、Webデザインの背景色やインテリアの基調色として広く使われています。似た色でありながら微妙に異なるこの2色の違いを理解することで、デザインの表現力がより豊かになります。この記事では、アイボリーとクリームの基本情報から活用法までを解説します。

アイボリーとクリームの基本情報

アイボリー

項目内容
色名アイボリー
英語名Ivory
HEXコード#FFFFF0
RGBR:255 G:255 B:240
系統黄白系
由来象牙(アイボリー)の色

クリーム

項目内容
色名クリーム
英語名Cream
HEXコード#FFFDD0
RGBR:255 G:253 B:208
系統黄白系
由来牛乳のクリームの色

2色の違い

アイボリーはほぼ白に近く、わずかに黄みがかった色です。クリームはアイボリーよりも黄みが強く、より温かみのある印象を与えます。

比較項目アイボリークリーム
黄みの強さわずかやや強い
明度非常に高い高い
印象上品で清潔温かく柔らかい
由来象牙牛乳の脂肪分

歴史と由来

アイボリーの由来

アイボリーは象牙の色に由来します。象牙は古来より高級素材として珍重され、その乳白色は上品さと高級感の象徴です。現在は象牙の取引が国際的に規制されていますが、色名としてのアイボリーは広く使われ続けています。

クリームの由来

クリーム色は牛乳から分離される脂肪分(クリーム)の色に由来します。自然で温かみのある色合いは、食品や生活に密接した親しみやすいイメージを持っています。

デザインでの進化

デジタルデザインの普及により、背景色として純白(#FFFFFF)の代わりにアイボリーやクリームが使われるようになりました。画面上で長時間見ても目が疲れにくいという実用的なメリットもあります。

白・アイボリー・クリーム・ベージュの比較

白系の色を明度と色味で比較します。

色名HEXRGB特徴
#FFFFFF255,255,255純粋な白。無彩色
アイボリー#FFFFF0255,255,240ごくわずかに黄みがかった白
クリーム#FFFDD0255,253,208アイボリーより黄みが強い
生成り#F3F1E6243,241,230クリームより灰みが入る
ベージュ#CDB99C205,185,156黄みと灰みの中間的な色

デザインでの活用例

Webデザインの背景色

用途推奨色効果
高級ブランドサイトアイボリー上品さとエレガンス
ナチュラル系サイトクリーム温かみと親しみやすさ
長文コンテンツアイボリー目の疲れを軽減
ウェディングサイトアイボリー + 金格調高い華やかさ

インテリア

アイボリーやクリームは壁の色として最も人気のある選択肢です。純白の壁よりも温かみがあり、どんな家具とも調和しやすいのが特徴です。

ファッション

アイボリーのシャツやクリームのニットは、白よりも柔らかい印象を与えます。特に肌の色をきれいに見せる効果があるとされ、春夏のファッションで人気があります。

配色のコツ

アイボリーを使った配色

配色パターンHEXコード効果
アイボリー + 金 + 墨色#FFFFF0 +
#C8A84E +
#343434
高級感のあるフォーマル
アイボリー + ネイビー + 白#FFFFF0 +
#1B294B +
#FFFFFF
清潔感と信頼感
アイボリー + ピンク + グレー#FFFFF0 +
#F5A3B7 +
#9E9E9E
柔らかくフェミニン

クリームを使った配色

配色パターンHEXコード効果
クリーム + こげ茶 + 緑#FFFDD0 +
#4A2E14 +
#43A047
ナチュラルで温かい
クリーム + 赤 + 黒#FFFDD0 +
#E53935 +
#212121
レトロで力強い
クリーム + 水色 + 白#FFFDD0 +
#B4D8E7 +
#FFFFFF
爽やかで柔らかい

色コード一覧

形式アイボリークリーム
HEX#FFFFF0#FFFDD0
RGBrgb(255,255,240)rgb(255,253,208)
CSS変数—color-ivory:
#FFFFF0;
—color-cream:
#FFFDD0;

まとめ

アイボリーとクリームは、純白に温かみを加えた上品な色で、デザインの世界では背景色やベースカラーとして欠かせない存在です。アイボリーは象牙に由来する上品さを、クリームは乳製品に由来する温かみを持ち、微妙な色味の違いが異なる印象を生み出します。HEXコードはアイボリーが#FFFFF0、クリームが#FFFDD0で、両方を使い分けることでデザインの幅が広がります。

広告スペース (article-bottom)

あわせて読みたい