Color Picker

色を選んですぐ作業 — 面倒なし

重いアプリや複雑すぎる色ツールにうんざりして、2025 年に Color Picker を作りました。フロントエンド開発者／イラストレーターとして、色をすぐ拾って少し調整し、そのまま進める方法が必要だったのです。社内ツールとして始まり、同僚のお気に入りとなり、磨きをかけて誰でも使える Web 版に。アカウント不要・学習コストゼロ — ページを開き、トーンを選び、HEX・RGB・HSL・HSV のコードをコピーするだけ。

私たちのカラーピッカーが好評な理由

デザインを前に「この絶妙なトーンはどう出す？」と思ったことがあるなら、Color Picker のシンプルさを気に入っていただけるはず。UI はあえてミニマルにしました：

• クリック一つで色が手に入る — パレットの任意の点をタップすると必要な値を即表示。写真やスクショから取りたい？ ページにドロップしてスポイトでどうぞ。
• グラデーションがかんたん — バー上でストップを追加・移動してシルキーな遷移を作成。線形／放射状を切り替え、角度と不透明度を微調整して CSS をコピー。
• 制限なし・費用なし — デスクトップ／タブレット／スマホのあらゆるモダンブラウザーで動作。インストール不要、料金も不要。
• 必要なときに拡張機能 — オプションの Chrome・Edge 拡張がスポイトをブラウザーに直結。どのページからでも色を取得し、履歴も残せます。

用途

Color Picker の使い方はいろいろ：

• デザイナーとプロダクトチーム は、UI やブランドパレットの下描きに活用。組み合わせの検証や、グラデーションに必要な CSS のコピーが素早く行えます。
• イラストレーターやアーティスト は、写真や絵画からインスピレーションを得るためにスポイトを使用。グラデーションツールは滑らかな陰影や色の遷移設計に役立ちます。
• フロントエンド開発者 は、プロジェクト間で一貫した色値を作るために頼りにします。拡張機能により既存サイトからのサンプリングも簡単です。
• アクセシビリティを確認する人 は、さまざまなモデルで色を確認し、コントラスト基準を満たすまで不透明度を調整できます。

はじめに

マニュアルは不要です — クイックガイドはこちら：

• 色を選ぶ — パレットのどこでもクリック。HEX・RGB・HSV の値がすぐ表示されます。スライダーで色相・彩度・明度・不透明度を微調整しましょう。
• 画像からサンプルを取る — 画像ファイルをページにドラッグするか選択します。目的のピクセルをクリックすると色コードが表示されます。
• グラデーションを作る — グラデーションバーをクリックしてストップを追加し、ドラッグで移動。線形と放射状を切り替え、角度と不透明度を調整します。
• コピーして再利用 — 選んだ色やグラデーションは自動保存されます。コードや CSS をコピーしてプロジェクトに貼り付けたり、チームと共有しましょう。