写真やイラストから、使われているおもな色を取り出してカラーパレットを作るツールです。画像の好きな場所をクリックして色を拾うスポイト、日本の伝統色やCSSの色名の表示、配色の提案、CSSグラデーションの作成にも対応しています。
処理はすべてお使いのブラウザの中で行うため、画像がサーバーに送信されることはありません。サイトやブログのデザイン、資料づくりの色選びにお使いください。
画像から色を抽出する
1. 画像を選ぶ
ここに画像をドラッグ＆ドロップ（貼り付け Ctrl+V／⌘+V でも読み込めます）
PNG・JPEG・WebP・GIF・BMP・SVG
画像の上をクリック（スマホはタップ）すると、その場所の色を拾えます。
2. カラーパレット
3. 選んだ色の詳細
4. グラデーションを作る
5. パレットを書き出す
使い方のポイント
- パレットの色の帯は、その色が画像の中でどれくらいの割合を占めているかを表しています。
- ロゴやイラストで背景の白や透明な部分を数えたくない時は、「背景（白・透明）を除く」にチェックを入れます。
- パレットやスポイトで選んだ色は、「選んだ色の詳細」でコードのコピー、色の名前、配色の提案、濃淡（50〜900）を確認できます。
- 「文字の色」は、その色を背景にした時に白と黒のどちらの文字が読みやすいかを、コントラスト比で判定したものです。
- 日本の伝統色は、代表的な約100色からいちばん近い色を表示しています。伝統色の色の値は資料によって少しずつ違うため、目安としてお使いください。
（コラム）配色の基本
| 配色 | 選び方 | 印象 |
|---|---|---|
| 補色 | 色相環で反対側の色 | お互いを引き立てる、メリハリのある配色 |
| 類似色 | 色相環で両隣の色 | まとまりがあり、落ち着いた配色 |
| トライアド | 色相環を3等分した色 | バランスがよく、にぎやかな配色 |
| 分裂補色 | 補色の両隣の色 | 補色ほど強すぎず、変化のある配色 |
サイトの配色は、ベースカラー（約70%）、メインカラー（約25%）、アクセントカラー（約5%）の3つを決めると、まとまりが出やすくなります。写真から取り出した色をメインカラーにすると、写真とサイトの雰囲気をそろえられます。
あわせて使いたいツール
- カラーコード変換・コントラスト比チェック：取り出した色の文字と背景の組み合わせが読みやすいかを確かめられます
- CSSグラデーション・影の生成ツール：取り出した色で、より細かくグラデーションや影を作れます
- 画像フィルター＆エフェクトツール：写真の色味をフィルターで変えられます
- 写真のデジタルデータ（位置情報・Exif・日付等）の確認＆削除ツール：写真の位置情報や撮影日時を確認して、画質を落とさずに消せます
このツールは役に立ちましたか？
これからの開発の参考にしたいので、いいねボタンで教えてください。
コメント