カラーコード変換 HEX / RGB / HSL 相互変換ツール

カラーピッカー・補色生成・WCAGコントラスト比チェック対応。Webデザイナー必携の無料ツール。

入力データはブラウザ内のみで計算され、サーバーには一切送信されません。

カラー入力・変換

R
G
B
H
S
L

WCAGコントラスト比チェック

サンプルテキスト / Sample Text 123
14.26 : 1

補色・類似色パレット

各色をクリックするとHEXコードをコピーします

CSS変数出力

選択中の色をCSS変数としてコピーします


        
      

    


    
    

      

         使い方（5ステップ）
        

          
    
            
  1. カラーピッカーまたはHEX入力で色を選択します。ピッカーのカラーホイールをドラッグするか、#7c3aed のようなHEXコードを直接入力してください。
    2. 
            
  2. RGB・HSL値が自動更新されます。各値の隣にあるコピーボタン（）で値をクリップボードにコピーできます。
    3. 
            
  3. WCAGコントラスト比チェックで前景色（文字色）と背景色を入力すると、コントラスト比と AA/AAA 合否が即座に表示されます。
    4. 
            
  4. 補色・類似色パレットで選択した色のカラーハーモニーを確認できます。各スウォッチをクリックするとHEXをコピーします。
    5. 
            
  5. CSS変数出力の「コピー」ボタンで :root 変数をワンクリックでコピーし、CSSファイルに貼り付けて使えます。
    6. 
          

        

      

    


    
    

      
カラーコード変換とは

      

        
カラーコードとは、色をデジタルデータとして表現するための記法です。WebデザインやCSS開発では主に HEX（16進数）・RGB（赤・緑・青）・HSL（色相・彩度・明度） の3形式が使われます。

        
HEXは最も広く使われる形式で、#RRGGBB の形式で6桁の16進数を使います。RGBは各チャンネルを0〜255の数値で指定でき、不透明度を扱うRGBA形式への応用もできます。HSLは人間の感覚に近い指定方法で、色相を変えるだけで色味を変えられるため、CSSアニメーションや動的な色変化に便利です。

        
WCAG（Web Content Accessibility Guidelines）のコントラスト比チェックは、視覚に障害のある方を含む多くのユーザーにとって読みやすいデザインを実現するために重要です。コントラスト比4.5:1以上（AA基準）を満たすことで、より多くのユーザーが文字を読みやすくなります。

      

    


    
    

      
よくある質問

      

        

          HEXカラーコードとは何ですか？
          
HEX（16進数）カラーコードは、#RRGGBBの形式で色を表す方法です。RR（赤）・GG（緑）・BB（青）それぞれを00〜FFの16進数2桁で表現します。CSSやHTMLで最も広く使われる色指定形式です。

        

        

          RGBとHEXの変換方法を教えてください。
          
RGBの各値（0〜255）を16進数に変換してつなげるとHEXになります。例えばRGB(124, 58, 237)はR=7C、G=3A、B=EDなので#7C3AEDです。本ツールなら入力するだけで自動変換できます。

        

        

          HSLとはどんな色空間ですか？
          
HSLはHue（色相）・Saturation（彩度）・Lightness（明度）の3要素で色を表す色空間です。H:0〜360度、S:0〜100%、L:0〜100%で指定します。直感的に色を調整しやすく、CSSアニメーションでの色変化にも活用されます。

        

        

          WCAGコントラスト比とは何ですか？
          
WCAGはWeb Content Accessibility Guidelinesの略で、Webアクセシビリティの国際基準です。コントラスト比とは前景色（文字色）と背景色の明るさの差を示す比率です。AA基準では通常テキストに4.5:1以上、AAA基準では7:1以上が求められます。

        

        

          補色とはどういう色ですか？
          
補色とは色相環で正反対（180度離れた）の色のことです。補色同士を組み合わせると色が強調し合い、鮮やかなコントラストが生まれます。デザインでアクセントカラーを選ぶ際に活用されます。

        

        

          CSS変数として出力するにはどうすればよいですか？
          
「CSS変数出力」セクションの「コピー」ボタンをクリックすると、選択中の色を --color-primary などのCSS変数としてクリップボードにコピーできます。そのままCSSファイルに貼り付けて使えます。

        

        

          入力したカラーデータはサーバーに送信されますか？
          
いいえ、一切送信されません。すべての変換・計算処理はブラウザ内のJavaScriptで完結します。入力した色情報がサーバーや第三者に送信されることはありません。

        

      

    


    
    

      
免責事項

      
本ツールで提供するカラーコード変換・コントラスト比計算はWCAG 2.1の計算式に基づいていますが、その正確性・完全性を保証するものではありません。Webデザインやアクセシビリティ対応の最終判断は、専門家の確認をおすすめします。