Webで色を扱うとき、「スクリーンショットからHEXを取る」「パレットを作る」「コントラストを確認する」で別々のタブを往復しがちです。この記事では、その過程で得た実践的な知見をまとめます。例として自作の無料ツールボックス ColorTools を使います。
カラーフォーマットの使い分け
| フォーマット | 例 | 用途 |
|---|---|---|
| HEX | #FF3B30 |
CSS、デザインツール。最も互換性が高い |
| RGB | rgb(255 59 48) |
canvas、プログラムでの色生成 |
| HSL | hsl(4 100% 59%) |
「少し暗く/鮮やかに」したいとき — LとSを動かすだけ |
| OKLCH | oklch(63% 0.24 29) |
知覚的に均一。CSS Color 4 |
デザインシステムでは HSL/OKLCH で色を管理すると、hover や disabled などの派生色が1チャンネルのシフトで計算できます。
「画像をアップロードして色を取得」はアンチパターン
多くのオンラインピッカーは画像をサーバーに送信します。NDA対象のロゴや未公開デザインでは問題です。Canvas API を使えばピクセルの読み取りは完全にローカルで完結します:
const img = await createImageBitmap(file);
const c = new OffscreenCanvas(img.width, img.height);
const ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
ColorToolsの画像カラーピッカー はこの方式で、ファイルはブラウザの外に出ません。オフラインでも動作します。
WCAGコントラスト: 覚えるべき数値
- 通常テキスト: 4.5:1 以上 (AA)、7:1 以上 (AAA)
- 大きいテキスト (18pt+/14pt bold): 3:1 以上 (AA)
- UIコンポーネント・グラフィック: 3:1 以上
- WCAG 3 では APCA に移行予定 — 輝度を知覚ベースで計算し、「AAは通るのに読めない」ペアを排除
実装の後ではなく途中で確認するのが楽です。コントラストチェッカー はWCAGとAPCAをリアルタイム表示し、色覚シミュレーションもできます。
配色理論なしのカラーハーモニー
補色・トライアド・類似色は、色相環上の回転 (180°、±120°、±30°) にすぎません。手計算が面倒なら ハーモニールール付きカラーホイール や パレットジェネレーター が使えます。
ツールボックスはすべて無料・登録不要・広告なしです: https://colorpicker.cx
フィードバック歓迎です!