光、目、そして二種類の混色
色は物体に乗った塗膜ではありません。光と、波長を赤や黄、青緑として読み替える脳の組み合わせです。画面は光を足します（加法混色）。赤・緑・青は白に向かいます。印刷や絵の具は光を引きます（減法混色）。インクが波長を濾し、混ぜると黒に向かいます。だからモニターのネオンは、同じ仕事の紙面ではまず一致しません。
RGB：画面が色を数える方法
スマホやノートの画素は、小さな光が三つです。各チャンネルはたいてい 0〜255（8ビット）。(0, 0, 0) が黒、(255, 255, 255) が白、(255, 0, 0) が真っ赤。16進は同じ三つ組のウェブ表記で、#FF0000 がその赤、#000000 が黒です。デザイナーが今も RGB で話すのは、ディスプレイが実際に出しているのがそれだからです。
CMYK：印刷が違って見える理由
プリンタはシアン、マゼンタ、イエロー、ブラック（K）のインクを置きます。光は出せず、吸うだけなので、画面の RGB 色域はたいていの CMYK 印刷より広いです。モニターの飽和したエレクトリックブルーは、紙ではくすみがちです。印刷色を約束する前に CMYK へ変換し、使う用紙で校正してください。PictorX は選んだ色の CMYK 値を出せるので差は見えますが、印刷機のプロファイルの代わりにはなりません。
HSL と HSV：デザイナーのつまみ
色相は虹の位置（0〜360°）。彩度は純粋か灰色か。明度（HSL）は白や黒への近さ。明度／輝度（HSV）は黒に近づきつつ、最後まで色相を鮮やかに保ちます。デザイナーが HSL と HSV を好むのは、「少し暗く、同じオレンジ」がスライダー一つで済むからで、RGB の三つの数字を当てずっぽうにしなくてよいからです。
16進と名前付き CSS カラー
16進（#RRGGBB、ときに #RGB や #RRGGBBAA）はウェブ向け RGB の略記です。CSS には coral、steelblue、rebeccapurple のような名前付き色もあり、固定の 16進に対応します。名前は下描き向き。ブランドを合わせるときに出すのは 16進（または新しい CSS の色関数）です。
カラーホイールと配色の関係
カラーホイールは色相を円に並べます。古典的な関係は次のとおり。補色は向かい合い（青とオレンジ）コントラストが強い。類似色は隣同士で親縁に見える。トライアドは等間隔の三点で、にぎやかさを保つ。スプリットコンプリメンタリーは色相とその反対の両隣で、ぶつかりを抑えた対比。モノクロームは一つの色相をさまざまな明度で使う。PictorX のパレットジェネレータは現在、補色・類似色・モノクロームを残しています。あるツールがすべての調和を出さなくても、ホイールは古典セットの残りを説明できます。
グラデーション：色と色のあいだの道
グラデーションは、道に沿った混色です。線形はある方向へ進み、放射は中心から広がります。カラーストップは、その道の位置に正確な色を留めます。ストップが多いほど制御は増えますが、味が自動で増えるわけではありません。CSS の linear-gradient と radial-gradient は同じ発想です。PictorX のグラデーションエディタではストップをドラッグし、CSS、HEX、RGB、HSL、HSV、CMYK をコピーできます。
コントラスト、アクセシビリティ、暖色と寒色
コントラストは、二つの色が明度（と色相）でどれだけ離れているかです。WCAG は文字が読めるだけの対比を求めます。AA では通常の文字がおよそ 4.5:1、大きい文字が 3:1。床であり、作風ではありません。暖色（赤・オレンジ・黄）は近く感じ、寒色（青・緑・紫）は退きます。文字と UI にはコントラストを、気分には暖色と寒色を使います。
PictorX のカラーツール
カラーホイールは色相を選び、調和を読むためのものです。グラデーションエディタは混色と CSS 向け。パレットジェネレータはセットを作り、ロックし、シャッフルし、写真から色を抜けます。カラー転送は、別の画像のパレットで一枚を着せ替えます。ブラウザ内です。カラー効果は写真をティントなどの見え方へ押し出します。どれも印刷機や分光測色計の代わりではなく、色が絵の上でどう振る舞うかを早く見る方法です。
よくある質問
RGB と CMYK の違いは？
RGB は画面の加法の光（チャンネルあたりたいてい 0〜255）。CMYK は紙の減法のインクです。範囲が違うので、画面の色はしばしばそのままでは印刷できません。
カラーホイールの補色とは？
補色は向かい合います。一緒だとコントラストが強いです。PictorX のパレットジェネレータは、起点の色から補色セットを作れます。
デザイナーが RGB ではなく HSL を使う理由は？
色相・彩度・明度は、色の話し方に合っています。HSL ならオレンジを暗くしても、素朴な RGB いじりのようにうっかり茶色に混ぜずに済みます。
WCAG はどれだけのコントラストを求めますか？
AA では通常の文字がおよそ 4.5:1、大きい文字が 3:1。見本のスウォッチだけでなく、実際の背景の上で文字を確認してください。
関連ツール
カラーホイール
インタラクティブなホイールで色を選び、補色、類似色、トライアドなどのパレットを生成し、HEX、RGB、HSL、HSV、CMYK をコピー。アップロードはありません。
グラデーションエディター
ブラウザで線形・放射状の CSS グラデーションを構築。カラーストップをドラッグし、角度を設定し、CSS、HEX、RGB、HSL、HSV、CMYK をコピー。アップロードはありません。
カラーパレットジェネレーター
ブラウザでカラーパレットを構築、ロック、シャッフル。HEX、CSS変数、JSON をコピー、PNG または SVG を書き出し、写真から色を抽出。アップロードはありません。
カラー転送
2枚目の画像の色で写真を塗り直します。ブラウザでライブプレビュー、強さスライダー、明るさの保持。アップロードはありません。
エレクトリックドリームフィルター
効果 → 色 で映画のような輝き。効果 → 色 → ネオングロー、効果 → 色 → ヒートマップ、効果 → 色 → デュオトーン など。フィルターを重ね、不透明度を調整してポスター品質のエレクトリックな仕上がりに。 ソフトのインストールなしで、ブラウザの PictorX を無料で使います。
試してみますか？
ブラウザで PictorX を開きます。インストール不要、始めるのにクレジットカードも不要です。
カラーホイールを試す