グレイ対グレー：スペリング、シェード、およびカラーコード

「グレイ」か「グレー」か？答えはまったく大西洋のどちらの側にいるのか。およびコードで選択したもの。依存し、どの規約に従うかについて。異なる結果を生じるかもしれません。これは、スペリングが実際に技術的なコンテキストで重要である色の質問の1つです。たとえ両方の単語も同じ視覚的な現象を指している場合。黒と白の間のアクロマティックニュートラル。そしてそれを取り囲むすべての近ニュートラルな温かいおよび涼しいバリアント。

この記事は、スペリングの質問、CSSルール、グレイ「グレイ」を作成する技術的現実、温かいおよび涼しいグレイの間での選択肢に対する実用的なガイド、および完全な明度スペクトラム全体でキーグレイヘックスコードの参考表をカバーしています。

アメリカ対イギリスのスペリング：グレイ対グレー

スペリングの違いは、アメリカ対イギリス英語の最も明確な例の1つです。

両方のスペリングは古いです。単語はOld English grǣgに遡り、「グレイ」と「グレー」の両方は中世の英語テキストに表示されます。スペリングの分岐は、アメリカ英語がある変形の周りに標準化されるという一般的なパターンに従った一方、イギリス英語は別のものを保持しました。

有用なニモニック：grAyはアメリカ、grEyはヨーロッパです。 母音はそれぞれの大陸にマップされます。

日常的な使用では、どちらのスペリングも間違っていません。彼らは同じ色を指します。スタイルガイドおよびブランドガイドラインは通常、一貫性のために1つのスペリングを指定します。明確な地域的優先度のない国際的な聴衆に対して執筆している場合、「グレイ」は、ウェブのコンテキストでわずかな利点を持っています。CSSの指定の優先スペリングであるため。詳細以下です。

CSSの名前付き色：グレイは標準

HTMLおよびCSSカラー標準が確立されると、スペリングについての決定が行われました。両方のスペリングはCSSで受け入れられています。常に同じ色を指すわけではありません。これは微妙な技術的な危険を作成します。

CSSグレイファミリー

CSSには複数の名前付きグレイの色が含まれています。ここは完全なセット、適用可能な両方のスペリングのバリアント。

重要な注記：化合物の大部分（lightgray、darkgray、dimgray、slategray）の場合、両方のスペリングが存在し、同一のヘックス値を指します。ベースgray / greyでは、両方も#808080にマップされます。スペリング別の違いは最も重要です。ブラウザのデフォルトに依存している開発者の場合。実際には、CSSは両方のスペリングを正しく処理します。

より重要な技術ルール：ヘックスコードおよびRGB値では、「グレイ」対「グレー」という単語は無関係です。数字のみが重要です。#808080は#808080それがそれを呼ぶかどうかに関わらず。

グレイ「グレイ」を作成するもの？技術的な現実

純粋なグレイ。技術的にはアクロマティックカラーと呼ばれます。すべての3つのRGBチャネルで同じ値を持っています。赤、緑、および青が同じ場合、結果はニュートラルであり、色合いはありません。

HSL用語では、真にアクロマティックグレイは0%彩度と未定義色合いを持っています。明度パーセンテージは、それがどれだけ軽いまたは暗いかを決定します。

しかし、実世界の設計でのほとんどの「グレイ」カラーは完璧にアクロマティックではありません。彼らは彼らを「温かい」または「涼しい」にする微妙な色キャストを運びます。

50グレイのシェード：スペクトラム全体でキーヘックスコード

ニアホワイトからニアブラックまでの完全な範囲にまたがる実用的なリファレンス。

重要なアクセシビリティグレイ：#767676

この特定のグレイは超過評価の重要性を持っています。それはホワイト#FFFFFFに対して4.5:1の対比比を達成する最も軽いグレイです。これはWCAG AAの最小値は正常なテキストです。#767676より軽いグレイはすべてホワイト背景のテキストとしてWCAG AAに失敗しています。

つまり、CSS gray（#808080）は技術的にWCAG AAに失敗しています。白に対して約3.95:1の対比比を達成しています。「グレイ」と呼ばれ、相対的に暗く感じるにもかかわらず、アクセス可能な本文テキスト用には暗くありません。アクセス可能であることを目的としたテキストの場合は、#767676または暗くを使用します。

涼しいグレイ対温かいグレイ：設計者の実際の質問

実際には、設計者にとって、より重要な区別は「グレイ対グレー」ではなく、温かいグレイ対涼しいグレイです。

涼しいグレイは青、緑、または紫に傾きます。彼らはスムーズで、モダンで、臨床的に感じられます。他の涼しい色とペアリングは良好です。テック先進の美学を作成します。

温かいグレイは赤、オレンジ、または黄色に傾きます。彼らは自然で、アプローチ可能で、地球のように感じられます。木の色合い、テラコッタ、およびその他の温かい自然の素材とペアリングは良好です。

ニュートラルグレイ。完璧にアクロマティックで色合いはありません。2つの間に座ってください。実際には、真にニュートラルグレイは、周囲の色に応じて異なって知覚されています。同時対比として知られるコンテキスト効果。

温かいグレイ対涼しいグレイの例

ヘックスコードで温かいグレイ対涼しいグレイを識別する方法

RGB値を見てください。 - もし青は最も高い3つのチャネルの中で。涼しいグレイ - もし赤または緑が最も高い温かいグレイ - もしすべて3つが等しいニュートラルグレイ

例えば： - #708090 = rgb(112, 128, 144)青（144）が最高です。涼しいグレイ - #9B9B8A = rgb(155, 155, 138)青（138）が最低です。温かいグレイ - #808080 = rgb(128, 128, 128)すべてが等しい。ニュートラルグレイ

最新のウェブ設計におけるグレイ

グレイは間違いなくウェブ設計で最も重要な色です。それは表示されます。 - ページ背景。白の代わりにライトグレイを使用すると、目の疲れが低下し、視覚的な階層が作成されます - UIコンポーネント。ボーダー、区切り線、入力フィールドの背景、およびカード背景はほぼ普遍的にグレイです - タイポグラフィ。ウェブ上のボディテキストは純粋な黒ではなくダークグレイであることが多く、厳しさを軽減します - 無効な状態。グレイアウトされたインタラクティブ要素は普遍的に利用不可能を示します

ウェブ設計システム用の実用的なグレイ値

Tailwind CSSグレイスケール（#F9FAFBを通じて#030712）はウェブ設計システムのための参照となっています。シェードジェネレーターを使用してTailwindスタイル50-950グレイスケールを任意のベースグレイ値から作成します。

ダークモードグレイ戦略

ダークモード設計には慎重なグレイ選択が必要です。純粋な黒#000000をダークモード背景として使用したいという誘惑はほとんどのケースで抵抗されるべきです。純粋な黒は白いテキストで不快に厳しい対比を作成します。代わりに：

• ダークモード背景#121212から#1E1E1E範囲で最適に動作します。暗いが黒ではない
• ダークモード表面（カード、ダイアログ）背景より一段階または2つ軽くする必要があります：#2C2C2Cから#3A3A3A
• ダークバックグラウンド上のテキスト純粋な白ではなく、温かいオフ色で最適に機能します（#E8E8E8から#F5F5F5）

カラーモデル間でのグレイシェードの変換

いかなるグレイの場合、変換は単純です。アクロマティック特性は、CMYK、および他のモデルが予測可能に動作することを意味します。

真にアクロマティックグレイ（等しいR、G、B）の場合、CMYK値は常にC:0 M:0 Y:0 K:{X}ここでKは100から明度パーセンテージを引いたものです。色コンバーターを使用してCMYK値がより複雑になる非ゼロ色合いを持つ温かいおよび涼しいグレイを処理します。

主なポイント

• スペリング： 「グレイ」はアメリカ英語です。「グレー」はイギリス英語です。CSSでは、両方のスペリングが名前付き色に対して有効です。ほとんどの人は同一のヘックス値にマップします。ベースgrayおよびgrey両方とも#808080に等しい
• 技術的定義： 真のアクロマティックグレイは、同じRGBチャネル（R=G=B）および0% HSL彩度を持っています。チャネルの不均衡は温かい（赤/緑より高い）または涼しい（青より高い）グレイを作成します
• アクセシビリティ重要な閾値： #767676は、白の上のテキストとしてWCAG AA（4.5:1）を通過する最も軽いグレイです。CSS gray#808080失敗します。約3.95:1対比のみを達成します
• 温かい対涼しい識別： 青チャネルが最高。涼しいグレイ。赤/緑が最高。温かいグレイ。等しいチャネル。ニュートラル
• ウェブ設計： グレイの背景、ボーダー、およびテキストバリアントはほぼすべてのウェブUIの構造的なレイヤーを形成します。ライトモード背景は#F5F5F5の周辺をそしてダークモード背景は#121212から#1E1E1Eの周辺で使用
• シェードジェネレーターを使用して完全なグレイスケールを構築し、色コンバーターをCMYK、HSL、RGB、またはOKLCHにいかなるグレイも翻訳するために使用します。