カラーピッカー
色を選択してコントラストチェッカーとプリセット付きで全形式の値を取得
カラーピッカー
コントラストチェッカー
サンプルテキストプレビュー
コントラスト比:
-
AA 標準
-
AA 大文字
-
AAA 標準
-
AAA 大文字
-
カラープレビュー
カラー値
HEX
RGB
HSL
HSV
CMYK
全ての処理はブラウザ内で行われます。データはサーバーに送信されません。
保存された色
カラープリセット
使用例
Webデザインカラー
Webサイトデザイン用の色を選び、全形式でCSS対応の値を取得します。
アクセシビリティチェック
WCAG AAおよびAAA準拠のカラーコントラスト比をチェックします。
ブランドパレット
保存された色とプリセットコレクションでブランドカラーパレットを構築します。
機能
複数のカラー形式
HEX、RGB、HSL、HSV、CMYK、RGBA、HSLA形式のカラー値を即座に取得
WCAGコントラストチェッカー
WCAG AAおよびAAAアクセシビリティ準拠のカラーコントラスト比をチェック
カラーパレット保存
お気に入りの色をブラウザに保存されるローカルパレットに保存
Material & Tailwindプリセット
Material DesignとTailwind CSSのカラーパレットへのクイックアクセス
使い方
1
色を選択
カラーピッカーを使用するか、HEXコードを入力するか、色相/彩度/明度スライダーを調整します。
2
全形式を確認
全てのカラー値（HEX、RGB、HSL、HSV、CMYK）が色を選択するとリアルタイムで更新されます。
3
コピーまたは保存
ワンクリックで任意の形式をクリップボードにコピーするか、パレットに色を保存します。
よくある質問
HEX、RGB、HSL、HSV、CMYK、RGBA、HSLA。選択するたびに全ての値がリアルタイムで更新されます。
テキストと背景の色の組み合わせがアクセシビリティ基準（WCAG 2.1 AAおよびAAAレベル）を満たしているかチェックします。
ブラウザのlocalStorageです。セッション間で保持されますが、同じブラウザとデバイスでのみ有効です。
いいえ。全てブラウザ内のJavaScriptで動作します。デバイスから何も出ません。
カラーピッカーとは？
ウェブサイトで気に入った色を見つけてhexコードが欲しい。ブランドカラーを選んでいて、画面でも印刷でも使えるか確認したい。このツールなら好きな色を選んでHEX、RGB、HSL、HSV、CMYK、RGBA、HSLAで即座に取得できます。WCAGアクセシビリティ基準のチェックも内蔵しているので、使えない色の組み合わせをリリースする心配もありません。
このカラーピッカーを使う理由
全カラー形式がリアルタイム変換で一箇所に。アクセシビリティのためのコントラストチェッカー、よく使う色を保存するローカルパレット、Material DesignとTailwind CSSのパレットも内蔵。ワンクリックコピーでそのままコードに貼り付け。
このツールは役に立ちましたか？