カラーピッカー
カラーピッカーは、色を1つ受け取ります。入力方法は、タイプでも、貼り付けでも、システムのスポイトで画面からサンプリングしても構いません。その色をHEX、RGB、HSL、HSV、OKLCH、CMYKのすべての形で一度に返します。さらにOKLChで11段階の明暗ランプを組み立てます。どのステップも最初の色相を保ちます。各ステップの白および黒に対するコントラストも併せて表示するので、テキストを載せられるステップがひと目で分かります。
#00696frgb(0 105 111)hsl(183 100% 21.8%)hsv(183 100.0% 43.5%)oklch(0.474 0.0806 201.7)cmyk(100% 5% 0% 56%)- 色相
- 183°
- 明度
- 47%
- 彩度成分
- 0.081
明暗の段階
OKLCh の明度曲線に沿った11段階です。白と黒に対するコントラスト比を示します。本文には 4.5:1 以上が必要です。
1.1 / 19.5
1.2 / 17.9
1.4 / 14.9
1.8 / 11.5
2.5 / 8.4
3.5 / 5.9
5.1 / 4.1
7.5 / 2.8
10.6 / 2.0
14.3 / 1.5
18.0 / 1.2
配色
OKLCh で色相を回転させ、元の色の明度を維持します。HSL で回転すると黄色が明るすぎ、青が暗すぎます。
補色
反対側の色相です。差が最大で、アクセント以外には使いにくい組み合わせです。
類似色
左右30°の近接色です。落ち着いた配色で、画面全体に使いやすい組み合わせです。
三色配色
120°ずつ離れた3色です。バランスは良いものの、通常は2色の彩度を抑えると使いやすくなります。
四色配色
2組の補色です。4色すべてを強い色のまま使うと、ほとんどのレイアウトでは過剰になります。
分割補色
補色から左右に30°ずらした配色です。高いコントラストを保ちつつ、視覚的な強さを抑えます。
単色
1つの色相で明度と彩度成分を変えます。デザインシステムでよく使われる構成です。
白地と黒地
カラーピッカーはどう動きますか？
画面上の色は3つの数値であり、ここのどの形式も、同じ3つの数値を違う衣装で表したものです。Hexとrgb()は、16進と10進で書いた同じ値です。hsl()とhsv()は極座標で表した同じ値で、色相スライダーが成立するのはこのためです。この4つは互いにロスなしで往復でき、このツールはその間を正確に変換します。
ランプをOKLChで作る理由
HSLには便利な性質が1つと、致命的な性質が1つあります。便利なのは、色相スライダーとして意味を持つこと。致命的なのは、その「明度」が明るさではないことです。hsl(60 100% 50%)は目を射るような黄色で、hsl(240 100% 50%)はほぼ黒に近い青です。それでいてHSLはどちらも50%と呼びます。HSLの明度をたどって淡色ランプを作ると、数値は均等に進んでいるのに、見た目の明るさが中間のステップで上下に飛ぶスケールができます。
OKLChにはこの問題がありません。明度の軸が目の報告する値に沿っているため、それに沿って進めば、均等に見えるランプになります。さらにこのツールでは、各ステップがsRGBの色域に収まっているかを確認し、外れていれば引き戻します。これがなければ、最も彩度の高いステップが同じ色にクリッピングされ、スケールは、デザイナーがまさに見ている端で静かに均一化してしまいます。
スポイト
入力欄の横にあるカラーウェルを開くと、OS標準のピッカーが立ち上がります。macOS、Windows、多くのLinuxデスクトップには、画面上の任意のピクセル（他のアプリケーションのピクセルも含む）をサンプリングできるスポイトが付いています。これは、どのページも単独ではできないことです。だからここでは、canvas製の模造品ではなく、ネイティブのコントロールを使っています。ネイティブのコントロールは透明を表現できないため、アルファはテキストフィールドが引き受けます。#00696f80と入力すれば、ウェルには不透明なティール色が表示され、フィールドは50%を保持します。
CMYKと、その価値
CMYKの数値はデバイス非依存の近似で、どのオンラインコンバーターも同じものを使っています。本当の変換には、印刷機、用紙、インクセットそれぞれのICCプロファイルが必要で、同じsRGB値でもコート紙と新聞紙では数値が変わります。印刷会社に渡す仕様ではなく、会社と話を始めるための出発点として扱ってください。
1つの色
#00696f
その色の全表現
hex #00696f rgb rgb(0 105 111) hsl hsl(183 100% 21.8%) oklch oklch(0.474 0.0806 201.7) cmyk cmyk(100% 5% 0% 56%)
カラーピッカーが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| HEX | #rrggbb | 6桁 | 最も短い形式であり、どこに貼り付けても有効に機能する唯一の形式です。4桁と8桁はアルファ値を追加します。3桁はペアを重複させる省略形です。 |
| RGB | 0–255 | rgb() | 基数10の同じ3つの数値です。現代的な構文では、値をスペースで区切り、アルファ値をスラッシュで区切ります。カンマ区切りの形式は、どこでも引き続き機能します。 |
| HSL | deg %, % | hsl() | 色相、彩度、明度です。色相スライダーには適していますが、明度に依存するものには誤解を与えやすい可能性があります——その明度は知覚される明度ではありません。 |
| HSV | deg %, % | hsb() | 色相、彩度、値です。Photoshopを含むほとんどのカラーピッカーがこれを基盤としています。有効なCSSではありません。 |
| OKLCH | 0–1, 0–0.4, deg | oklch() | 知覚的に一貫しています。等しいステップは等しく見え、色相は明度の変化を通じて維持され、CSS Color 4が使用する形式です。現在のすべてのブラウザでサポートされています。 |
| CMYK | 0–100% | 単純換算 | デバイスに依存しない近似値です。印刷の参考に役立ちますが、プレス仕様には必要ありません——それにはICCプロファイルが必要です。 |
| スケール | 50–950 | 11ステップ | 固定の明度曲線上のトーンとシェードで、両端でクロマがテーパーするため、明いステップが蛍光のように見え、暗いステップが発光しません。 |
| コントラスト | 比率 | #fff / #000との比較 | 各ステップのWCAG 2.x比（白色と黒色に対する比）で、これがテキストをその上に配置できるかどうかを決定します。 |
よくある質問
スポイトを使って画面上の色を選ぶにはどうすればいいですか？
テキストフィールドの横にあるカラーウェルをクリックしてください。OS標準のピッカーが開きます。macOS、Windows、多くのLinuxデスクトップには、他のアプリケーションのピクセルも含め、画面上の任意のピクセルをサンプリングできるスポイトがあります。Webページは自分の外のピクセルを読めないため、ネイティブのコントロールが唯一のルートです。ページ内のcanvasピッカーで拾えるのは、すでに読み込んだ画像だけです。
OKLCHとは何ですか？ HSLの代わりに使うべきですか？
OKLCHは知覚的に均一な色空間です。数値上の等しいステップが、見た目上の等しいステップに見え、明度を変えても色相がずれません。HSLはどちらもできません。だからこそ、HSLで作った淡色ランプは、数値が等間隔でも見た目が不均等になります。現在のすべてのブラウザは、CSSのoklch()に対応しています。色相スライダーが欲しいならHSL。ランプやミックス、明るさに関する判断に値を流用するならOKLCHです。
ランプの淡色ステップが、hex値を明るくした結果と違って見えるのはなぜですか？
hex値を明るくするということは、3つのsRGBチャネルを255に向けて動かすことで、明度だけでなく色相も変わってしまうからです。特に青や紫で顕著で、グレーの方へ漂っていきます。このランプはOKLChで明度だけを動かし、色相とクロマを固定します。そのうえで、色域外に出たステップはsRGBの色域内へ引き戻します。だからステップ100とステップ800が、同じ色だと分かる形で保たれるのです。
透明度のある色を扱えますか？
扱えます。#00696f80のような8桁のhexか、rgba(0 105 111 / 50%)と入力してください。アルファは、保持できる形式への変換ではすべて維持されます。ネイティブのカラーウェルには透明度を表示できません。これはこのページではなくコントロール自体の制限で、ウェルには不透明な色が表示され、実際の値はテキストフィールドが保持します。
CMYKの変換結果は、印刷会社に送れるほど正確ですか？
正確ではありませんし、どのオンラインコンバーターも正確ではありません。CMYKはデバイス依存です。同じsRGB値でも、コート紙と非コート紙ではインクの割合が変わり、印刷機が違えばさらに変わります。ここにあるのは標準のデバイス非依存近似で、色見本を選ぶのと、おおよその意図を印刷会社に伝えるのには正しい数値です。本当の変換は、印刷会社が自社の印刷機のプロファイルで行います。
選んだ色はどこかに送信されますか？
いいえ。ここの変換はすべて、このタブ内で動く計算です。ページは読み込み後、ネットワーク要求を一切行いません。通信を切ってもピッカーは動き続けます。私たちの言葉を鵜呑みにするより確かめたい場合に、試す価値のあるテストです。