Webデザイナーのための色彩理論

色彩はWebデザイナー武器ライブラリ中最も強力のツールの一つ。それで任意の一つの字られる読む前にすぐに传达た意味，確立するた品牌标识，引导用户注意する力，かつ直接影響する转化率。しかし，多くの設計する师選択する色はに基づく个人設定または追随潮ストリーム，そしていいえ理解するさせる色彩コンポジット有効の基本原すなわち。このガイドではた毎位Webデザイナー必要とするの色彩理論ベース，からでコード中定義する色彩の技术モデルまで影響する用户感知と交互設計するの心理学原すなわち。

カラーモデル：RGB、HSL、HEXとCMYK

カラーモデルは表示と説明する色の系统方法。毎種類モデルすべてあり其適合する特定任务の优势。理解するこれらのモデルに役立つあなたより効率的に処理する色彩，かつ精密にに传达色選択。

RGB（赤、緑、青）

RGB は屏幕使用の加色モデル。それを通じて異なる強度コンポジット赤光、緑光と青光来生み出す可见光谱中のすべての色。各通道の範囲から 0（なし光）まで 255（最大強度）。時に三个通道すべてのために 0 时，結果のために黒色；時に三个通道すべてのために 255 时，結果のために白色。このモデル反映た物理屏幕を通じて发光来生み出す色の方式。

で CSS 中，RGB 色写のために rgb(255, 87, 51)。rgba() 变体追加するた透明度の alpha 通道，值から 0（完全透明）まで 1（完全不透明）：rgba(255, 87, 51, 0.8)。

HSL（色相、彩度、輝度）

HSL できる说は設計する师最も直感的のカラーモデル，なぜならそれ反映た人类考える色の方式。HSL いいえ混ぜる原色光通道，そしてはもって適合する私たち心理モデルの方式説明する色：

• 色相：色本身，表示のために色轮上の度数，から 0 まで 360。赤色のために 0，緑色のために 120，青色のために 240，すべての色で 360 度时循环回まで赤色。
• 彩度：色の強度または纯度，から 0%（完全グレー）まで 100%（完全鲜艳）。彩度のために 0% 时にかかわらず色相どのようにすべてできる生み出すグレー调。
• 明度：色の明暗程度，から 0%（黒色）まで 100%（白色）。明度のために 50% 时で完全彩度下に出纯色相。

HSL させるカラーバリエーションの作成变て軽そして易举。したいする必要がある品牌青色の浅色バージョン？増やす明度。必要とするより柔との色调？下げる彩度。これ比调全体単个 RGB 通道する必要がある直观て多。で CSS 中：hsl(210, 100%, 50%)。

HEX（16進数）

HEX は Web 開発する中最も一般的の色フォーマット。それ使用16進数表示法表示 RGB 值，其中各通道用两位16進数数表示，から 00 まで FF。フォーマットのために #RRGGBB，したがって #FF5733 表示赤色=255、緑色=87、青色=51。HEXとRGB で数学上は同じの——それ们だけは同じ值の異なる写法。

现代 CSS まだ支持するを含む alpha 通道の 4 位と 8 位 HEX 表示法。#FF573380 は同じ色で約 50% 不透明度下の表示。简写表示法如 #F53 展開するのために #FF5500。

CMYK（シアン、マゼンタ、イエロー、ブラック）

CMYK は印刷使用の减色モデル。と发光の屏幕異なる，印刷材料使用油墨吸收光线。CMYK 值表示毎種類油墨の百分比，から 0% まで 100%。だがWebデザイナーまれに直接使用 CMYK，しかしで準備する必要とする印刷の設計する（如名片または包装）时理解するそれとても重する必要がある。で屏幕上看起来鲜艳の色で印刷中かもしれない显て暗淡，なぜなら RGB 色域比 CMYK 色域より大。

カラーモデルの比較

色彩調和の原則

色彩調和は指视觉上させる人愉悦と平衡の色コンポジット。これらのコンポジットに基づく色轮上のいくつ何リレーション。理解するこれらの原すなわちのためにあなた作成するカラーパレット提供するた信頼できるの起点，そしていいえ靠猜测。

コンプリメンタリー配色

コンプリメンタリー配色位于色轮上正正面の位置（相隔 180 度）。赤色と緑色、青色とオレンジ色、黄色と紫色はコンプリメンタリー配色正。これらのコンポジット生み出す最大のコントラストと视觉できる量。それ们に適用される行动号召ボタンと必要とする突出の元素，しかしもしもって同じ比例使用かもしれないできる生み出す视觉冲击。最も効果的の方法は使用一種の色としてメインカラー调，其コンプリメンタリー配色としてアクセントカラー。

アナロガス配色

アナロガス配色位于色轮上相邻の位置（通常相隔 30 まで 60 度）。青色、青緑色と緑色構成するアナロガス配色方案。これらのコンポジット感觉と谐统一，なぜなら色共享相似の底色。アナロガス配色カラーパレット非常に適合する作成する平静、统一の設計する，しかし缺乏強視覚的階層所需のコントラスト。追加する中性色に使用される文本と背景もって提供する必する必要があるの比較。

トライアド配色

トライアド配色で色轮上均匀分布，相隔 120 度。使用赤、黄色、青のトライアド配色方案作成するた一つの充満活力、平衡のカラーパレット，を持つ強烈の视觉比較同時に保持と谐。トライアド配色方案用途広く，に適用される必要とする感觉充満活力と色彩丰富しかし不混乱の設計する。とコンプリメンタリー配色方案一样，させる一種の色占主导，其彼两種類としてアクセントカラー。

スプリットコンプリメンタリー配色

スプリットコンプリメンタリー配色方案もって一種のベース色開始する，使用よりもむしろコンプリメンタリー配色相邻の两種類色そしていいえコンプリメンタリー配色本身。これは以下を提供しますたコンプリメンタリー配色方案のコントラストしかし张力较小，より簡単使用。例えば，もしベース色は青色，不使用オレンジ色（コンプリメンタリー配色），そしては使用赤オレンジ色と黄色オレンジ色。これはWebデザインにおける最も幅容と最も通用のと谐タイプの一つ。

テトラード配色（ダブルコンプリメンタリー）

テトラード配色方案使用两正コンプリメンタリー配色，で色轮上形成する一つの矩形。これは以下を提供しますた最も丰富の色彩種類类，しかし最も難平衡。閉键はさせる一種の色占主导，第二種類としてサブカラー，其余两種類予約のためにアクセントカラー。あまりにも多同など突出の色できる生み出す视觉混乱。

アクセシビリティとコントラスト (WCAG)

色彩アクセシビリティいいえ可オプション——で多くの司法管辖区それは法律要件，もは包容性設計するの道德义务。Web 内容アクセシビリティガイド (WCAG) 定義するた具体的のコントラスト要件，確保する文本正各種類色觉缺陷の人すべては可読の。

コントラストを理解する

コントラストは两種類色の間明度の差异，もって比率表示，範囲から 1:1（なし比較，同じ色）まで 21:1（最大比較，黒底白字）。该比率使用毎種類色の相対輝度計算する，これ考慮するた人眼で同じ強度下感知緑色比赤色または青色より明の事实。

WCAG 2.1 要件

大きなテキスト定義するのために正常字重の 18pt (24px) または粗体字重の 14pt (18.66px)。すべての小于これらの阈值の文本必須満たす通常テキストコントラスト要件。UIコンポーネントを含む表単字段、ボタンと焦点指示器。

よくあるアクセシビリティの間違い

• 色だけで情報を伝える：絶対にしないでください仅依靠色来指示ステートまたは意味。常に提供する辅助指示器，如文本タグ、アイコンまたは图案。単独の赤色ボーダーに対してなし法区分赤色の用户来说不十分なもって指示間違い。
• プレースホルダーテキストの低コントラスト：表単字段中の占位符文本通常コントラストとても低。だが WCAG 不要件占位符文本満たすコントラスト比率（なぜならそれいいえ实际内容），しかし確保する其可読性はベストプラクティス。
• フォーカスインジケーターの無視：焦点指示器と相邻色必須少なくともあり 3:1 のコントラスト。默认のブラウザ焦点环で彩色背景上通常不満たす此要件。
• 通常の視力テストのみでの検証：使用色盲模拟器検証するあなたの設計する正赤色盲、緑色盲と青色盲（三種類最も一般的の色觉缺陷タイプ）用户はいいえ利用可能。

カラーパレットの選択

一つの结构良良のカラーパレットで全体のWebサイト中提供する一貫性と視覚的階層。大多数のプロフェッショナルカラーパレット従う簡単の结构：

60-30-10 の法則

この经典設計する原すなわち提案するするメインカラーに使用される 60% の视觉空间（通常は背景），サブカラーに使用される 30%（カード、区域、ナビゲーション），アクセントカラーに使用される 10%（ボタン、リンク、ハイライトする）。これ创造た当然の視覚的階層，アクセントカラーなぜなら使用稀少そして恰良吸引注意する力。

実用的なカラーパレットの構築

• メインカラー：主导の品牌色。に使用される閉键 UI 元素，如页眉、主ボタンとリンク。選択する反映品牌个性の色。
• サブカラー：とメインカラー互补の辅助色。に使用される二次的に元素，如サイドバー背景、次级ボタンとカード見出し。
• アクセントカラー：に使用される行动号召元素と重する必要があるハイライトするの高コントラスト色。それ应でメインカラーとサブカラー背景上すべて明確に突出。
• 中間色（ダーク）：に使用される文本、見出しと深色背景。通常は带ありメインカラー軽微色调の近黒色，もって保持一貫性。
• 中間色（ライト）：に使用されるページ背景、カード背景と浅色サーフェス。通常は带ありメインカラー軽微色调の近白色。

カラーバリエーションの作成

现代設計する系统通常のために毎種類色定義する 10 个色阶（50 まで 950），から非常に浅まで非常に深。これは以下を提供しますた異なるコンテキスト所需の柔軟性，同時に保持一貫性。作成するこれらの变体最もシンプルの方法はから HSL 中のベース色相開始する，系统性に调全体明度，同時に略微下げる最も浅と最も深极端の彩度。

Webデザインにおけるの色彩心理学

色唤起情感反应と連想，影響する用户どのように看待あなたの品牌ととWebサイト交互。だが文化連想各不同じ，しかしで西方Webデザインにおけるありいくつかの広く认可のパターン：

一般的な色の連想

色彩心理学の応用

色彩心理学すべきのためにあなたの設計する决策提供する参照，そしていいえ主导それ们。からと品牌价值と行业期望一致の色開始する，それからテストする实际用户の反应。例えば，正行动号召ボタン入行異なる色彩方案の A/B テスト，できる揭示どの色できるのためにあなたの特定受众带来より多转化。研究一致表明，ボタン色できる影響する 20% またはより多の转化率，しかし「最良」色に依存する周围コンテキストと何么创造た最大の视觉比較。

カラーツール

適切のツールさせる色選択より速より系统。もって下はWebデザイナー最もあり用の资源：

• ToolHub 色選択器：私たち無料のに基づくブラウザの色選択器，させるあなた選択する色かつ直ちにもって HEX、RGB と HSL フォーマット查看。すべての処理はローカルで行われます，即座に結果が得られます。
• ToolHub 色彩コンバーター：で HEX、RGB、HSL と其彼フォーマットの間即時変換する。する設計する仕様変換するのために CSS 值の必备ツール。
• ToolHub コントラストチェッカー：検証する任意の色正の WCAG 合规性。获取精密にのコントラスト比率とすべての WCAG レベルのを通じて/失敗ステート。
• Coolors：一つのストリーム行のカラーパレットジェネレーター，させるあなたロック好きの色かつ随机化其余色，直まで見つけると谐のコンポジット。
• Adobe Color：提供するインタラクティブ色轮ツール，に使用されるに基づくコンプリメンタリー配色、アナロガス配色、トライアド配色と其彼方案作成すると谐配色。
• Realtime Colors：で送信まで設計する前に，プレビューするカラーパレットで实际Webサイトレイアウト上の效果。

CSS カラー関数

现代 CSS 提供するた強力のカラー関数，させる処理する色より一層动态とメンテナンス可能。理解するこれらの函数に役立つ编写より明確に、より柔軟のスタイル表。

モダンCSSカラー構文

CSS Color Level 4 引入たすべてのカラー関数の统一構文。あなた今できる写 rgb(255 87 51)（スペース分隔，なし逗号）と rgb(255 87 51 / 0.8)（alpha 用斜杠分隔）。これ種類構文ですべての现代ブラウザ中すべて受支持する，比旧バージョン逗号分隔フォーマットより易读。

相対カラー構文

CSS Color Level 5 引入た相対カラー構文，許可するあなたを通じて変更する単个通道から现あり色派生新規色：

:root {
  --brand: hsl(210 100% 50%);
}

.button {
  background: var(--brand);
}

.button:hover {
  background: hsl(from var(--brand) h s 40%);
}

.button:disabled {
  background: hsl(from var(--brand) h 20% l);
}

これ種類構文許可するあなたから単一ベース色作成する系统性のカラーバリエーション，させるあなたの設計する系统より易維持する。より改ベース色，すべての变体できる自动更新する。

color-mix() 関数

color-mix() 函数もって指定比例混ぜる两種類色：

.card {
  background: color-mix(in srgb, var(--brand) 80%, white);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

これに対して作成する半透明オーバーレイ层、ホバーするステートと細微变体非常にあり用，なし需のために各色阶定義する単独の CSS カスタマイズする属性。

広色域カラー：lab()、lch()、oklch()

oklch() 函数提供する正 P3 色域のアクセスする，其中を含むなし法で sRGB 中表示の色。これは以下を意味しますで支持するの表示する器上できる表示するより鲜艳の緑色、シアンとマゼンタ。OKLCH の感知均匀性まだを意味する明度のなど量变化生み出すなど量の视觉变化，させる其になる作成する系统性色阶の理したい選択する。