その他

カラーピッカー

カラーピッカーツールは、画像から色（カラーコード）を抽出するツールです。アップロードした画像や画像 URL を読み込み、表示されるルーペで拡大しながら、クリックでピクセル単位の色を取り出せます。

画像をここにドラッグ

または

PNG / JPG / WebP / GIF / BMP / SVG に対応（最大 20MB）。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg

抽出した色0 件

画像のピクセルをクリックすると、色がここに追加されます。

QRコード生成

URL・Wi-Fi・メール・SMS・電話番号・連絡先・地図（位置情報）・カレンダー予定・テキストを QR コード画像に無料で作成できるジェネレーター。サイズ・形式・色・ロゴの指定に対応し、追跡なしで何度でも生成可能。データは外部送信せずブラウザだけで完結します。

くじ引き・抽選

名前のリストや数値の範囲からランダムに 1〜N 件を選べる無料のくじ引き・抽選ツール。重複なしの抽選やリール演出、抽選履歴の保存に対応し、順番決めや当選者選びを公平に行えます。登録不要、ブラウザだけで完結します。

ポモドーロタイマー

25 分の集中と 5 分の休憩を繰り返す、無料で使えるオンラインのポモドーロタイマー。勉強・仕事の集中タイマーとして、円形プログレス・アラーム音・全画面・常時最前面のポップアウト表示に対応。ブラウザだけで完結します。

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

コントラストチェッカー

前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

単位変換

長さ・重さ・温度・面積・体積・速度など、さまざまな単位を相互に換算できる無料の単位変換ツール。cm とインチ、摂氏と華氏、坪と平方メートルなどをリアルタイムに換算でき、登録不要・ブラウザだけで完結します。

カラーピッカーツールとは？

取得した色は HEX（#RRGGBB）・RGB・HSL の 3 形式で切り替えて表示できます。ルーペの拡大率は 5x / 10x / 20x の 3 段階。複数の色を取り出してパレットを作り、JSON や CSS 変数の形式でクリップボードにコピーすれば、デザインカンプ・スタイルガイド・コードに直接貼り付けられます。

Chrome 系ブラウザでは「画面から色を取得」（EyeDropper API）も利用でき、画像に限らずデスクトップ画面全体から色を吸い取れます。読み込んだ画像はすべて利用者のブラウザ内で処理され、外部サーバーには送信されません。ブラウザだけで完結します。

使い方

画像ファイルをアップロードするか、画像 URL を貼り付けて読み込みます。
画像上にカーソルを合わせるとルーペが表示されます。ルーペの拡大率（5x / 10x / 20x）を選びます。
ピクセル単位で確認したい場所をクリックすると、その点の色がパレットに追加されます。
色の表示形式を HEX / RGB / HSL から切り替えて確認します。
対応ブラウザでは「画面から色を取得」ボタンで、デスクトップ画面の任意の位置から色を取り出すこともできます。
「JSON をコピー」「CSS 変数をコピー」で抽出したパレットをまとめて書き出せます。

利用シーン

デザインカンプから配色を取り出し、Web サイトの CSS 変数として実装したい Web デザイナー・フロントエンドエンジニア。
競合サイトや参考デザインのスクリーンショットから配色を分析したい UI デザイナー。
ブランドカラーを写真や素材から拾い出して、配色ガイドを作りたいブランディング担当者。
イラスト・写真の特定の部分の色を厳密に取りたいイラストレーター・カメラマン。
資料やプレゼンに使う図表の色を、参考画像から揃えたいビジネスユーザー。

注意点

「画面から色を取得」（EyeDropper）は Chrome 系の一部ブラウザでのみ利用可能です。Firefox / Safari など非対応のブラウザでは表示されません。
画像 URL から読み込む場合、対象の画像サーバーが CORS（Cross-Origin Resource Sharing）を許可していないと、色の取得（getImageData）が失敗することがあります。
色は sRGB 色空間で取得されます。広色域（Display P3 など）の画像は sRGB に変換された値が表示されます。
ルーペで表示される色と、画像全体で見たときの色が違って見えることがあります（隣接ピクセルの影響）。
本ツールはピクセル単位の色を取得します。AI による「画像全体の代表色抽出」とは目的が異なります。

よくある質問

画像はサーバーにアップロードされますか？

アップロードされません。色抽出処理はすべてお使いのブラウザ内で完結します。社内向けのデザイン素材や個人の写真でも安心して利用できます。

画像 URL を入れても色が取れません。

画像のホスト側で CORS（クロスオリジンアクセス）が許可されていない場合、ブラウザの仕様で色の取得ができません。対策としては、画像をローカルにダウンロードしてアップロードからお試しください。

HEX / RGB / HSL の違いは？

HEX は #RRGGBB の 16 進数表記、RGB は赤・緑・青の輝度を 0〜255 で表す形式、HSL は色相・彩度・明度の 3 要素で表す形式です。CSS では HEX と RGB が広く使われ、HSL は色相を中心に微調整する設計時に便利です。本ツールでは同じ色をワンクリックで 3 形式間で切り替えられます。

「画面から色を取得」が表示されません。

EyeDropper API に対応した Chrome 系ブラウザ（Google Chrome / Microsoft Edge / Brave など）でのみ表示されます。Firefox や Safari では非対応のため、画像をアップロードする方法をご利用ください。

取得した色を Figma / Sketch / Photoshop に持っていけますか？

HEX をそのままコピーすればほとんどのデザインツールにペーストできます。一括で複数色を持ち込みたい場合は「JSON をコピー」「CSS 変数をコピー」で書き出した文字列を、対応するプラグインやインポート機能で取り込んでください。