無料カラーツール

カラーツールについて

Absolutoolにはデザイナー、開発者、アクセシビリティ専門家向けの7つの専門カラーツールが含まれています。HEX、RGB、HSL、HSB形式間で変換できます。色彩理論を使って調和のとれたパレットを生成できます。WCAGコントラスト比を確認して、デザインがすべての人にアクセシブルであることを保証できます。

色覚異常シミュレーターはBrettel/Viénotのルックアップ行列を使用して、8種類の色覚障害を正確にモデル化します · 画像をアップロードするか、個々の色をテストできます。デザインシステムトークンにはカラーシェードジェネレーター、正確なブレンドにはカラーミキサー、写真から色を抽出するには画像カラーピッカーを使用できます。すべてのツールは完全にブラウザ内で動作します。

ウェブ上のカラーモデル

現代のウェブページ上のすべてのピクセルは、ブラウザが解釈して GPU に描画を依頼する色の値で記述されます。最もよく目にする2つの形式は HEX（#3b82f6 のような6桁の16進数の三つ組）と RGB（rgb(59 130 246) のような10進数の値）です。どちらも同じこと、つまり加法混色を使う画面で赤、緑、青の光をどれだけ混ぜるかを記述します。標準的な24ビットのディスプレイはチャンネルあたり256段階を提供し、これはアドレス指定できる固有の色が1678万色あることを意味します。HEX はより短く、RGB は計算がより簡単で、2つは互換です。

HSL（色相、彩度、輝度）と HSB（色相、彩度、明度）は同じ画面の色を記述しますが、私たち人間がそれを知覚する仕方により近い座標を用います。色相は色相環上での色の位置で、0°（赤）から360°までです。彩度は色がどれだけ鮮やかか、灰色から完全に純粋までを表します。輝度はどれだけ白または黒を混ぜるかを制御します。HSL はデザイナーがデザインシステムを構築するときに通常選ぶ形式です。なぜなら単一のチャンネルを調整すると予測可能な変化が生じるからで、たとえばホバー状態のためにボタンを10%暗くする、といったことです。CSS は HEX、RGB、HSL、そしてより新しい LCH と OKLCH をネイティブにサポートします。

これらすべての形式の背後には色空間があり、「赤 255」が物理的に何を意味するかを正確に定義します。ウェブの既定値は sRGB で、1996年に IEC によって標準化され、ほぼすべてのデスクトップと電話のディスプレイがカバーする色域です。より新しい Apple、OLED、ハイエンドのデバイスは Display P3 をサポートします。これはより広い色域で、約25%多い飽和した赤と緑を加えます。CSS では今、それを活用するために color(display-p3 1 0 0) と書けます。本サイトのほとんどのカラーツールは sRGB で動作し、あらゆるブラウザに届きます。P3 はワークフローを変えずに利用できる範囲を広げます。

WCAG の色のコントラストを理解する

ウェブコンテンツアクセシビリティガイドライン（WCAG 2.1）は、テキストとその背景の間のコントラストに数値の閾値を定めています。ほとんどのアクセシビリティ監査が目標とするレベル AA は、通常のテキストに少なくとも 4.5:1、大きなテキスト（18 pt 標準または 14 pt 太字以上）に 3:1 を要求します。レベル AAA はこれらを 7:1 と 4.5:1 に厳しくします。この比は各色の相対輝度から計算されます。相対輝度は、IEC 61966-2-1 の式によって sRGB の原色から導かれる、知覚上の明るさの値です。「ほとんど同じ」に見える2色でも通ることがあり、まったく異なって見える2色でも、片方が灰色の上の灰色なら不合格になることがあります。

これらの数字が重要なのは、世界の成人人口のおよそ5%が、白内障、緑内障、糖尿病網膜症、または加齢に伴う黄斑の変化によって、測定できるほどに低下したコントラスト感度を持っているからです。屋外の明るい日光は、すべての人にとって実効的なコントラストを下げます。斜めから見たモバイル画面はコントラストをさらに下げます。WCAG の閾値は、薄暗いオフィスの色較正済みモニター上ではなく、こうした現実の条件下でテキストを読めるように保つよう設計されています。APCA と呼ばれるより新しいアルゴリズム（WCAG 3.0 で来る代替の候補）は、WCAG 2.x が無視するもの、たとえばテキストの太さや極性を考慮します。当面は、4.5:1 AA がほとんどの規制当局が参照する標準であり続けます。

色覚異常とインクルーシブデザイン

北欧系の男性のおよそ8%、女性の0.5%が何らかの形の赤緑の色覚異常を持っており、世界の数字も規模としては同様です。最も一般的な3つのタイプは、網膜の錐体細胞が特定の波長にどう反応するかに影響します。第二色弱（最も一般的で、男性の約5%）は中波長の緑色光への感度を下げます。第一色弱は長波長の赤色光への感度を下げます。第三色弱は青と黄色の知覚に影響し、はるかにまれです。本サイトのシミュレーターは、Brettel、Viénot、Mollon（1997）による色行列の導出を使います。これは色彩科学におけるこれらの変換の標準的な参照です。

実用的なデザインの規則は「色だけに頼らない」です。赤いエラーアイコンと緑の成功アイコンは、第二色弱の多くのユーザーにはまったく同じに見えます。異なる形（チェックマークに対する×印）、ラベル（「エラー」や「成功」）、または模様を加えれば、ほかのユーザーに何の代償もなくこれを解決できます。グラフやダッシュボードのデザインが最も頻繁な違反者です。凡例は通常、色のサンプルに頼るからです。本サイトの色覚異常シミュレーターは、公開する前に、よくあるそれぞれの異常を通して本物のスクリーンショットをプレビューできるので、本番で失敗していたであろう要素を見つけられます。

パレットのための色彩理論

色相環は、円のまわりの角度によって色相を配置します。赤は0°、黄は60°、緑は120°、シアンは180°、青は240°、マゼンタは300°です。補色は互いに真向かいに位置し（赤とシアン、青とオレンジ）、最も強いコントラストを生みます。類似色のパレットは色相環上で隣り合う2〜4の色相を使い、落ち着いていて統一された印象を与え、背景やグラデーションによく適します。三色配色のパレットは120°ずつ均等に離れた3つの色相を使い、多様性とともに釣り合いを与えます。四色配色のパレットは長方形を成す4つの色相を使います。これらの規則は19世紀の画家のマニュアルから生まれましたが、その後の知覚研究が確認した内容と一致します。

典型的なブランドシステムにはおよそ5色が必要です。主要なブランド色、アクセント色（多くは補色）、中立的な灰色、それに成功の緑とエラーの赤です。本サイトのパレットジェネレーターは、まず調和を選び、それから選ばれた各色に対して10段階の濃淡のスケールを提供します。これは Tailwind、Material、Carbon といったデザインシステムが用いるのと同じ構造です。アクセシブルなパレットツールは、白または暗い背景の上で WCAG AA のコントラストを満たす組み合わせに生成を限定します。どちらのツールも完全にあなたのブラウザ内で動作するので、未公開のブランドのために選んだ色がどこかに送られることは決してありません。

よくある質問