無料カラーピッカー

オンラインカラーピッカー：完全ガイド

Voladeのカラーピッカーは、画面のスポイト、高度なカラーエディター、パレットジェネレーター、グラデーションクリエーター、WCAGアクセシビリティチェッカー、色覚異常シミュレーター、混色ツール、開発者エクスポートを兼ね備えたオールインワンのウェブツールです。単一のインターフェースで100%ローカル、登録不要。

HEX/RGB/HSLに限定される従来のエディターとは異なり、VoladeはLAB、LCH、OKLCH、OKLAB、CMYK、Display P3、XYZ、HWBを含む16のカラースペースに対応。各フォーマットはリアルタイムで表示され、ワンクリックでコピーできるため、デザイナー、開発者、印刷業者向けの最も完全なツールです。

画面のスポイト：ピクセルパーフェクトな精度

画面のスポイトはモダンブラウザのEyeDropper APIを使用し、画面上の任意の色をキャプチャします。画像、ウェブサイト、ドキュメントのどこをクリックしても、色は瞬時にキャプチャされます。高解像度の拡大鏡で正しいピクセルを狙え、キーボードナビゲーション（矢印キー）で絶対的な精度を実現。エリアサンプリング（1×1、3×3、5×5、11×11）でJPEGの圧縮アーティファクトを平滑化し、エリアの平均色を取得します。

選択した色は最近使用した色の履歴に表示され、前の色への切り替えは瞬時に行えます。上級者向けの精度モードでは、ピクセルの正確な座標と各チャンネルの値がリアルタイムで表示されます。

妥協なきカラーエディター

エディターは16のカラーフォーマットを同時表示：HEX、HEX8、RGB、RGBA、HSL、HSLA、HSV/HSB、HWB、CMYK、LAB、LCH、OKLAB、OKLCH、Display P3、XYZ、Linear RGB。各値は直接編集可能：HSLを変更すると、他のすべてのフォーマットがリアルタイムで更新。カラーホイールで直感的なビジュアルコントロール、数値スライダーで精密な調整が可能。

アルファ/透明度はネイティブ対応：専用スライダーで0〜100%の不透明度を調整し、すべてのフォーマットへの影響を即座に確認。変更履歴ですべての変更を記録し、元に戻す/やり直しでいつでも戻れます。

スマートカラーインテリジェンス：単なる選択を超えて

一色から、このツールはすべてのクラシックハーモニーを自動生成：補色、類似色、トライアド、テトラード、分割補色、モノクロマティック。さらにシェード（暗い色）、ティント（明るい色）、トーン（くすんだ色）、暖色、寒色のバリエーションも自動生成されます。

パレットを生成モードで、あらゆる色を完全なデザインシステムに変換：primary、secondary、accent、background、surface、text、muted、border、success、warning、error、info — それぞれにRGB、OKLCH、HEXの値を設定。

画像 → パレット：写真から色を抽出

画像（写真、イラスト、スクリーンショット）をドロップすると、ピクセルを分析してパレットを抽出。5つの抽出モード：ドミナント（最も頻度の高い色）、鮮やか（最も彩度の高い色）、マット（くすんだ色）、バランス（視覚的に調和のとれた色）、ブランド（ブランドアイデンティティに適した色）。

抽出結果は5〜15色で、それぞれに役割（ドミナント、アクセント、暗い色、明るい色）が付与。既存の写真からデザインシステムを抽出するデザイナーにとっての強力な加速ツール。

WCAG アクセシビリティチェック

アクセシビリティセクションは2色（前景と背景）を比較し、正確なコントラスト比とWCAG AA・AAAバッジ（通常テキスト、大型テキスト、UIコンポーネント用）を表示。比が不十分な場合、自動修正ボタンで基準を満たす最も近い色を自動提案。

必須アクセシビリティ基準（RGAA、EN 301 549、ADA、Section 508）に準拠する必要がある開発者に不可欠なツールです。

色覚異常シミュレーター：すべての人のためのデザイン

世界で約3億5000万人が色覚異常を持っています。このシミュレーターは、プロタノピア、デュータノピア、トリタノピア、アクロマトプシアとその中程度の変型を含む8種類の色覚異常において、色がどのように知覚されるかを表示。インターフェースが本当にアクセシブルであることを確認する唯一の方法です。

高度な補間を持つグラデーションジェネレーター

最大10ポイントのリニア、ラジアル、コニックグラデーションを作成。RGB補間でクラシックなグラデーション、HSLでより滑らかな遷移、LABとOKLCHでバンドや可視段差のない知覚的に均一なグラデーションを生成。CSSコードは自動生成、ワンクリックでコピー可能。

カラーミキサー：色の混色

2色を設定可能な比率（0/100〜100/0）で4つのモードで混色：RGB（加法混色）、HSL（色相回転）、LAB（知覚空間）、OKLCH（最も自然）。中間色、影、カスタムシャドウの作成に最適なツール。

ΔE カラー差：プロフェッショナルの精度

デザイナーや印刷業者にとって、色差（Delta E）の計算は不可欠。ΔE76、ΔE94、ΔE2000をテキスト解釈付きで表示：判別不可（ΔE < 1）、努力で判別可能（1-2）、異なる（2-10）、大きく異なる（10-50）、高コントラスト（50+）。

カラープレイグラウンド：実際の条件でテスト

プレイグラウンドは実際のUIコンポーネントにカラーを表示：ボタン、カード、バッジ、入力欄、アラート、リンク、テキスト。カラーが背景色、ボタン色、テキスト色として機能するかをリアルタイムのアクセシビリティスコアとともに即座に確認。

開発者向けエクスポート：10のコードフォーマット

お使いの言語でコードを生成：CSS Variables、SCSS、Tailwind config、JSON design tokens、TypeScript、Swift（UIColor）、Kotlin（Color）、Flutter/Dart、React Native（StyleSheet）、Vue。各エクスポートにバリエーション（50-950）と役割（primary、secondary、accentなど）を含む。

誰が利用できる？

パレットとデザインシステムを作成するUI/UXデザイナー、CSS・Tailwind・SCSSにカラーを統合するフロントエンド開発者、写真からカラーチャートを抽出するグラフィックデザイナー、WCAGコントラストを確認するアクセシビリティチーム、ΔEを計算する印刷業者、およびカラーをプロフェッショナルに探索したいすべてのクリエイター。