カラー変換
HEX、RGB、HSL、HSV、CMYK、LAB、OKLCHを相互変換できるカラーツールです。スポイト付きビジュアルピッカー、パレット生成、画像からのカラー抽出、WCAGとAPCAのコントラストチェック、色覚シミュレーションを搭載しています。無料で、すべての処理はブラウザ内で完結します。登録不要。今すぐ使えます。
--color-primary: #06d6a0;bg-[#06d6a0]@theme {
--color-primary: oklch(78% 0.16 167);
}カラー変換ツールは、HEX、RGB、HSL、OKLCHなどカラースペース間の変換ができる無料オンラインツールです。ビジュアルピッカー、画像パレット抽出、WCAGコントラストチェッカー、色覚プレビューを備え、ブラウザ上で完全に動作します。
Color Toolとは？
7つのカラースペース（HEX、RGB、HSL、HSV、CMYK、LAB、OKLCH）間の変換、カラーハーモニーの生成、アクセシビリティのためのコントラスト比チェック、色覚異常のシミュレーション、画像からのパレット抽出を備えた包括的なカラーユーティリティです。
一般的なユースケース
Web開発でのカラーピッキングと変換 — CSSやTailwindに必要なHEX、RGB、HSL、OKLCHの値を正確に取得。
背景色に対するテキストのコントラストをチェックし、WCAGアクセシビリティガイドライン（AA/AAA）または新しいAPCA標準を満たしているか確認。
画像から主要色を抽出して統一感のあるデザインパレットを構築し、補色、類似色、トライアドのハーモニーを生成。
カラースペース
このカラーツールは、7つのカラースペース間の変換、カラーハーモニーの生成、コントラスト比のチェック（WCAGとAPCA）、色覚シミュレーション、画像からのパレット抽出を行います。16進計算には[進数変換ツール](/numbase)を、画像処理には[画像圧縮](/image-compress)をご覧ください。
WCAG 2.1は輝度比（1:1〜21:1）を使用し、AA/AAAの閾値を定めています。広くサポートされていますが、小さなテキストやダークモードでの知覚を完全には考慮していません。
APCAはWCAG 3の候補で、極性を考慮したLcスコアを採用しています。細いテキストや小さなテキストの読みやすさとより相関が高いです。
ヒント
- スポイトを使って画面上の任意のピクセルから色を取得できます（Chromium系ブラウザ）。
- パレットタブに画像をドロップすると、メディアンカット量子化で6つの主要色を抽出します。
- Tailwind v4は知覚的な滑らかさのためOKLCHで色を出力します。@themeブロックをコピーしてそのワークフローに合わせましょう。