カラーツール
色を選び、各種フォーマットに変換するツール群です。処理はすべてブラウザ内で完結します。
色の選択・変換・確認
HEX、RGB、HSL、HSV、OKLCHの値を入力すると、同じ色を対応するすべての形式で確認できます。色相、彩度、明度、アルファを見ながら調整し、CSS、デザインソフト、スタイルガイドに必要な表記をそのままコピーできます。
コントラスト欄では、白と黒に対するWCAG比を計算し、通常文字または大きな文字で基準を満たすかを示します。明度スケールを生成すれば、選んだ一色から一貫したUI用パレットも作れます。
同じ色の、いくつもの書き方
HEXとrgb()は、ディスプレイが直接発光させるチャンネル値です。hsl()とhsv()はそれを色相、彩度、明度（または明るさ）に並べ替えたもので、1色を選ぶというより、ある色のバリエーションを作るときに考えやすくなります。oklch()は、知覚に合うように設計された色空間で同じ色を表します。
sRGBの色域内であれば、これらの間を行き来しても情報は失われません。だから使うべき形式は、持っていく先が求めるものです。多くのデザインツールではHEX、CSSのカスタムプロパティではhslやoklch、cmykはあくまで目安として。実際の印刷用の変換は、インク、用紙、プロファイルによって変わるからです。
HSLで作ったパレットがちぐはぐに見える理由
HSLの明度は、色がどれだけ明るく見えるかの尺度ではなく、チャンネルの幾何学的な平均です。黄色も青も明度50%に位置しますが、目にはどちらか一方がほぼ白に見えます。この数値を一定にして作ったスケールはどれも偏りが出て、結局1色ずつ手で直すことになります。
OKLCHはこれを構造的に解決します。明度の等しい変化が、見た目にも等しい変化になるのです。色相をまたいで明度を一定にすれば、その並びは本当に1つのファミリーとして読めます。ティントやシェードの生成、そしてRGBで混ぜると中間に現れる濁った灰色なしに色を補間するのに、この色空間が適しているのはそのためです。
コントラストはまず要件、そのうえで判断
白と黒に対して表示している比率はWCAG 2の式に従っており、基準値も通常どおりです。本文テキストは4.5:1、大きな文字とUIコンポーネントは3:1、AAAレベルは7:1。ソフトウェアを調達する多くの現場でこれは任意ではなく必須であり、アクセシビリティ対応の中では最も安上がりな部類です。
とはいえ、数値がすべての答えではありません。この式は暗い背景に明るい文字を置く場合のコントラストを高く見積もり、文字の太さについては何も知りません。そのため、基準を満たした極細の書体でも読みづらいことがあります。まず比率を満たし、そのうえで実際に使う大きさと太さで結果を目で確かめてください。