MyDevTools
JA

カラーコンバーター

HEX・RGB・HSL・CMYK 間で色を変換し、9 段階のシェードパレットを作成、2 色の WCAG コントラスト比をブラウザで確認できます。

入力内容とファイルはブラウザ内に留まります

色

例: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

変換されたフォーマット

コントラストチェッカー

サンプルテキスト16 px

サンプルテキスト24 px

大きなテキストとは、標準の太さで 24 px 以上、または太字で約 18.67 px 以上の文字です。

コントラスト比率—

    ティントとシェード

    リニア sRGB で黒（シェード）と白（ティント）を混ぜています。色見本をクリックすると HEX をコピーします。

    このページの内容

    よく使われる表記の CSS カラーを貼り付けるだけで、同じ色を HEX・RGB・HSL・CMYK で表示し、そのままコピーできます。明るい～暗いシェードのパレットを作成し、文字色と背景色の WCAG コントラスト比もチェックします。

    詳細な機能

    形式は自動判別します：#3b82f6、短縮形 #38f（# は省略可）、0–255 またはパーセントの rgb(59, 130, 246)／rgba(…)、deg を付けてもよい hsl(217, 91%, 60%)、そして cmyk(76%, 47%, 0%, 4%)。rgb(59 130 246 / 50%) のようなスペース区切りの CSS 構文にも対応します。出力に透明度はないため、アルファ値は受け付けますが無視します。不正な値や範囲外の値は推測せずエラーとして表示します。ネイティブのカラーピッカーでも色を選べます。

    パレットは現在の色に黒（シェード）と白（ティント）を 20・40・60・80% の割合でリニア sRGB 上で混ぜた 9 つの色見本で、中央が元の色です。色見本をクリックすると HEX コードをコピーします。コントラストチェッカーは文字色と背景色からコントラスト比を求め、WCAG 2.x の 4 つの基準（通常テキスト AA 4.5:1・AAA 7:1、大きなテキスト AA 3:1・AAA 4.5:1）の合否を表示します。

    変換はすべてページ上で動く JavaScript の計算式で、何もアップロードされません。CMYK は ICC プロファイルを使わない単純な式なので、目安としては使えますが入稿データには向きません。HSL と CMYK は整数に丸めるため、逆変換すると元の値と 1 ずれることがあります。

    実用例

    HEX から全形式へ：#3b82f6 → rgb(59, 130, 246)、hsl(217, 91%, 60%)、cmyk(76%, 47%, 0%, 4%)。

    HSL から HEX へ：hsl(0, 100%, 50%) は #FF0000 になります。cmyk(0%, 100%, 100%, 0%) も同じです。

    コントラスト確認：白背景 #ffffff 上のグレー文字 #777777 は 4.48:1。大きなテキストの AA（3:1）は合格、通常テキストの AA（4.5:1）は不合格です。

    初期設定の組み合わせ：#1e3a8a と #ffffff は 10.36:1 で、WCAG の 4 項目すべてに合格します。

    このツールの使い方

    1. 色を入力

      「手動入力」に値（HEX、rgb()、hsl()、cmyk()）を入力または貼り付けて「変換」か Enter を押します。「カラーピッカー」で選ぶこともできます。

    2. 必要な形式をコピー

      「変換されたフォーマット」で HEX・RGB・HSL・CMYK の横にあるコピーボタンを押します。

    3. ティントやシェードをコピー

      「ティントとシェード」の色見本をクリックすると、その HEX コードをコピーできます。

    4. コントラストを確認

      「コントラストチェッカー」で「前景色」と「背景色」を設定し、コントラスト比と AA/AAA の結果を確認します。

    ヒントとベストプラクティス

    • # は省略でき、3 桁の短縮形も使えます：38f は #3388FF として読み取られます。
    • 色相は deg の有無を問いません。彩度と明度は 0～100 で指定します。
    • 範囲外の値（例：rgb(300, 0, 0)）は黙って丸めず、エラーになります。
    • 本文テキストは 4.5:1 以上を目安に。3:1 で十分なのは大きなテキスト（24px、または太字 18.66px）だけです。
    • ここでの CMYK を印刷入稿に使わず、印刷所の ICC プロファイルに基づく値を確認してください。