カラーピッカー無料・登録不要
直感的な操作で色を選択し、HEX・RGB・HSLの各形式でカラーコードを取得。Webデザインや資料作成に便利です。
カラーコード
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
カラーピッカーの使い方
- 1カラーピッカーで好きな色を選択します
- 2HEX・RGB・HSLなどの形式で色コードを確認します
- 3必要なカラーコードをコピーして利用します
カラーピッカーの例文・サンプル
カラーコード取得の例
（カラーピッカーUIから色を選択）
選択色の各形式： HEX: #3B82F6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%)
※ HEX / RGB / HSL をワンクリックでコピー可能
よくある質問
カラーピッカーは無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
📘 関連ガイド記事
関連ツール
カラーピッカーについて
カラーピッカーが解決する課題
デザインや Web 開発の現場で「この色のRGB値・HEX値を知りたい」と思う場面は頻繁にあります。Photoshop や Illustrator のスポイトツールは強力ですが、ブラウザでサクッと色を確認・変換したい時に開くのは手間です。本ツールはGUIから色を直感的に選択し、HEX・RGB・HSL・HSV 値を同時表示します。色名（赤・青）から具体的なカラーコードへの変換にも使えます。
こんなシーンで使えます
【1. CSSコーディング中の色指定】画面で確認した色の HEX 値や RGB 値を即座に取得できます。
【2. デザインツールから抽出した色のフォーマット変換】Figma で取得した HEX を CSS の rgba() に変換するなど、用途別フォーマットへの変換に使えます。
【3. ブランドカラー値の確認・記録】「このサイトのこの色は何HEX？」と確認したい時、視覚的に色を選んで値を取得できます。
他の方法とこのツールの違い
ブラウザ拡張機能の ColorZilla なども便利ですが、インストールが必要です。本ツールは登録不要・拡張機能不要で、ブラウザ内で完結します。HEX・RGB・HSL を一画面で同時確認できる点も利便性が高いです。
よくある失敗と注意点
1つ目の失敗は、ディスプレイのキャリブレーションを意識しないことです。同じHEX値でも、ディスプレイによって見た目が異なります。色精度が重要な場面では、キャリブレーション済みディスプレイで確認してください。
2つ目は、透過色（アルファ）の取り扱いです。HEX 6桁は不透明色、HEX 8桁（最後2桁がアルファ）は半透明色を表します。用途に応じて使い分けてください。
3つ目は、ダークモード対応です。色がダークモードでも見やすいか、別途確認が必要です。