カラーピッカー
色を選択、画像から抽出、パレットを生成、コントラストをチェック。HEX、RGB、HSL、HSV、CMYK形式対応。
画像から色を抽出
画像をドロップまたはクリックしてアップロード
主要な色
パレットに色を追加してください
通常サイズ(14px)のサンプルテキスト
大きいサンプルテキスト
コントラスト比
21:1
AA 通常
合格
AA 大きい
合格
AAA 通常
合格
AAA 大きい
合格
90°
このカラーピッカーの活用場面
無料のカラーピッカーツールでデザイナーと開発者の色作業をサポート:
-
ウェブデザイン
ウェブサイトに最適な色を選び、アクセシビリティ準拠のためのコントラスト比をチェック。
-
ブランドアイデンティティ
ロゴ、マーケティング資料、ブランドガイドライン用の調和のとれたカラーパレットを作成。
-
画像カラーマッチング
写真から色を抽出し、既存の画像とデザイン要素をマッチング。
-
CSS開発
CSSグラデーションを生成し、カラーパレットをCSSカスタムプロパティとしてエクスポート。
-
アクセシビリティテスト
テキストと背景色の組み合わせがWCAG AAおよびAAA基準を満たすか検証。
カラーピッカーの使い方
はじめに
- カラースクエアをクリック&ドラッグして彩度と明度を選択
- 色相スライダーでベースカラーを変更
- 必要に応じてアルファスライダーで不透明度を調整
- コピーボタンをクリックして任意の形式をコピー
機能
- リアルタイムプレビュー付きインタラクティブカラーピッカー
- スポイトツールで画像から色を抽出
- 調和のとれた色の組み合わせを自動生成
- カスタムパレットを作成しCSSまたはJSONでエクスポート
- アクセシビリティのためのWCAGカラーコントラストチェック
- ビジュアルエディターでCSSグラデーションを作成
キーボードショートカット
- Ctrl+C:現在のHEXカラーをコピー
- Ctrl+V:クリップボードから色を貼り付けて適用
- 1-4:機能タブを切り替え
ヒント
- 画像をアップロードすると主要な色を自動抽出
- コントラストチェッカーでテキストの読みやすさを確保
- パレットをCSS変数にエクスポートしてプロジェクトで簡単に使用