カラーピッカー
スウォッチで選ぶか、EyeDropper API で画面から直接スポイト。hex・RGB・HSL をワンクリックでコピーします。
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)このブラウザは EyeDropper API に対応していないため、カラーピッカーをご利用ください。hex/rgb/hsl はリアルタイム更新されます。
このツールは完全にブラウザ内で動作します。データは端末から出ず、サーバーへアップロードされることはありません。
使い方
- 1カラースウォッチで色を選ぶか、対応ブラウザでは「画面からスポイト」を使います。
- 2プレビューの下で hex・RGB・HSL の値を確認します。
- 3必要な形式の横の「コピー」を押します。
カラーピッカー
スウォッチをクリックして視覚的に色を作るか、Chromium 系ブラウザでは「画面からスポイト」で画面上の任意のピクセルを取得できます。選んだ色は hex・rgb()・hsl() の 3 形式で同時に表示され、それぞれコピー ボタンが付きます。
スポイトはブラウザ内蔵の EyeDropper API を使い、ピクセルをローカルで読み取ります。記録・アップロード・保存は一切ありません。API 非対応のブラウザではスウォッチ入力のみ表示され、他の機能は同一です。
よくある質問
「画面からスポイト」が表示されないのはなぜ?
EyeDropper API は現在 Chromium 系ブラウザ(Chrome・Edge・Brave・Opera)のみが提供しています。Firefox と Safari は未対応のため、これらではスウォッチ入力だけが表示されます。他の機能はまったく同じです。
hex・RGB・HSL の違いは何ですか?
同じ色を 3 通りで表します。hex は赤緑青を #RRGGBB にまとめた CSS・デザインツール標準、rgb() は 3 チャネルを数値で示す書き方、hsl() は色相・彩度・明度で表すため、パレットやホバー状態を手で作るとき便利です。
画面スポイトはプライバシー上是安全ですか?
はい。EyeDropper API はシステムのピッカーを表示し、クリックした 1 ピクセルだけを返します。読み取りはブラウザ内で完結し、スクリーンショットも履歴も値も送信・保存されません。
関連ツール
カラーコンバーター
hex・rgb()・hsl() の色を貼り付ければ 3 形式まとめて変換。さらにティント&シェードの段階表まで自動生成します。
すべてのツール →
QR コード生成
テキストや URL を鮮明な QR コードに。サイズ・色・誤り訂正レベルを調整でき、PNG と SVG でダウンロードできます。
すべてのツール →
バーコード生成
CODE128・EAN-13・UPC-A のスキャン可能なバーコードを、バーの幅と高さを調整して作成。ベクター SVG 出力、ブラウザ内で描画。
すべてのツール →
アスペクト比計算
16:9 などの比率と片方の寸法があれば、もう片方を即算出。1:1 から 21:9 までのプリセットで動画・デザインに即対応。
すべてのツール →
ツールを埋め込む
1 行であなたのサイトにツールを。訪問者のブラウザ内で動きます。
<iframe src="https://zoyku.com/ja/tools/color-picker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-picker" loading="lazy"></iframe>