オフホワイトカラー：アイボリー、クリーム、エッグシェル、リネン

純粋な白（#FFFFFF）はデザイン上のデフォルトです。ニュートラル、多用途、そして無限に実用的。しかし多くの文脈では、それは非常に厳しいです。それは臨床的に、厳しく、洗練されていないように読むことができます。オフホワイトカラー。アイボリー、クリーム、エッグシェル、リネン、そしてそれらの関連物。温かさ、テクスチャ、そして純白が欠ける自然な材料の品質を導入することで、この問題を解決します。

オフホワイトでの課題は、それらはすべて一見類似しており、それらの違いは間違った選択がもたらす意図しない効果を作成するほど微妙であるということです。アイボリーが目的だったところでクリーム背景は、計画されたより甘く、洗練されていないように感じることができます。クリームが指定された場所のリネン背景は、望みより重く、より素朴に感じることができます。

このガイドは4つの主要なオフホワイトカテゴリーを正確に分解します。Hex コード、カラースペース値、物理的な起源の物語、適切な設計アプリケーション。自信を持って選択できます。

なぜ純粋な白（#FFFFFF）ではないのか？

オフホワイトを検査する前に、純粋な白が時々間違った選択である理由を理解する価値があります。

純粋な白（#FFFFFF）RGBではrgb(255、255、255)です。すべての3つのチャネルで最大値、温かさなし、複雑さなし、材料参照なし。スクリーン上では、未ました。スクリーンの点の最大出力の色です。それは物理的な類似物がありません。実物の白い材料。紙、綿、骨、漆喰。すべてわずかな色のキャスト。高品質の紙の処女シートではない#FFFFFF。これは#FFFEF8または#FAFAF5。ほぼ知覚できないほど暖かいか、わずかに外れています。

これは設計でいくつかの理由でも重要です。

目の疲労：フルスクリーン明るさでの純粋な白い背景は、特に長い読書セッションで眼の疲労を引き起こすことができます。ごくわずかなウォームキャストは、拡張読書の高コントラスト眼の疲労を低減します。

材料提案：オフホワイトはそれは意図される材料の関連性を運びます。紙、綿、リネン、骨、羊皮紙。デザインに自然な物質の品質を追加します。純粋な白は材料の参照を持っていません。

タイポグラフィの調和：ほとんどの良く設計されたタイプフェイスは、もともとクリームまたはオフホワイトペーパーの印刷のために描画されていました。それらの文字形は、わずかに暖かい基板と対話するために調整されていました。純粋な白いスクリーンでは、同じタイプフェイスは意図したより厳しく見えることができます。

コントラストの調整：純粋な白は暗いテキストで最大コントラストを作成します。時々目標はやや縮小されたコントラストです。快適で読みやすく、高コントラスト純粋な白場ほど要求しません。

アイボリー：静かな優雅さ（#FFFFF0）

アイボリー（#FFFFF0）は材料にちなんで名付けられています。象の牙と歯で見つかった密度の高い、硬く、クリーム白い物質。最も一般的に象の象牙。材料として、象牙は歴史的に最も尊敬される贅沢な材料の一つでした。ピアノキー、ビリヤードボール、装飾的なオブジェクト、嵌木工事に使用されています。グローバルな貿易禁止の前。その後の色は、自然な贅沢、精緻化、および年齢の関連性を運びます。

Hex#FFFFF0はほぼ知覚できないほどのオフホワイトです。青いチャネルのみがドロップされます。255から240に、赤と緑は最大のままです。HSL用語では、象牙は正確に60°（黄色のヒューを）100%飽和で97%明度で座ります。これは、黄色のヒューポジションで、ほぼ白いカラーになります。97%の明度で黄色の飽和は、追加された色ではなく、白さへのウィスパーとして読むピュアなクリーン温かさを生じさせます。

CMYKでは、象牙は単なる6%黄色です。基板に完全に消える前に、紙白への最小可能な追加です。

象牙が通信すること

象牙の近ニュートラリティは、静かな優雅さの品質を与えます。これは純粋な白の臨床的な品質を避けるのに十分暖かいですが、知覚可能な色として登録されるため微妙です。この微妙さは、その決定的な美徳です。象牙は、高品質の材料の自然な状態のように見えます。色が追加されたかのではなく、白が暖かくされたかのようにです。

これは以下のために特に適切にしています： - 正式なステーショナリーと結婚式の設計：象牙は伝統的な結婚式の招待状色です。自然な材料と遺産の品質を示唆しますが、ゴールドの形式過剰または純粋な白の厳しさなし - タイポグラフィ前置きレイアウト：デザインが主にテキスト背景のテキストの場合、象牙は快適な読書表面を提供し、タイプと視覚的に競争しません - 豪華なファッションと美容：象牙の衣類と製品パッケージングは自然に洗練された読み取り。色の欠落は品質のステートメント - ポートフォリオとエディトリアル設計：デザイナーと写真家の場合、象牙の背景は純粋な白の臨床的なニュートラリティなしで作品が呼吸することを可能にします

象牙対純粋な白

クリーム：温かさと豊かさ（#FFFDD0）

クリーム（#FFFDD0）は乳製品クリームにちなんで名付けられています。非均一化された牛乳の上に上昇する脂肪が豊富な層。本物のクリームは、純粋な牛乳が欠ける白のクリームカラーで、確実にウォーム、黄色くしたカラーがあります。豊かさと柔らかさ、脂肪と暖かさの品質を持つ。その後の色は、この豊かさを運びます。

クリームはアイボリーよりも目立たたに暖かいです。象牙の青いチャネルがのみ15ポイント低下します（255から240に）、クリームの青いチャネルは47ポイント低下します（255から208に）。はるかに知覚可能なシフト。HSL、クリームは57°（黄色を超える）で座り、91%の明度です。象牙の97%より低く、視覚的に暖かい白ゾーンの深いところに配置されています。

CMYKではクリームは小さなマゼンタの追加（1%）と18%の黄色を必要とします。象牙のニアニュートラルを確認してそれは確実に暖かいです。CMYKでの18%の黄色は、任意のサーフェスの温かさとして明らかに目に見えます。

クリームが通信すること

クリームはオフホワイトの最も普遍的にウォームです。それは居心地の良い、快適な品質を持つと、象牙の精緻化または卵の殻の地球らしさとは明らかに異なります。それは柔軟で親しみやすく感じます。

クリームは特に良い仕事をします： - 食品とベーキングブランド：乳製品の関連性は、ベーカリー、菓子店、乳製品ブランディングのための自然な選択になります。自然な成分と手作りの温かさを示唆しています - ウェルネスと自然な生活のブランド：クリームのぬくもりは自然な材料、地球色、および有機的でスローリビングのライフスタイルの美学言語と自然に組み合わせます - 子どもの設計：ウォームクリーム背景は純粋な白ほど子どもの本の挿絵、教育コンテンツ、および子どもの製品設計に対して厳しくないです - ウォーム内部設計の参照：物理的な内部への色マッチング。絵の壁、布張りの家具、自然な木。クリームは純粋な白よりも通常より正確なデジタル相当を提供します

クリーム対象牙

エッグシェル（#F0EAD6）とリネン（#FAF0E6）

エッグシェルとリネンは両方とも地球的で、テクスチャーのあるオフホワイトで、象牙またはクリームより強い材料の関連性を運びます。

エッグシェル（#F0EAD6）

エッグシェル（#F0EAD6）は鳥の卵の色にちなんで名付けられています。特に卵の殻。マット、わずかにくぼんだサーフェス。クリーミーであることなく温かさの品質を持っています。

エッグシェルはアイボリーまたはクリームより明らかに暗く、暖かいです。象牙の97%対象牙の97%の明度での89%。43°のHSLの色相はそれを純粋な黄色よりもアンバー黄色にシフトし、47%の飽和は象牙またはクリームに存在しない知覚可能なウォームタンの品質を追加します。

CMYKの分解はエッグシェルの複雑さを明らかにします。3%マゼンタ、11%黄色、6%黒。黒の追加は、エッグシェルをクリームから区別する微かにグレイッシュウォームの品質を生じさせます。それは単なるウォームではありません。それはクリームが欠ける微かな深さがあります。

エッグシェルは良い仕事をしている： - 高級印刷材料：エッグシェルは、一般的な紙の仕上げの説明子です。エッグシェル紙はマットと光沢の間のセミマット表面、そしてカラーは、乾燥した壁に見える多くの内部エッグシェル塗料が見えるものに近似しています - ペイントカラー参照：「エッグシェル」は、一般的な内部ペイント光沢の説明子です。カラー#F0EAD6は、多くの内部エッグシェル塗料が乾燥した壁に見えるものを反映しています - ヴィンテージと遺産の美学：エッグシェルのわずかな深さは、古い紙またはアンティーク、ヴィンテージ、および遺産位置付けの設計に適切な時間摩耗した品質を与えます

リネン（#FAF0E6）

リネン（#FAF0E6）はCSSで名前が付けられた色です。標準CSS色の148のうちの1つです。リネン生地にちなんで、フラックス植物から作られています。天然リネンは、不規則なテクスチャーで独特のウォームクリーム色を持ち、コンテンポラリー内部およびファッション設計で最も志向的な材料の一つになっています。

リネンのHSLの色相30°は、オレンジアンバーの方向に著しくそれを配置しています。これらのその他のオフホワイトよりも純粋な黄色から離れて。これはリネンに独特のピーチーウォームな品質を与えます。象牙とクリームの黄色ウォーム、またはエッグシェルのベージュの品質と比較して。94%の明度で、それはエッグシェルより軽いが、知覚可能により暖かいヒューの方向にあります。

リネンの94%の明度での67%飽和は、ソフトですが知覚可能な温かさを生じさせます。臨床的ではなく有機的でタクタイルに見える温和なピーチホワイト。

リネンは良い仕事をしている： - コンテンポラリー内部とライフスタイル設計：リネンの自然な繊維との関連性は、2010から2020年代を支配してきた「有機現代」および「スカンジナビア」内部設計の美学で極度に人気があります - サステナブルと自然ブランドの位置付け：材料のような、リネン色の背景は自然な材料、環境意識、および職人の品質を示唆しています - ファッションエディトリアルとルックブック設計：衣類写真のリネン背景は、競争することなく、ほとんどの衣類色を賞賛するニュートラルですがウォームなコンテキストを作成します - 農家と職人の美学：リネンのウォームピーチホワイトは農家、コテージコア、および職人の設計運動の視覚言語の中心です

包括的な比較テーブル

色相進行を読む

色相の角度は、各オフホワイトのキャラクターについての最も重要な物語を語ります： - 60°での象牙：黄色ホワイト。最もクリーン、最も純粋なオフホワイト。アンバーまたはピーチなしに温かさ - 57°でのクリーム：ニアイエロー。象牙に非常に近いが、より意味のある温かいです。より目に見える黄色キャラクター付き - 43°でのエッグシェル：アンバー黄色。明らかにウォームで、地球質。ベージュとして読み始めます - 30°でのリネン：オレンジ隣接。最も温かい色相の方向。純粋に黄色ではなく、独特にピーチ

60°から30°への色相の角度の低下として、オフホワイトは純粋な黄色温かさから進行的にシフトします。ピーチ温かさへ。純粋な精緻化のコストでオーガニック地らしさを獲得します。

ウェブデザイン背景用オフホワイトの選択

デザイナーの実用的な質問は、特定のページ背景用にどのオフホワイトを選択するかです。各要素は異なる読書環境と異なる関連付けを作成します。これに組み込まれるコンテンツです。

タイポグラフィ優先コンテンツの場合（ブログ、エッセイ、ドキュメンテーション）

象牙（#FFFFF0）が最適な選択です。その近ニュートラリティは読書経験への視覚的な干渉を最小化します。ほのかな黄色の温かさは眼の疲労を低減しますが、コンテンツと競合する可能性のある知覚可能なカラーキャストを導入しません。多くの深刻な編集およびドキュメンテーションサイトは、象牙またはクローズバリアントを読書背景として使用しています。

クリーム（#FFFDD0）はより暖かいブランド人格を持つサイト上の長編コンテンツでよく機能します。食べ物のライティング、ライフスタイルコンテンツ、個人的なエッセイ。追加のぬくもりはより居心地の良い読書環境を作成しますが、涼しい色のイメージまたはUIエレメントと衝突する可能性があります。

製品とEコマースの場合

リネン（#FAF0E6）は、有機的で、自然で、職人、そして持続可能なブランドに特に適しています。そのピーチーのぬくもりは自然な製品の写真を褒めます。衣類、陶器、木製のオブジェクト、植物製品。

エッグシェル（#F0EAD6）は遺産ブランド、アンティーク市場、および素朴位置のリテーラーに適切です。その微かな深さとベージュの品質は、他のオフホワイトが対抗できない方法で、古い紙または自然な材料の印象を作成します。

UIコンポーネント（カード、モーダル、入力背景）

オフホワイトは、純粋な白背景ページで純粋な白の厳しさを避けたい設計システムのカード、モーダル、および昇起表面の背景として頻繁に使用されます。

このユース、象牙とリネンが最も多用途です。象牙は最小限で洗練された設計システムのための。リネンはより暖かく有機的で感じられるシステムの場合。エッグシェルは最も独特で、ニュートラル設計システムのためにあまりにも暖かい可能性があります。クリームはその有用性で2つの間に座ります。

オフホワイトシステムのCSSの変数

CSS カスタムプロパティはシステムのオフホワイト管理を可能にします：

:root {
  --white: #FFFFFF;
  --ivory: #FFFFF0;
  --cream: #FFFDD0;
  --eggshell: #F0EAD6;
  --linen: #FAF0E6;
}

一般的なパターンは、1つのオフホワイトをページ背景として使用し、昇起されたコンポーネント（カード、モーダル、入力）に純粋な白を使用し、追加のカラーなしに表面の階層を作成することです：

body { background-color: var(--ivory); }
.card { background-color: var(--white); }

カラーモデル間でのオフホワイトの変換

シェード生成ツールを使用して、任意のオフホワイトの完全な色合いと色のスペクトラムを探索し、カラーコンバーターを使用してカラーモデル間で翻訳します。

キーテイクアウェイ

• 純粋な白（#FFFFFF）は価値がありますが、臨床的で、厳しく、材料品質なしで読むことができます。オフホワイトはこれに微かなぬくもりで対処します
• アイボリー（#FFFFF0）は最も微妙なオフホワイトです：ほぼ知覚できない黄色のキャスト（HSL：60°、97%の明度）付きのニアホワイト。洗練されたタイポグラフィとフォーマルな設計の古典的な選択
• クリーム（#FFFDD0）は明らかに暖かい（HSL：57°、91%の明度）で、確実にソフト乳製品温かい品質を持ちます。居心地の良い、食べ物、ライフスタイルコンテンツに最適
• エッグシェル（#F0EAD6）はより地球質でやや深い（HSL：43°、89%の明度）アンバーベージュの品質を持ちます。遺産、ヴィンテージ、および印刷参照設計に適切
• リネン（#FAF0E6）は最もオレンジシフトした色合い（HSL：30°、94%の明度）を持ちます。ピーチ、有機的な品質で、自然、サステナブル、職人ブランディングに適しています
• ウェブ背景：象牙の場合はエディトリアル/タイポグラフィ。クリームはウォーム生活様式コンテンツのために。有機/自然なブランドのためのリネン。遺産とヴィンテージコンテキストのためのエッグシェル
• シェード生成ツールで色合いと色のバリアントを探索し、コンバーターでカラーモデルで変換します