ColorDojo：スポイトツール＆カラーピッカー

スポイト＆カラーピッカー拡張機能。画面の色をプライベートに取得、OKLCH をコピー、Tailwind v4 と照合、コントラスト検証まで。

ColorDojo は、OKLCH、Tailwind 対応、コントラスト検証を必要とする開発者のための、プライベートなスポイトツール兼カラーピッカー拡張機能です。全サイトへの常時アクセス権は不要。ピクセルを取得し、値をコピーして、作業を続けられます。 一度の取得で、使う形式をそのままコピー Chromium ネイティブのスポイトで画面上の任意のピクセルを取得。ColorDojo は hex、RGB、HSL、HSV、OKLCH、Display P3 に加えて最も近い CSS 名前付きカラーを表示し、自動コピーを有効にすれば既定の形式を自動でコピーします。rgba カラーピッカーとしては、貼り付け・インポートした色のアルファチャンネルを保持：8桁 hex、またはスラッシュ形式・カンマ形式の rgb() です。Alt+P で取得をキーボードから実行でき、ツールバーのバッジは最後に取得した色の点になります。 適用前にチャンネルを微調整 もう少しで理想の色？Edit タブはスライダー付きの HSL カラーピッカーです。RGB・HSL・HSV チャンネルを調整し、ドラッグ中の「Selected vs new」比較を確認して適用。形式、Tailwind トークン、コントラスト検証が適用色に追従します。 MAC・WINDOWS・LINUX で使えるスポイト Chromium がネイティブのスポイトを提供する環境では画面全体から取得。提供しない環境ではページ内ルーペが引き継ぎます。16倍の拡大表示で、単一ピクセルの取得、3x3・5x5・11x11・25x25 ブロックの平均、ドラッグ範囲の平均に対応。ルーペはアクティブなページ上で、クリック後にのみ動作します。 デザインシステムの中に留まる 取得した色はローカルで同梱の Tailwind CSS v4 パレットと照合。最も近いトークン、知覚デルタ、ペアのスウォッチ、`blue-600` と `var(--color-blue-600)` 両形式のコピー操作を提供します。テーマ抽出は Tailwind カラージェネレーターとして、表示中のページから完全な @theme ブロックを書き出します。 監査の前にコントラストを確認 内蔵の WCAG コントラストチェッカーが、取得と同時に白・黒との比率を表示。アクティブな色と履歴の色を組み合わせ、WCAG 2.2 の AA・大テキスト・AAA 判定、参考値の APCA Lc、通常テキストが AA を満たさない場合の明度サジェストを確認できます。 ページが実際に使う色を抽出 テーマ抽出はアクティブなページでのみ実行。アクセス可能な CSS カスタムプロパティと計算済みスタイルのサンプリングを組み合わせ、ほぼ重複する色を OKLCH パレットへクラスタリングし、CSS 変数、Tailwind v4 の @theme ブロック、OKLCH 成分の W3C Design Tokens JSON、任意形式のプレーンリストとしてエクスポートします。 変換タブいらずの HEX から OKLCH へ #ef4444、hsl(0 84% 60%)、cmyk(0 72 72 6)、oklch(60% 0.2 30) をパレットインポーターに貼り付け、各エントリを必要な形式でコピー。hex から OKLCH、OKLCH から hex、HSL から OKLCH まで、オフラインでポップアップ内で完結します。 閲覧データのパイプラインなし ColorDojo に全サイトのホスト権限も常駐コンテンツスクリプトもありません。インスペクトと抽出はクリック後にのみ Chrome の一時的な activeTab 許可を使用。実行時のネットワークリクエストはゼロで、履歴とパレットは Chrome のストレージに保存されます。 次に気になるピクセルを見つけたら、Alt+P。その色をそのままコードへ。 🌐 MORE FROM COLORING DOJO Free Online Coloring Pages: https://coloringdojo.com Cat Coloring Pages: https://coloringdojo.com/coloring-pages/cat-coloring-pages Unicorn Coloring Pages: https://coloringdojo.com/coloring-pages/unicorn-coloring-pages