原色
他の色を混合して作ることができない色のセットで、特定のカラーモデル内の他のすべての色はこれらから導出できます。加法混色(光/スクリーン)では原色は赤、緑、青(RGB)です。減法混色(インク/塗料)では、伝統的な原色は赤、黄、青(RYB)、または現代の印刷ではシアン、マゼンタ、黄(CMY)です。
関連項目: RGB Format, CMYK Format
眼の錐体細胞が部分的に機能している稀な不完全色覚異常の一種で、色の知覚が著しく低下するものの完全には失われません。不完全全色盲とも呼ばれます。影響を受けた人は、完全な色スペクトルの彩度が低く、色あせたバージョンを見ます。
網膜の錐体細胞が機能しないか欠如していることにより引き起こされる、色覚の完全な喪失です。全色盲の人は世界を完全にグレーの階調で知覚し、通常は光過敏症と視力低下を経験します。世界中で約3万人に1人が影響を受けています。
発光を組み合わせることで色を作り出す混色モデルです。3つの加法原色は赤、緑、青(RGB)で、3つすべてを最大強度で混合すると白が生成されます。このモデルは、スクリーン、モニター、プロジェクターが色を表示する方法を支配しています。
関連項目: RGB Format
色の値に追加される(赤、緑、青以外の)4番目のチャンネルで、その色の不透明度または透明度を表します。アルファ値1(または100%)は完全に不透明を意味し、0は完全に透明を意味します。CSSではrgba()、hsla()、およびモダンなカラー関数を通じて広く使用されています。
関連項目: HEX Format, RGB Format
色相環上で隣接する3つの色で構成される色彩調和で、通常30度の弧内にあります。類似色パレットは色が共通の色相ファミリーを共有するため、統一感があり穏やかに感じられます。統一された低コントラストのデザインを作成するのに適しています。
関連項目: Palette Generator
色から放射または反射される光の知覚された強度で、黒(明るさなし)から最大発光強度までの範囲です。HSB/HSVカラーモデルでは、明るさは「B」または「V」コンポーネントであり、HSLの明度とは異なります。明るさを上げると色がより鮮明になり、下げると色は黒に近づきます。
関連項目: HSB Format
同様に照明された白い表面の明るさに対する刺激の色味の度合いです。飽和度とは異なり、クロマは絶対的な尺度です — 高いクロマの色は明度に関係なく鮮やかで純粋に見えます。LCHおよびOKLCHカラースペースの「C」コンポーネントです。
関連項目: LCH Format, OKLCH Format
印刷制作で使用される減法混色モデルで、シアン、マゼンタ、イエロー、キー(黒)の略称です。インクは白い紙から特定の波長の光を吸収(減算)し、4つのインクすべてを最大強度で組み合わせるとほぼ黒が生成されます。CMYKはオフセット印刷、インクジェットプリンター、商業印刷の標準カラーモデルです。
関連項目: CMYK Format
網膜の錐体光受容体の欠如や欠陥により、特定の色を区別する能力が低下または欠如する状態です。最も一般的なタイプは赤緑色覚異常(第一色覚異常、第二色覚異常とそれぞれの軽度型)で、次いで青黄色覚異常(第三色覚異常/第三色弱)と全色盲(全色覚異常)があります。世界中で男性の約8%、女性の約0.5%が影響を受けています。
デバイス、カラースペース、または印刷プロセスが再現できる色の完全な範囲です。広い色域はより多くの色を表示または印刷できることを意味します。一般的な色域にはsRGB(Web標準)、Display P3(最新のAppleデバイスで使用)、Adobe RGB(写真で使用)が含まれます。
関連項目: RGB Format
一緒に使用したときに美的に心地よくバランスの取れた色の組み合わせを説明する色彩理論の原則です。調和のルールは、補色、類似色、三色配色、四色配色などの色相環上の幾何学的関係から導かれます。効果的な色彩調和は、統一感を維持しながら視覚的な興味を生み出します。
関連項目: Palette Generator
色を数値のタプル(通常3つまたは4つのコンポーネント)として記述する抽象的な数学システムです。例としてRGB(赤、緑、青)、CMYK(シアン、マゼンタ、イエロー、キー)、HSL(色相、彩度、明度)があります。カラーモデルは色がどのように数値的に表現されるかを定義しますが、それ自体ではそれらの数値が実世界の色にどのようにマッピングされるかを指定しません。
関連項目: Color Formats Reference
定義されたプライマリー、ホワイトポイント、および伝達関数(ガンマ)を使用して、数値を正確で再現可能な実世界の色にマッピングするカラーモデルの具体的な実装です。sRGB、Display P3、Adobe RGBはすべてRGBモデル上に構築されたカラースペースですが、色域が異なります。カラースペースにより、デバイス間での色の一貫性を確保することが可能になります。
関連項目: Color Formats Reference
色が暖色(赤みがかった黄色)に見えるか寒色(青みがかった)に見えるかを表す可視光の特性です。光源ではケルビンで測定され、低い温度(〜2700K)は暖かいアンバー色の光を、高い温度(〜6500K)は冷たい昼光色の青い光を生成します。デザインでは、暖色と寒色が雰囲気と視覚的な階層に影響を与えます。
色相を色彩関係に基づいて円の周りに配置した円形の図で、原色が等間隔に配置され、二次色と三次色がそれらの間に配置されます。1666年にアイザック・ニュートンによって最初に開発され、色の関係を理解し色彩調和を構築するための基本的なツールとして今も使われています。
関連項目: Palette Generator
色相環上で180度離れた正反対に位置する2つの色です。隣り合わせに配置すると最大の視覚的コントラストと鮮やかさを生み出しますが、混合するとグレーに向かって互いに中和されます。一般的な補色のペアには赤/シアン、青/オレンジ、黄/紫が含まれます。
関連項目: Palette Generator
前景色と背景色の輝度差の数値測定で、1:1(コントラストなし)から21:1(白地に黒)までの比率で表されます。WCAG 2.1はAAレベルで通常テキストに4.5:1、大きなテキストに3:1の最小コントラスト比を要求します。高い比率はすべてのユーザー(低視力のユーザーを含む)の読みやすさを向上させます。
関連項目: Contrast Checker
oklch()、lab()、lch()、hwb()、任意のカラースペース用のcolor()関数を含む新しいカラー関数とカラースペースでCSSの色機能を拡張するW3C仕様です。スタイルシート内で直接知覚的に均一な色操作を導入し、より広い色域とより予測可能な色調整を可能にします。2024年以降、すべてのモダンブラウザでサポートされています。
関連項目: CSS Color Converter
2つの色の知覚的な差異を定量化する指標で、低い値ほど視覚的に類似した色を示します。最新バージョンのDelta-E 2000(CIEDE2000)は人間の知覚的な不均一性を考慮しており、業界標準です。1.0未満のDelta-E値は一般的に人間の目には識別できないと考えられています。
関連項目: Tailwind Color Finder
M錐体(緑)の光色素の変異により感度が赤方向にシフトすることで引き起こされる、最も一般的な色覚異常の形態です。赤と緑の色相を区別する能力が低下しますが、ある程度の色識別は維持されます。男性の約5%、女性の約0.35%が影響を受けます。
網膜のM錐体(緑感受性)光受容体の完全な欠如により引き起こされる赤緑色覚異常の一形態です。第二色覚異常の人は緑色光を知覚できず、赤、緑、一部の茶色を混同します。男性の約1.2%、女性の約0.01%が影響を受けます。
ピクセルの数値値と画面に表示される実際の輝度との非線形関係を考慮するために、エンコードされた色値に適用される非線形伝達関数です。ガンマ値2.2はほとんどのディスプレイとsRGBカラースペースの標準です。ガンマ補正により、異なるデバイス間で一貫した明るさで画像が表示されることが保証されます。
特定のカラースペース内で正確に表現できる、または特定のデバイスで再現できる色の完全なサブセットです。特定の色域外にある色は「色域外」と呼ばれ、スペース間の変換時に近似またはクリッピングが必要です。広色域ディスプレイ(例:Display P3)は標準のsRGBモニターよりも飽和した色を表示できます。
関連項目: Color Formats Reference
2つ以上の色間の滑らかな視覚的遷移で、デザインにおいて背景、オーバーレイ、装飾要素としてよく使用されます。CSSは線形グラデーション(直線軸に沿って)、放射状グラデーション(中心点から放射)、円錐グラデーション(中心点の周りを掃引)をサポートしています。画像を使用せずに奥行き、立体感、視覚的な興味を生み出すことができます。
関連項目: Gradients
黒からさまざまなグレーを経て白までの無彩色の範囲で、色情報を含みません(彩度ゼロ)。グレースケール画像では、各ピクセルは輝度値のみを格納します。グレースケールは、中立的な背景、アクセシビリティテスト、印刷準備のためにデザインで使用されます。
#をプレフィックスとした16進数(基数16)文字列を使用して色を表す色表記法です。#FF5733のような標準HEXコードは、赤、緑、青のチャンネルを2桁のペア(FF=255、57=87、33=51)としてエンコードします。3桁の短縮形(#RGB)、アルファ付き4桁(#RGBA)、アルファ付き8桁(#RRGGBBAA)のバリアントをサポートしています。HEXはWeb開発で最も広く使用されているカラーフォーマットです。
関連項目: HEX Format
色相、彩度、明るさを表す円柱型カラーモデルで、HSV(色相、彩度、値)とも呼ばれます。色相は色の角度(0-360度)、彩度は色の純度(0-100%)、明るさはピーク光強度(0-100%)を表します。PhotoshopやFigmaなどのツールのほとんどのビジュアルカラーピッカーで使用されているカラーモデルです。
関連項目: HSB Format
色相、彩度、明度を表す円柱型カラーモデルです。色相は色相環上の度数(0-360)、彩度は色の強度の割合(0-100%)、明度は黒(0%)から純色(50%)を経て白(100%)までの割合で表されます。HSLはCSSでネイティブにサポートされており、直感的な構造のためRGBよりも好まれることが多いです。
関連項目: HSL Format
色相環上での位置を定義する色の属性で、0から360度の角度として測定されます。赤は0度、緑は120度、青は240度に位置します。色相は一つの色のファミリーを他と区別する基本的な品質であり、HSL、HSB、HWB、LCH、OKLCHカラーモデルの「H」コンポーネントです。
関連項目: HSL Format
色相、白さ、黒さを表すカラーモデルで、人間にとって最も直感的な色選択方法として設計されています。色相は色相環上の角度、白さはどれだけ白が混合されているかを示し、黒さはどれだけ黒が混合されているかを示します。HWBはCSS Color Level 4でhwb()関数を通じてサポートされています。
関連項目: HWB Format
知覚的に均一なカラースペース(正式にはCIELAB)で、3つの軸で構成されます:Lは明度(0-100)、aは緑-赤軸(-128〜127)、bは青-黄軸(-128〜127)です。LABでの等しい数値ステップはほぼ等しい知覚される色差に対応し、色距離(Delta-E)計算の標準参照となっています。LABはCSS Color Level 4でサポートされています。
関連項目: LAB Format
CIELABカラースペースの円柱表現で、明度(0-100)、クロマ(色味、0-150+)、色相(角度、0-360度)を使用します。LCHはクロマと色相が独立しているため、LABのデカルトa/b軸よりも直感的で、知覚的に均一なカラースケールの作成を容易にします。CSS Color Level 4でlch()関数を通じてサポートされています。
関連項目: LCH Format
参照白に対する色の知覚される明るさで、0%(黒)から100%(白)の範囲です。HSLでは、0%の明度は黒、50%は純粋な色相、100%は白です。LABやOKLCHのような知覚的カラースペースでは、明度はより均一になるよう設計されています — 等しい数値の変化が等しい知覚される明るさの変化を生み出します。
関連項目: HSL Format, LAB Format
表面から特定の方向に放射または反射される光の強度の測光測定で、カンデラ毎平方メートル(cd/m²)で測定されます。WCAGのコントラスト計算で使用される相対輝度は、0(最も暗い黒)から1(最も明るい白)までのリニアスケール値で、赤、緑、青の光に対する人間の目の異なる感度を考慮しています。
関連項目: Contrast Checker
加法混色とライティングアプリケーション向けに最適化された知覚的に均一なカラースペース(正式にはCIELUV)です。コンポーネントは明度(L、0-100)、u(緑-赤の色度、約-134〜224)、v(青-黄の色度、約-140〜122)です。CIELUVはテレビや建築照明など、放射光を扱うコンテキストではCIELABよりも好まれます。
関連項目: LUV Format
最長軸の中央値でカラースペースを再帰的に分割することにより、多数の色をより小さな代表的なパレットに削減する色量子化アルゴリズムです。1982年にPaul Heckbertによって最初に記述され、画像からドミナントカラーを抽出する最も広く使用されている方法の一つです。色の精度と計算効率のバランスを取るアルゴリズムです。
関連項目: Image Color Extractor
単一の色相に基づくカラースキームで、その色相のシェード、ティント、トーンを作成するために彩度と明度のバリエーションのみを使用します。モノクロマティックパレットは本質的に調和的で、ミニマルでエレガントなデザインに多く使用されます。視覚的な統一感を提供しますが、色のコントラストは限定的です。
関連項目: Palette Generator
Björn Ottossonによって設計された現代的な知覚カラースペースで、明度(0-1)、クロマ(0-0.4+)、色相(0-360度)を使用します。CIELABベースのスペースで発生する色相シフトを排除し、より均一な色相挙動を提供することでLCHを改善します。OKLCHはCSS Color Level 4に推奨されており、知覚的に均一な色操作のためのブラウザサポートが拡大しています。
関連項目: OKLCH Format
色や要素がその背後のコンテンツをどの程度ブロックするかの度合いで、0(完全に透明)から1(完全に不透明)の値で表されます。CSSでは、opacityプロパティ(要素全体に影響)またはrgba()やhsla()などのカラー関数のアルファチャンネルを通じて設定できます。不透明度はレイヤリング、グラスモーフィズム効果、視覚的な奥行きの作成に不可欠です。
関連項目: RGB Format
デザインで一緒に機能するよう選ばれた色のキュレーションセットで、通常3〜10色を含みます。パレットは色彩調和のルール、ブランドガイドライン、または美的好みを使用して構築されます。適切に設計されたパレットは、視覚的な一貫性、アクセシビリティのための十分なコントラスト、意図したムードやブランドアイデンティティをサポートします。
関連項目: Palette Generator
Pantone LLCが開発した独自のカラーマッチングシステムで、数千の標準化されたスポットカラーにユニークな英数字コードを割り当てます。印刷、ファッション、工業デザイン、製品製造における色コミュニケーションの業界標準です。Pantoneカラーは異なる材料や製造プロセス間での一貫した再現を保証します。
他の色を混合して作ることができない色のセットで、特定のカラーモデル内の他のすべての色はこれらから導出できます。加法混色(光/スクリーン)では原色は赤、緑、青(RGB)です。減法混色(インク/塗料)では、伝統的な原色は赤、黄、青(RYB)、または現代の印刷ではシアン、マゼンタ、黄(CMY)です。
関連項目: RGB Format, CMYK Format
L錐体(赤)の光色素の変異により感度が緑方向にシフトすることで引き起こされる赤緑色覚異常の一形態です。赤と緑を区別する能力が低下し、赤がより暗く鮮明さが減って見えます。男性の約1.3%、女性の約0.02%が影響を受けます。
網膜のL錐体(赤感受性)光受容体の完全な欠如により引き起こされる赤緑色覚異常の一形態です。第一色覚異常の人は赤色光を知覚できず、赤が暗く見え、特定の緑や茶色と区別がつきません。男性の約1.3%、女性の約0.02%が影響を受けます。
3つのチャンネルを使用して色を表す加法混色モデル:赤(0-255)、緑(0-255)、青(0-255)。デジタルスクリーンのネイティブカラーモデルで、赤、緑、青の光をさまざまな強度で組み合わせて色を作り出します。RGBはWeb開発で最も広く使用されているカラーフォーマットの一つで、CSSではrgb()およびrgba()としてサポートされています。
関連項目: RGB Format
色の強度または純度で、同じ明度のニュートラルグレーと比較してどれだけ鮮やかに見えるかを表します。完全に飽和した色にはグレーが含まれず最も鮮やかに見え、脱飽和した色は落ち着いた色あせた外観になります。彩度はHSLとHSBの「S」コンポーネントで、0%(グレー)から100%(純色)の範囲です。
関連項目: HSL Format, HSB Format
2つの原色を等しい割合で混合して作られる色です。RGB(加法)モデルでは、二次色はシアン(緑+青)、マゼンタ(赤+青)、黄(赤+緑)です。伝統的なRYB(減法)モデルでは、二次色はオレンジ、緑、紫です。
関連項目: Palette Generator
ベースの色相に黒を加えることで作成される色のバリエーションで、色相角を保持しながら明度を低下させます。シェードは元の色よりも暗くドラマチックです。CSSではHSLの明度値やHSBの明るさを下げることでシェードを生成できます。
関連項目: Palette Generator
ベースカラーから始まり、色相環上のその補色の両側の2色を使用する色彩調和で、狭い二等辺三角形を形成します。補色に似た高い視覚コントラストを提供しますが、よりニュアンスがあり視覚的緊張が少ないです。分裂補色スキームは最も汎用的で人気のある調和タイプの一つです。
関連項目: Palette Generator
1996年にHPとMicrosoftがモニター、プリンター、インターネット用に作成した標準RGBカラースペースです。特定の赤、緑、青のプライマリーセットとD65ホワイトポイント、約2.2のガンマカーブを定義しています。sRGBはWeb、CSS、ほとんどの消費者向けディスプレイのデフォルトカラースペースですが、比較的狭い色域のため高彩度色を表現できません。
関連項目: RGB Format
印刷や絵画で使用される混色モデルで、顔料やインクが特定の光の波長を吸収(減算)し、残りを反射します。減法原色はシアン、マゼンタ、黄(CMY)で、3つすべてを最大強度で組み合わせると理論的に黒が生成されます。実際には黒インク(キー)が追加され、CMYKモデルを形成します。
関連項目: CMYK Format
Tailwind CSSユーティリティファーストフレームワークのデフォルトカラーシステムで、22のカラーファミリー(slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose)にそれぞれ11のシェード(50、100-900、950)があります。アクセシブルで一貫性のあるUI開発用に設計され、合計242の名前付きカラーユーティリティがあります。
色相環上で原色と隣接する二次色を混合して作られる色で、6つの中間色相を生み出します。RYBモデルでは、赤オレンジ、黄オレンジ、黄緑、青緑、青紫、赤紫です。三次色は洗練されたカラーパレットを構築するためのより繊細で具体的な色相オプションを提供します。
関連項目: Palette Generator
色相環上で2つの補色ペアとして配置された4色を使用する色彩調和で、長方形を形成します。四色配色スキームは標準的な調和の中で最も豊かな色の多様性を提供しますが、慎重なバランスが必要です — 通常1色が支配的で、他の色はアクセントとして機能します。ダブル補色スキームとも呼ばれます。
関連項目: Palette Generator
ベースの色相に白を加えることで作成される色のバリエーションで、色相角を保持しながら明度を上げます。ティントは元の色よりも明るくパステル調です。CSSではHSLの明度値を上げるかOKLCHのクロマを下げることでティントを生成できます。
関連項目: Palette Generator
ベースの色相にグレー(黒と白の混合物)を加えることで作成される色のバリエーションで、ほぼ同じ明度を維持しながら彩度を低下させます。トーンは純粋な色相よりも控えめで洗練され、自然に見えます。実世界で見られるほとんどの色は、純粋な色相ではなくトーンです。
関連項目: Palette Generator
色相環上で120度ずつ等間隔に配置された3色を使用する色彩調和です。三色配色スキームは鮮やかで、色のバランスを維持しながら強い視覚的コントラストを提供します。原色の三つ組み(赤、緑、青)と二次色の三つ組み(シアン、マゼンタ、黄)は典型的な例です。
関連項目: Palette Generator
S錐体(青)の光色素の変異により感度が低下することで引き起こされる、稀な青黄色覚異常の一形態です。第三色弱の人は青と緑、黄とバイオレットを区別するのが困難ですが、ある程度の青の知覚は維持されます。人口の約0.0001%が影響を受けると推定されています。
網膜のS錐体(青感受性)光受容体の完全な欠如により引き起こされる稀な色覚異常の一形態です。第三色覚異常の人は青色光を知覚できず、青と緑、黄と紫を混同します。赤緑色覚異常とは異なり、第三色覚異常は男女ほぼ同率で発生し、男性の約0.001%、女性の約0.03%に見られます。
色彩理論では、バリューは色相や彩度に関係なく、色の明暗を指します。色がどれだけの光を反射しているように見えるかに対応します。HSB/HSVモデルでは、バリュー(V)は0%(黒)から100%(色相の最大明るさ)の範囲で、明るさコンポーネントと同義です。
関連項目: HSB Format
W3CのWebアクセシビリティ・イニシアティブ(WAI)が発行するWebコンテンツ・アクセシビリティ・ガイドラインで、障害のある人々がWebコンテンツにアクセスできるようにするための基準を定義しています。WCAG 2.1は最小カラーコントラスト比を指定しています — 通常テキストに4.5:1(AA)、大きなテキストに3:1(AA)、通常テキストに7:1(AAA) — 低視力や色覚異常のユーザーの読みやすさを確保します。
関連項目: Contrast Checker
1990年代の256色モニターと初期のWebブラウザで一貫して表示された216色のパレットです。各色はRGBチャンネルごとに16進値00、33、66、99、CC、またはFFのみを使用し、均一なレンダリングを保証しました。現代のディスプレイは数百万色をサポートするため、Webセーフカラーは今日ではほとんど時代遅れです。
関連項目: HEX Format
国際照明委員会(CIE)が定義したデバイス非依存のカラースペースであるCIE 1931 XYZカラースペースです。実質的に他のすべてのカラースペースの数学的基盤として機能し、人間の色知覚を3つの三刺激値X、Y、Zにマッピングします。Yコンポーネントは輝度に対応し、XYZを色科学と色度計算の中心に位置づけています。
関連項目: XYZ Format