カラーガイド
画面の色について、形式、コントラスト、パレット、ダークモード、CSSを短く実践的に解説します。数値はすべて計算済みで、例はすべてコピーできます。
- OKLCHとは：目で見た印象どおりに色を扱えるカラーフォーマットOKLCHは、色を「どれだけ明るく見えるか」「どれだけ鮮やかか」「どの色相か」の3つで表します。HSLと違い、同じ明度の値ならどの色相でも本当に同じ明るさに見えるため、パレット作りやhover時の色、アクセシブルなコントラストを予測しやすくなります。2026年9月28日1分で読めます
- APCAとWCAG 2：どちらのコントラスト判定を信じるべきかWCAG 2のコントラスト比は、法令が求める基準です。APCAはより新しいモデルで、特にダークテーマや彩度の高い色で、読みやすさをはるかに正確に予測します。両方をチェックすれば、基準を満たしつつ本当に読みやすいテキストになります。2026年9月28日1分で読めます
- 色域とは：sRGB、Display P3、色域外の色をわかりやすく解説色域とは、画面や色空間が表現できる色の範囲のことです。WebはsRGBを前提に作られてきましたが、今ではほとんどのスマートフォンと多くのノートPCがDisplay P3に対応しており、赤、緑、オレンジをはっきりと鮮やかに表示できます。2026年9月28日1分で読めます
- カラーフォーマット解説：HEX、RGB、HSL、OKLCHほか同じ色でも、書き方は十数通りあります。ここでは各フォーマットの意味と使いどころ、そして同じ色がそれぞれでどう表されるかを紹介します。2026年9月28日1分で読めます
- HEXカラーコードとは：#RRGGBBの仕組みを解説#1e90ffのようなHEXカラーコードは、16進数2桁の組を3つ並べたものです。それぞれが赤・緑・青の光の量を表し、00（なし）からff（最大、255）までの値をとります。4つ目の組を加えると不透明度を指定できます。80ならおよそ50%、ffなら完全に不透明です。2026年9月28日1分で読めます
- Webサイトやアプリのカラーパレットの決め方まずブランドカラーを1色決め、そこから50〜950のスケールを作ります。次にわずかに色味をつけたグレーと4つのセマンティックカラーを加え、文字と背景のすべての組み合わせでコントラストと色覚の見え方を確認します。ステップは目で選ばず、OKLCHの明度で選びましょう。白背景の文字は、色相に関係なく明度がおよそ0.55まで下がればWCAG AAを満たします。2026年9月28日1分で読めます
- ダークモードの配色：背景色、文字色、アクセントカラーの選び方背景には純粋な黒ではなく#121212のようなダークグレーを、文字には純粋な白ではなく#e5e5e5のようなオフホワイトを使い、ブランドカラーは明るく彩度を抑えたものにします。暗い背景ではWCAG 2がコントラストを高く見積もりすぎるため、文字はWCAG 2だけでなくAPCAでも確認しましょう。2026年9月28日1分で読めます
- カラーハーモニー（配色パターン）：補色、類似色、トライアドなどカラーハーモニーは、色相環の上で決まった角度だけ離れた色相を選ぶ配色ルールです。補色は180°、類似色は30°、トライアドは120°離れた色相を使います。色相をHSLではなくOKLCHで回すと明るさがそろうので、1色だけ意図せず浮いてしまうことがありません。2026年9月28日1分で読めます
- CSSのcolor-mix()と相対カラー構文：ティント、ホバー、透明度color-mix()は2つの色を指定した色空間で混ぜる関数です。相対カラー構文を使うと、oklch(from var(--brand) calc(l - 0.1) c h) のように既存の色のチャンネルを1つだけ変えられます。どちらもブラウザ上で計算され、CSS変数と組み合わせて使え、Sassの色関数のほとんどを置き換えられます。ティントやホバーはoklabで、透明度はsrgbで混ぜましょう。2026年9月28日1分で読めます
- 色覚バリアフリーな配色：色の見え方をチェックして改善する方法色覚バリアフリーな配色とは、1型色覚、2型色覚、3型色覚、グレースケールのどれで見ても、すべての色の組み合わせを見分けられる配色です。いちばん確実な対策は特別な色相ではなく明度の差です。OKLCHの明度で約0.2離れた色は、今回試したすべてのシミュレーションで区別できました。さらにアイコンやラベルを添えましょう。色だけに頼る表現は、必ず誰かにとって伝わりません。2026年9月28日1分で読めます
- Tailwind CSSのカラー：v4のOKLCHパレット、カスタムカラーとシェードTailwind CSS v4には、50から950まで11段階のシェードを持つカラースケールが26種類あり、合計286色がOKLCHで定義され、--color-blue-500 のようなCSS変数として使えます。独自の色は @theme { --color-brand-500: oklch(...) } で追加します。同じ段階の番号でも明度は同じではありません。白背景で4.5:1を満たす最も明るい青はblue-600ですが、黄色は700が必要です。2026年9月28日1分で読めます