比較 · 2026-10-25 確認
無料のカラーパレットとコントラスト確認ツールおすすめ
カラーパレットツールには、画像から色を取り出し、一つの色から配色を作り、文字が読みやすいかを確かめ、パレットをデザインツールやコードに渡せることが求められます。ここでは、各ツールのページの内容をもとに、それぞれの特長をまとめました。
当社は、このページのツールの 1 つである Slop Colors を提供しています。他のツールに関する情報はすべて、2026-10-25 時点のそれらのツール自身のページから得たもので、各ツールの下にリンクを示しています。価格と機能は変わるため、選ぶ前に各サイトをご確認ください。
比較の方法
- 無料で使えるか、アカウントや有料プランで何が増えるか
- 画像から色を抽出できるか
- 一つの色から配色や階調を作れるか
- WCAG のコントラスト確認に対応しているか
- 書き出し形式（CSS、Tailwind、ASE、GPL）
一目でわかる比較
| ツール | 料金 | 動作環境 | 画像から色を抽出できるか | コントラスト確認 |
|---|---|---|---|---|
| Slop Colors 当社 | 無料、アカウント不要 | 最新のブラウザーなら何でも | スポイトと主要な色（k-means 法） | 比率、AA と AAA、改善案つき |
| Coolors | 無料プラン、有料プラン | Web、iOS アプリ、Figma プラグイン、Chrome 拡張機能 | Image Picker | Contrast Checker |
| Adobe Color | 無料 | Web | 画像からの抽出 | WCAG の指針つきのコントラスト比 |
| WebAIM Contrast Checker | 無料 | Web | なし（スポイトで画面から色を取ります） | AA と AAA、通常の文字、大きな文字、UI |
| 機能 | Slop Colors 当社 | Coolors | Adobe Color | WebAIM Contrast Checker |
|---|---|---|---|---|
| 画像から色を抽出できるか | はい | はい | はい | いいえ |
| 一つの色からの配色 | はい | 記載なし | はい | いいえ |
| WCAG のコントラスト確認に対応しているか | はい | はい | はい | はい |
| 大きな文字と UI の基準 | はい | 記載なし | 記載なし | はい |
| 色覚の見え方のプレビュー | いいえ | 記載なし | はい | いいえ |
| CSS での書き出し | はい | はい | 記載なし | いいえ |
| Tailwind での書き出し | はい | はい | 記載なし | いいえ |
| Adobe .ase での書き出し | はい | はい | 記載なし | いいえ |
| GIMP .gpl での書き出し | はい | 記載なし | 記載なし | いいえ |
| OKLCH の値 | はい | 記載なし | 記載なし | いいえ |
| アカウント不要 | はい | 一部 | 一部 | はい |
| 画像はお使いの端末内に残る | はい | 記載なし | 記載なし | はい |
1. Slop Colors（当社）
向いている人： 手元の画像から色を取り出し、プライベートな環境でコントラストを確認し、パレットをコードやスウォッチファイルとして一つのページで書き出したい方に。
長所
- 画像はブラウザー内で読み込まれ、アップロードされません
- CSS 変数、Tailwind の設定、JSON、Adobe の .ase と GIMP の .gpl で書き出し、そのファイルを再び読み込めます
- HEX、RGB、HSL、OKLCH、CMYK に対応。OKLCH で表示域外の色は sRGB 内に収めます
短所
- 共有されたパレットを閲覧できるライブラリはありません
- 色覚の見え方のプレビューはありません
- パレットを PDF や画像として書き出すことはできません
2. Coolors
向いている人： パレットを素早く生成して閲覧したい方、大規模なライブラリやデザインツール用のプラグインを使いたい方に。
長所
- スペースキーで生成でき、1,000 万件を超えるパレットを探せます
- PDF、画像、CSS、ASE、SVG、コード、Tailwind で書き出し
- Palette Visualizer で、デザイン上での色の見え方を確認
短所
- 無料プランで保存できるパレットは 10 件まで。画像からの色の抽出と高度な書き出しは、同ページで有料プランの機能とされています
Coolors の公式サイト · 出典： Coolors ホームページ
3. Adobe Color
向いている人： Adobe のアプリを使うデザイナーで、色相環による配色ルールを使い、パレットをライブラリに保存したい方に。
長所
- 色相環で、単色、補色、類似色、トライアド、分割補色の配色ルールを使えます
- 色覚の見え方のプレビュー
- パレットをライブラリに保存して、ほかのプロジェクトでも使えます
短所
- 色相環のページには書き出しファイルについての説明がありません
Adobe Color の公式サイト · 出典： Adobe Color、カラーホイール
4. WebAIM Contrast Checker
向いている人： 文字と背景の組み合わせ一組を WCAG で確かめ、結果を共有するためのリンクを作りたい方に。
長所
- どちらの色も明度のスライダーで調整できます
- 結果の固定リンクと、結果を取得する JSON API
- 前景色の透明度（アルファ値）に対応
短所
- 確認できるのは組み合わせ一組だけで、パレットの作成や書き出しはできません
WebAIM Contrast Checker の公式サイト · 出典： WebAIM Contrast Checker
選び方
色を手元の画像から取り、パレットをコードやデザインツールで使いたいなら Slop Colors がおすすめです。スポイト、主要な色、コントラスト確認、書き出しが一つのページにまとまっており、何もアップロードされません。
生成機能、ライブラリ、プラグインを使うなら Coolors、色相環と Adobe のライブラリを使うなら Adobe Color、文字と背景の組み合わせを一組確認して共有するなら WebAIM の確認ツールがおすすめです。
よくある質問
どのくらいのコントラスト比が必要ですか？
WCAG の AA では、通常の文字は 4.5:1、大きな文字と UI の部品は 3:1 が必要です。AAA では、それぞれ 7:1 と 4.5:1 です。4 つのツールすべてでコントラスト比が表示されます。
Photoshop や Illustrator で開けるファイルはどれですか？
Adobe Swatch Exchange（.ase）ファイルです。Slop Colors と Coolors のどちらでも書き出せます。
画像はアップロードされますか？
Slop Colors ではアップロードされず、ブラウザー内で読み込まれます。ほかのツールについては、それぞれのプライバシーに関する説明をご確認ください。
他の製品の名称は、それぞれの所有者の商標です。Slopographic はそれらと提携していません。