オンライン カラーピッカー・カラーコード変換ツール

このツールの用途

このオンラインカラーピッカーでは、色を取得し、hex、rgb、hsl、hwb、lch、device-cmyk、CSS標準の名前付き色などの形式で値を確認できます。対応しているカラー値を手動で入力して、自動変換することもできます。

フロントエンド開発、UIデザイン、スクリーンショットからの色取得、ブランドカラー確認、CSSカラー値の整理に役立ちます。見えている色のコードを知りたいときや、既存の値を別のCSS表記へ変換したいときに、このページだけで作業できます。

よくある利用シーン

• Webページ、スクリーンショット、デザインモックアップ、デスクトップアプリ、システムUIからピクセルの色を取得する。
• 色をhex、rgb、hsl、hwb、lch、cmykなど、フロントエンドで使いやすい形式に変換する。
• ドキュメント、デザインメモ、コードコメントで読みやすい名前が必要なときに、CSS標準の名前付き色を確認する。
• 既存のカラー値がブラウザで解釈できるか確認し、必要な出力形式をコピーする。

カラーを選択する方法

カラーを選択する方法は2つあります。組み込みのカラー入力を使うか、ブラウザがEyeDropper APIに対応している場合はスポイトボタンをクリックします。スポイトはこのページ外のピクセルも取得できるため、別のタブ、デスクトップアプリ、デザインモックアップから色を拾いたい場合に便利です。

1. ブラウザのカラー入力を開き、システムのカラーピッカーから色を選びます。
2. または、ブラウザが許可している場合はスポイトボタンをクリックして画面上の色を拾います。
3. 手動入力欄にカラーコードやカラー名を貼り付けて、ページに解析させることもできます。
4. CSS、デザインメモ、設定ファイルに必要な形式をコピーします。

サポートされる変換

コンバーターはhex、rgb、hsl、hwb、lch、device-cmykなどのCSSカラー形式に対応し、英語のCSS標準色名も入力として受け付けます。

• よくある入力例は、#00bfff、rgb(0, 191, 255)、hsl(195, 100%, 50%)、hwb(195 0% 0%)、lch(...)、CSSカラー名です。
• 出力一覧には複数の形式が同時に表示されるため、コードベース、デザインツール、ドキュメント要件の間で切り替えやすくなります。
• 名前付き色の出力は、利用可能なCSS標準色名のうち最も近いものです。厳密なデザイントークンではなく、便利なラベルとして扱ってください。

利用時の注意点

• スポイト機能はブラウザのEyeDropper API対応状況に依存します。利用できない場合でも、カラー入力と手動入力は使えます。
• 画面から取得される色は通常sRGBのhex値です。表示プロファイル、拡大率、ブラウザ描画、画像圧縮、透明度、アンチエイリアスにより、デザインファイルとわずかに異なることがあります。
• ブラウザ標準のカラーピッカーはOSやブラウザによって見た目が異なりますが、ページ上の変換値は同じ解析フローを使います。
• 入力にアルファ透明度が含まれる場合は、対象システムで透明度を保持する必要があるか確認してから出力形式を使ってください。

よくある質問