カラー変換スタジオ
HEX コード、CSS のキーワード、あるいは oklch() 関数まるごとを入力すれば、ほかの表記がすべて即座に返ります。そのまま階調を作り、コントラストを確かめ、色覚特性のある人にどう見えるかを確認して、パレットを持ち出せます。
3・4・6・8 桁の HEX と rgb()・hsl() は、ブラウザーの助けがなくても読み取れます。
ここでの CMYK は単純な算術変換であり、ICC による色分解ではありません。印刷用の CMYK は用紙・インキ・出力プロファイルに左右され、sRGB の値だけからは導けません。
24 ピクセルの大見出し
16 ピクセルの小見出し、セミボールド
13 ピクセルの本文。この大きさこそが、その色の組み合わせが実際に使えるかを決めます。
逆にして、背景を文字色として扱った場合: Lc -60.3
ΔE 0.05 を下回ると、その人にとって 2 つの色見本は事実上同じ色になり、見分けに頼ったパレットは成立しません。シミュレーションは Viénot・Brettel・Mollon (1999) に従い、リニア光で適用しています。
距離は OKLab での ΔE です。おおよそ 0.02 を超えると、多くの人が 2 つの見本を別の色として認識し始めます。行をクリックすると、その色そのものへ移動します。
使い方
色を持ち込む
任意の CSS 表記を入力するか、画面スポイトを使うか、パレットをまるごと貼り付けるか、画像を開いて狙ったピクセルをクリックします。
形を整える
黄色でも青でも同じように効く明度・クロマ・色相のスライダーに加え、階調・配色・混色が使えます。
確かめる
任意の背景に対する WCAG 2.1 と APCA、そして 2 つの色見本が 1 つに潰れたときに教えてくれる色覚シミュレーション。
持ち出す
表記を 1 つコピーするもよし、CSS・Tailwind・SCSS・JSON・SVG・色見本シートに書き出すもよし、次のツールへパレットを渡すもよし。
CSS の色表記をすべて
3・4・6・8 桁の HEX、キーワード、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color-mix()、display-p3。読み取るのはブラウザー自身のパーサーなので、取りこぼしがありません。
歩幅のそろった階調
OKLCH で生成した 11 段階なので、HSL の階調にありがちな不ぞろいな跳ねがなく、どの段も前の段と一定の見た目の距離を保ちます。
WCAG 2.1 と APCA
従来の比率に加えて、WCAG 3 草案の符号付き Lc 値を、白と黒だけでなく好きな背景に対して測れます。
色覚のチェック
1型・2型・3型色覚をリニア光でシミュレートし、任意の 2 色間の最小距離も示すので、パレットが破綻する瞬間がわかります。
スポイトと画像
ブラウザーが許す範囲で画面のどこからでも色を採取でき、画像を開いてカーソル下のピクセルを拡大し、その正確な値を取り込めます。
配色と混色
補色・類似色・トライアド・スプリット・テトラード・モノクロームの各組を OKLCH で回転させ、色相の短い弧に沿った知覚的な混色も行えます。
どこへでも書き出し
CSS カスタムプロパティ、Tailwind の @theme ブロック、SCSS 変数、JSON、SVG または PNG の色見本シート、GIMP のパレットファイル。
タブの外へは出ません
アップロードなし、API 呼び出しなし、アカウントなし。変換もコントラストの数値もパレットも、すべてあなたのブラウザーが計算します。
即座に終わるローカル処理
変換はどれも 3 つの数値の算術なので、待つものも送るものもありません。入力の解釈はブラウザー自身の CSS エンジンに任せてあり、だからこそキーワードや color-mix()、広色域の表記が拒否されずに理解されます。知覚まわりの処理 — OKLCH の階調、色域マッピング、ΔE 距離、色覚シミュレーション — は数百回の浮動小数点演算にすぎず、大きな写真からパレットを抽出する場合でも、縮小したコピーに対する k-means の一巡で 1 秒をかなり下回って終わります。
色の作業で厄介なのは、変換そのものであることはまれです。均等に進むスケールを作ること、2 色の組み合わせが読めると示すこと、そして結果をコードが期待する形で受け取ること — そこが本題です。このツールは手元の色に 11 段階の階調を固定し、どの段が sRGB へ引き戻され、どれだけ動いたかを示し、最も近い CSS キーワードと Tailwind トークンを実測の距離つきで名指しし、パレット全体をカスタムプロパティ、Tailwind のテーマブロック、SCSS、JSON、色見本シートとして書き出します。
このツールにサーバー側は存在しません。入力した色も、貼り付けたパレットも、開いた画像もタブの中にとどまります。画像は端末から出ないキャンバスへ展開され、タブを閉じればすべて消えます。外に出るのはあなたがアドレスバーに置いたものだけです。リンクを共有できるようにパレットはそこへ符号化されますが、セッションについてそれ以外は何も記録されません。
よくある質問
Qどんな色の形式を貼り付けられますか？+
3・4・6・8 桁の HEX、CSS の 148 個のキーワード、rgb()、rgba()、hsl()、hsla()、hwb()、lab()、lch()、oklab()、oklch()、color-mix()、color(display-p3 …) です。入力はブラウザー自身の CSS パーサーを通るので、あなたのブラウザーがスタイルシートで受け付けるものはここでも通ります。そのパーサーがない環境でも、HEX と rgb()、hsl() は読み取れます。
Qなぜ HSL ではなく OKLCH を使うのですか？+
HSL では、同じ明度の値でも見た目の明るさが大きく違います。50% の黄色は 50% の青よりずっと明るく見えます。OKLCH は明度が目の感じ方と一致するように設計されており、だからこのツールの階調・配色・混色はすべてその空間で回転・補間しています。
QΔE の数値は何を意味しますか？+
OKLab における 2 色間の距離です。おおよそ 0.02 から、多くの人が 2 つの見本を本当に別の色として見はじめます。そのためこれはよい物差しになります。sRGB へ押し戻された階調の段がどれだけずれたか、最も近い Tailwind トークンが実際どれくらい近いか、パレットの 2 色が色覚シミュレーションを生き延びるか、いずれもこの数値でわかります。
Qこのコントラスト検査は WCAG に準拠していますか？+
WCAG 2.1 の比率は仕様の定義どおりに、選んだ背景に対して計算しています。表示は単なる「合格」ではなく、本文と、より緩い大きな文字向けのしきい値を区別します。その隣にある APCA は WCAG 3 に向けて提案されている知覚的な指標で、実務では役立ちますが、まだ草案であり適合基準ではありません。
Qこの CMYK は印刷にそのまま使えますか？+
いいえ。ブラウザーで動くツールの CMYK はどれも同じです。ここで得られるのは標準的な算術変換で、おおよその見当をつけたり、その 4 つの数値を求めるソフトに渡したりするには十分です。本当の色分解は用紙・インキ・ICC 出力プロファイルに依存するため、レイアウトソフトや画像ソフトで行う必要があります。
Q貼り付けた内容はどこかへ送信されますか？+
いいえ。サーバー側の処理はなく、色に関する解析もなく、変換のどの段階でもネットワーク要求は発生しません。画像はローカルでキャンバスに展開され、閉じれば破棄されます。パレットは共有やブックマークができるようページの URL に書き込まれます。色が残るのはそこだけで、あなたがリンクを送らない限り端末の外には出ません。