カラーピッカー

色を選択してコントラストチェッカーとプリセット付きで全形式の値を取得

カラーピッカー

色を選択

色相 239

彩度 84

明度 67

アルファ（透明度） 100%

コントラストチェッカー

背景色

文字色

サンプルテキストプレビュー

コントラスト比: -

AA 標準 -

AA 大文字 -

AAA 標準 -

AAA 大文字 -

カラープレビュー

カラー値

HEX

RGB

HSL

HSV

CMYK

RGBA

HSLA

全ての処理はブラウザ内で行われます。データはサーバーに送信されません。

保存された色

カラープリセット

使用例

Webデザインカラー

Webサイトデザイン用の色を選び、全形式でCSS対応の値を取得します。

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

WCAG AAおよびAAA準拠のカラーコントラスト比をチェックします。

ブランドパレット

保存された色とプリセットコレクションでブランドカラーパレットを構築します。

機能

複数のカラー形式

HEX、RGB、HSL、HSV、CMYK、RGBA、HSLA形式のカラー値を即座に取得

WCAGコントラストチェッカー

WCAG AAおよびAAAアクセシビリティ準拠のカラーコントラスト比をチェック

カラーパレット保存

お気に入りの色をブラウザに保存されるローカルパレットに保存

Material & Tailwindプリセット

Material DesignとTailwind CSSのカラーパレットへのクイックアクセス

使い方

色を選択

カラーピッカーを使用するか、HEXコードを入力するか、色相/彩度/明度スライダーを調整します。

全形式を確認

全てのカラー値（HEX、RGB、HSL、HSV、CMYK）が色を選択するとリアルタイムで更新されます。

コピーまたは保存

ワンクリックで任意の形式をクリップボードにコピーするか、パレットに色を保存します。

よくある質問

このツールは 7 つの形式を出力します。CSS およびほとんどのデザインツール向けの HEX (#3B82F6)、画面の色仕事や CSS の rgb() 値用の RGB (59, 130, 246)、色相を維持したまま明るさ/彩度を変更できるためデザインに適した HSL (217, 91%, 60%)、Photoshop や Illustrator のカラーピッカーで使用される形式の HSV (217, 76%, 96%)、印刷やオフセット用文書の CMYK (76%, 47%, 0%, 4%)、そして CSS で透明な色に使用するアルファ/不透明度チャンネルを追加した RGBA と HSLA です。すべての値は選択に合わせてリアルタイムで更新されます。

WCAG（Web Content Accessibility Guidelines）は、低視力や色覚特性を持つ人のための読みやすさを確保するために、テキストとその背景間の最小コントラスト比を定義しています。AA はほとんどの法域における法的最小基準です：標準テキスト（18pt/14pt bold 未満）で 4.5:1、大きなテキストで 3:1。AAA は強化された基準です：標準テキストで 7:1、大きなテキストで 4.5:1。男性の約 8% 、女性の 0.5% が何らかの色覚の特性を持っているため、公共向けの製品ではコントラストへの準拠が不可欠です。このチェッカーはテキストと背景色の両方を同時にテストし、どの組み合わせが合格または不合格かを示します。

どちらも色相（Hue、0-360 度）と彩度を使用しますが、3 番目のチャンネルが異なります。HSL（Lightness）は 50% を純粋な彩度の色、0% を黒、100% を白として設定するため、CSS やデザインにおいて直感的です。HSV（Value/Brightness）は 100% の Value を純粋な彩度の色、0% を黒として設定します。HSV では、彩度が 0% でない限り純粋な白はありません。Adobe Photoshop、Illustrator、およびほとんどのネイティブ OS カラーピッカーは HSV を使用しています。CSS や Web デザインツールは通常 HSL を使用します。このツールでは両者を即座に変換できます。

表示される CMYK 値は、標準的な数式を使用した RGB からの数学的な変換です。これらはデジタルから印刷へのワークフローにおける有用な近似値ですが、実際の印刷色は使用するプリンター、インク、紙、および ICC カラープロファイルに大きく依存します。プロの印刷作業では、常に最終的な色を実物の校正刷りと照合するか、印刷サービスのカラー仕様を確認してください。ここでの CMYK 値は、初期段階の色の決定や印刷プレビューには適しています。

Presets セクションをクリックし、Tailwind CSS または Material Design を選択してください。各パレットには完全なカラースケール（例：Tailwind の blue-50 から blue-950、または Material の red 100 から 900）が表示されます。スウォッチをクリックすると、その色がピッカーに読み込まれ、HEX、RGB、HSL、その他の値が即座に表示されます。これは既存のデザインシステム内で構築する際に便利です。他の場所を探すことなく、必要な正確な形式（例：Tailwind blue-600 の HSL 値）をコピーできます。

保存された色はブラウザの localStorage に保存されます。同じデバイスおよびブラウザではセッション間で保持されますが、サーバーや他のデバイスには同期されません。また、ブラウザのデータを消去すると削除されます。長期的に保持したい色については、HEX 値をデザイン文書にコピーするか、デザインツールのカラーライブラリに保存してください。アカウント作成やログインは不要です。

はい。HEX 入力フィールドに直接 HEX コードを入力または貼り付けることができます（# プレフィックスの有無は問いません）。そうすると、ピッカーと他のすべての形式のフィールドがすぐに更新されます。また、特定のプロパティを変更したい場合は、色相、彩度、明るさのスライダーを直接調整することもできます。これは、デザインファイルから取得した hex コードがあり、そのコントラストを確認したり、別の形式に変換したりしたい場合に便利です。

いいえ。すべてのカラーピッキング、形式変換、コントラスト計算、およびパレットの保存は、JavaScript を使用してブラウザ内で完全に実行されます。色の値、保存されたパレット、および利用データは、いかなるサーバーにも送信されません。このツールは、ページが読み込まれた後は完全にオフラインで動作します。