カラーQ&A

ベージュvs.クリーム:何が違うのか?

1分で読める

ベージュとクリームは、インテリア装飾とファッションにおけるデザイン、デザインにおいて最も頻繁に混同される2つのニュートラルカラーです。両方とも淡い、暖かい、オフホワイトのトーンです。色スペクトルの同じコーナーに位置しています。しかし、経験豊富なデザイナーは、彼らを意味ある選択の相違として扱います。区別は、彼らのアンダートーン、彼らのオリジンストーリー、彼らが任意のスペースまたは構成で作成する気分です。

ある人に何か「かなりオフホワイト、完全に黄色ではない、多分ベージュまたはクリーム?」と説明したことがある場合、この記事はあなたに語彙と16進コードを与えます。彼らを正確に分けます。

ベージュ:灰色黄色ベースを持つ暖かいニュートラル

ベージュの標準16進コードは#F5F5DCです。RGB では、これはrgb(245, 245, 220) に分割されます。赤と緑は等しい(両方とも245)で、青は220に削減されています。ほぼ等しい赤と緑の値は黄色の品質を生成し、削減されたが依然として有意な青の値は、ベージュが純粋に黄色から読み込まれるのを保つ微妙な灰色のクールさを導入します。

HSL 用語では、ベージュはhsl(60, 56%, 91%)に位置しています。黄色の色相(60度、色相環の赤と緑の間ちょうど中間)は、中程度の彩度の高い明度です。これはベージュをデザイナーがそれを経験する色の軽い脱色黄色として位置付けています。

HSLおよびRGBのベージュ

Property Value
Hex #F5F5DC
RGB rgb(245, 245, 220)
HSL hsl(60, 56%, 91%)
CMYK C:0% M:0% Y:10% K:4%
Blue channel 220(低い、黄色の温かさを作成)

やや削減された青チャネルがベージュを純粋な白から区別し、その特性的な温かさを与えます。それは黄色なく温です。それはそれなしで柔らかいです。インテリア設計では、ベージュは自然、地下、および基盤を読みます。

「ベージュ」という言葉

「ベージュ」という言葉は19世紀半ばのフランスからの英語に入りました。フランス語で、「ベージュ」はもともと、自然、未彩色のウールを指していました。未処理のフリーシー。羊の品種に応じて、オフホワイトから淡いタンまで変わります。このエトニロジーはベージュのキャラクターについて重要なことを教えてくれます。それは自然の材料のそのままの状態の色です。綿、麻、羊毛、そして自然な木はすべてベージュになります。

このオリジンはベージュに有機的な材料、職人技術、およびシンプルさの持続する関連付けを与えます。ミッドセンチュリーモダニズムは自然な繊維と暖かいニュートラルズを支持したとき、ベージュは基盤的なパレットカラーになりました。スカンジナビア主義が自然な木のトーンと未光のテキスタイルを強調したとき、ベージュが続きました。「静寂の豪華」がメンダフション&Fashion の支配的な美学になったとき、ベージュはその中心にありました。

クリーム:より暖かい、より黄色いオフホワイト

クリームの標準16進コードは#FFFDD0です。RGB:rgb(255, 253, 208)。赤が最大(255)で、緑が近い最大値(253)で、青が208で大幅に削減されています。ベージュと比較して大幅に低い青チャネルは、クリームが暖かく、より決定的に黄色を感じます。

HSL:hsl(57, 100%, 91%)です。黄色-緑色の色相(57度)での極めて高い彩度(100%)、非常に高い明度での。100%の彩度は驚くべき。高い明度がそれを鮮やかに見えるのを防いでいても、これはこの淡いトーンの最も飽和された版はクリームです。これが豊かで、ほぼ発光する品質を与えます。

HSL &RGBのクリーム

Property Value
Hex #FFFDD0
RGB rgb(255, 253, 208)
HSL hsl(57, 100%, 91%)
CMYK C:0% M:1% Y:18% K:0%
Blue channel 208(ベージュの220より低く、より多くの黄色を追加)

クリーム(208)と比較したベージュ(220)の青チャネル値の低い値は重要です。青チャネルの12ポイント差がクリームをベージュから分離しています。クリームはより多くの黄色を許可し、より豊かで、暖かく、より乳製品のような品質を与えます。

なぜ「クリーム」が乳製品の後に名付けられているか

「クリーム」という色の名前は、乳製品のクリームから直接来ています。全乳の上部に上昇する豊かで、脂肪重いです。実際の乳製品クリームは白ではありません。それは、バターファットとカロテノイドから暖かい黄色の色合いを持ちます。色の名前は、このような特定の暖かいオフホワイトの色合いを説明するために、少なくとも17世紀後期から英語で使用されていました。

この命名はベージュとは異なる協会にクリームを与えます。ベージュは自然な繊維と地下のシンプルさを示唆し、クリームは豊かさ、豪華さ、快適さを示唆しています。クリーム色のインテリアは招待的で、わずかに放縦に感じます。クリーム文房具は、白よりも正式で高級に感じます。クリームのウェディングドレスはベージュまたは白のものとは異なる含意を持ちます。

並列視覚的比較

違いを見る最も明確な方法は、16進値とそれらの特性の直接的な比較を通じて:

Property Beige Cream
Hex #F5F5DC #FFFDD0
RGB rgb(245, 245, 220) rgb(255, 253, 208)
HSL hsl(60, 56%, 91%) hsl(57, 100%, 91%)
Lightness 91% 91%
Saturation 56% 100%
Blue channel 220 208
Warmth Moderate warm Very warm
Undertone Yellow-gray Yellow (rich)
Association Natural fiber, earthy Dairy, luxury, richness

両方の色は、ほぼ同一の明度(91%)を共有しています。これは、彼らがしばしば一目で似ているように読む理由です。彼らを知覚的な間隔を作成するのは彼女の彩度の違いです。クリームの100%彩度とベージュの56%は、クリームが完全にその黄色の温かさにコミットしていることを意味しますが、ベージュは灰色の品質と混ざってバック保有しています。

参考のための近隣のカラー

ベージュとクリームが隣接する中立に関連するところを理解するため:

Color Hex Character
White #FFFFFF Pure, no undertone
Cream #FFFDD0 Warm yellow, rich
Ivory #FFFFF0 Warm white, subtler than cream
Beige #F5F5DC Warm yellow-gray
Linen #FAF0E6 Warm with pink-tan undertone
Khaki #F0E68C More saturated yellow-tan
Taupe #483C32 Dark warm neutral

ベージュを使うとき

インテリアデザイン

ベージュは、壁、大きな家具のピース、インテリア設計での床面取り用の典型的なニュートラルです。灰色の黄色のアンダートーンにより、バックグラウンドに後退できます。穏やかで定着した基盤を作成します。純粋な白とは異なり、ベージュの壁は臨床的または冷たいは読み込まれません。クリームとは異なり、ベージュは暖かい家具色を備えた注意のために競争しません。

インテリアでベージュの最高使用: - 壁塗料は、色にコミットすることなく温かさの目標があるとき - カーペットと地域。 ベージュの床はグレーより暖かく感じ、木の色合いより中立 - 大きな家具のアップホルステリーソファのような場所。完全な暖かい色はあまりにも支配的でしょう - 廊下やエントリーのような移行スペース。ベージュはより色鮮やかな部屋間の連続を作成します

ペアのベージュ:暖かい白、テラコッタ、セージグリーン、暖かい木の色合い、ラクダ、さび。

ウェブとデジタルデザイン

ウェブ設計では、ベージュは白への暖かい代替として機能します。純粋な白がスクリーンで臨床的で冷たいを感じている場合、ベージュはより柔らかく、よりエディトリアルな品質を作成します。多くの長いテキスト読解プラットフォーム、文学サイト、および手工芸ブランドはベージュの背景を使用しています。目の疲労を減らし、有機的な感覚を作成するためです。

ベージュの背景に関する考慮: - コントラスト比を慎重にチェックしてください。ベージュは、軽いテキストがWCAG標準に失敗するほど軽い。背景ベージュで使用したいのを確認するためにコントラストチェッカーを使用する任意のテキストカラー - ベージュの背景は、純粋な#000000よりも暗い褐色、炭、または暖かい黒いテキストで最適です - ページバックグラウンドとして#F5F5DCを検討し、本体テキスト用に#3D2B1F(ダークウォーム茶色)

ファッションとスタイル

ベージュは「静寂の豪華」ファッションの基盤色です。控えめで高品質の衣類の美学。クリーム(やや正式なまたはより貴重なものを読む)とは異なり、ベージュは努力なく、カジュアルで有機的に読み込まれます。亜麻ベージュのズボン、ベージュの色合いを持つ駱駝のコート、ベージュのニット。このような美学でのワードローブの定義。

クリームを使うとき

インテリアデザイン

クリームはインテリアで美しく機能します。温かさと豊かさが目標です。ベージュが後退する場合、クリームは輝きます。よく照らされた部屋の薄い壁は、ほぼ蜂蜜のようなクリーム照度を作成します。特にスペースで自然木、ブラス、またはテラコッタのアクセントがあります。

インテリアでクリームの最高使用: - トリムとモールディング。 クリーム削減対白い結果またはオフホワイト壁。純粋な白い削減がそうできない暖かく、レイアウトされた外観を作成します - アクセント家具の張りつけ。 クリーム椅子またはセッティーはベージュよりも視覚的存在を持ちます - キッチン家具。 クリーム家具には、純粋な白から異なるクラシックでわずかに古い品質がある - 寝具と柔らかい家具。 クリームは肌に対して贅沢で暖かく感じます

伝統的でクラシックなインテリアスタイル。フランスの国、イングランドの国、摂政。ベージュよりもクリームに傾います。クリームの豊かさは、多くのウッド家具と金色の詳細を補完しているため。

ウェブデザイン

クリームはウェブ設計でベージュより少し少ない共通です。その高い彩度はページ上の他の色と競争することができます。しかし、クリーム背景はに対して例外的に機能します: - 工芸、食べ物、およびライフスタイルのブランド。温かさと豊かさがキー値である場所 - ウェディングおよびイベントのウェブサイト。クリームの背景は優雅で正式に感じます - 印刷にインスピレーションを与えた編集レイアウト。クリームは老いた紙の温かみを模倣します

ファッション

クリームはファッションのコンテキストではベージュより正式で貴重です。クリームブラウスはベージュのものとは異なるものを読みます。クリームは洗浄されたシルクまたは細かい綿を意味します。ベージュは亜麻またはウールを意味します。クリームドレス(ウェディングドレスを含む)は、純粋な白が欠けている古い、ロマンチックな品質を持ちます。

対比とアクセシビリティ画像

両方のベージュとクリーム。テキストバックグラウンドまたはテキストカラーとして使用すると、非常に軽いカラーです。アクセシビリティの課題を作成します。

Pairing Contrast Ratio WCAG Status
Beige #F5F5DC + Black #000000 ~16.3:1 AAA
Cream #FFFDD0 + Black #000000 ~17.3:1 AAA
Beige #F5F5DC + Dark brown #3D2B1F ~7.2:1 AAA
Beige #F5F5DC + Medium gray #767676 ~3.5:1 Fail

両色の色黒いテキストと組み合わせてペアします。しかし、中程度または軽いグレーで失敗します。デザインシステムにコミットする前に、コントラストチェッカーで特定のペアリングを確認してください。

色モデル間の変換

ベージュまたはクリーム用のプロジェクトが16進法を超えた形式を必要とする場合:

Format Beige (#F5F5DC) Cream (#FFFDD0)
HEX #F5F5DC #FFFDD0
RGB rgb(245, 245, 220) rgb(255, 253, 208)
HSL hsl(60, 56%, 91%) hsl(57, 100%, 91%)
CMYK C:0% M:0% Y:10% K:4% C:0% M:1% Y:18% K:0%
OKLCH oklch(0.96 0.04 101) oklch(0.98 0.06 101)

カラーコンバーターを使用して、プリント(CMYK)、画面(RGB/HSL)、またはデザイントークン(HEX/OKLCH)に必要なフォーマット間で変換します。

主要なテイクアウェイ

  • Beige #F5F5DCは、中程度の彩度(56% HSL)を持つ黄色-灰色ニュートラル。その灰色のアンダートーンは、比較的均等な青チャネル(220)から来ています。定着、地下、有機品質を作成します
  • Cream #FFFDD0は、暖かく、完全に飽和した黄色-白(HSL彩度100%)で、より低い青チャネル(208)を使用して、より豊かで、より発光性で、乳製品のような温かみを提供します
  • 主要な技術的な違いは彩度です。クリームはその黄色の温かさに完全にコミットしますが、ベージュは灰色の抑制で保有しています
  • インテリアデザインでは、ベージュはニュートラル基盤として後退しますが、クリームは輝き、温かさを追加します
  • ファッションでは、ベージュはカジュアルで有機(「静寂の豪華」)を読み込みますが、クリームは正式で貴重に読み込まれます
  • ウェブデザイン、白の背景にデプロイメント前にアクセシビリティを確認するために両方でコントラストチェッカーを使用してください
  • カラーコンバーターを使用してHEX、RGB、HSL、CMYK、およびOKLCH形式で両方の色を操作します

関連カラー

関連ブランド

関連ツール