ツールナビ
使い方ガイド このサイトについて プライバシーポリシー お問い合わせ
開発ツール 登録不要 無料 ブラウザ完結

カラーコード変換ツール（HEX/RGB/HSL/CMYK対応）

カラーコードをHEX・RGB・HSL・HSV・CMYKの5形式で相互変換。カラーピッカー・補色/類似色生成・コントラスト比（WCAG判定）・色覚異常シミュレーション・パレット保存・CSSコード自動生成対応。ブラウザ完結・無料・登録不要。

最終更新：2026年5月18日

HEX・RGB・HSL・HSV・CMYKを1画面で相互変換 — カラーピッカーで色を選ぶだけで全形式を即表示。補色・類似色・トライアド生成・WCAG コントラスト比チェック・色覚異常シミュレーション・パレット保存対応。デザイン・コーディング・印刷入稿に。
Aa
明るい色

CSS Color Name（140色）・HEX・rgb()・hsl() 形式に対応

HEX
短縮形
RGB
HSL
HSV
Hue/Saturation/Value（Brightness）
Photoshop・Illustratorのカラーモデルと同一形式
CMYK
印刷用の色表現。sRGB→CMYKの近似変換です。
正確な印刷色はICC Profileを使用してください。
CSS / Tailwind コード 
 
  
 
 カラーハーモニー 
      
 
 
 
  
 
 コントラスト比チェッカー（WCAG 2.1） 
 
 
 
  
   
 
 
  
   
 
 
 
 
あいうえお / Aa Bb 123
 
 
 
―
 
 
 
 
  
 
 色覚異常シミュレーション 
 
 
  
 
 マイパレット   
 
 
色を追加するとここに表示されます
 
 
 
 
 
 
      
 
 
  カラーコード形式の比較・使い分けガイド 
 
 
      
5種類のカラーコード形式の特性と使い分けを確認しましょう。

      

        

          
            

              形式
              例
              用途・特性
            

          
          
            
HEX#3B7DEFCSS・HTML・デザインツールで最も一般的。コンパクトで扱いやすい。

            
RGB59, 125, 239デジタルディスプレイの基本。rgba()で透明度指定可能。プログラムでの計算に向く。

            
HSL218°, 83%, 58%人間の感覚に近い。明度・彩度の微調整が直感的。テーマカラー設計に最適。

            
HSV218°, 75%, 94%デザインソフトのカラーホイールに使われる。Photoshop/Illustratorとの連携に。

            
CMYK75%, 48%, 0%, 6%印刷用の色表現。名刺・チラシ・パッケージの入稿時に必要。

          
        

      

     
 
 
  カラーハーモニー理論（補色・類似色・トライアド） 
 
 
      

        

          補色（Complementary）
          
色相環の反対側（180度）の色。コントラストが最も高く、アクセントカラーとして使うと強い印象になります。例：青の補色はオレンジ。

        

        

          類似色（Analogous）
          
色相環で隣り合う±30度の色。自然で調和のとれた配色になります。穏やかで統一感のあるデザインに適しています。

        

        

          トライアド（Triadic）
          
色相環を3等分した120度ずつの3色。バランスよく鮮やかな配色になります。3色の彩度・明度を調整して使います。

        

        

          スプリット補色（Split Complementary）
          
補色の両隣±30度の2色と組み合わせた3色。補色より穏やかなコントラストで使いやすい配色です。

        

      

     
 
 
  WCAGコントラスト比とアクセシビリティ 
 
 
      
Web Content Accessibility Guidelines（WCAG）ではテキストと背景色のコントラスト比に以下の基準があります。

      

        

          
            

              基準
              通常テキスト
              大きいテキスト（18pt+）
              UI部品・グラフィック
            

          
          
            

              WCAG AA
              4.5:1 以上
              3:1 以上
              3:1 以上
            

            

              WCAG AAA
              7:1 以上
              4.5:1 以上
              —
            

          
        

      

      
コントラスト比が低い配色は、弱視のユーザーや強い光の下でのスマートフォン閲覧で読みにくくなります。当ツールのコントラスト比チェッカーで確認できます。

     
 
 
  よくある質問（FAQ） 
 
 
 
 
  HEXカラーコードとは何ですか？ 
 
  HEX（16進数）カラーコードは #RRGGBB の形式で色を表します。RR・GG・BBはそれぞれ赤・緑・青の強度を00〜FFの16進数で表します。例：#FF0000は純粋な赤です。CSS・HTML・デザインツールで最も広く使われる形式です。 
 
 
  HSLとRGBどちらをCSSで使うべきですか？ 
 
  どちらでも機能は同じですが、用途によって使い分けます。HSLはデザインシステムのテーマカラー（ダークモード切替・色の明度調整）に向いており、直感的に調整できます。RGBはJavaScriptでの計算処理やCanvasとの連携に適しています。 
 
 
  CMYKの変換は完全に正確ですか？ 
 
  ブラウザのカラーコード（HEX/RGB）はsRGBで定義されたデジタル表色系で、CMYKは印刷のインク混合量です。このツールの変換はsRGB→CMYKの近似変換であり、実際の印刷色とは異なる場合があります。印刷入稿にはAdobe IllustratorやICC profileを使った正確な変換を推奨します。 
 
 
  色覚異常シミュレーションはどう使いますか？ 
 
  「色覚シミュレーション」セクションで色覚特性のタイプを選ぶと、その色覚特性を持つユーザーにはどう見えるかをシミュレートします。Webサイトのボタン・グラフ・アイコンの配色がすべてのユーザーに伝わるか確認するためのアクセシビリティツールです。 
 
 
  Tailwindのクラス名も確認できますか？ 
 
  はい。入力した色に最も近いTailwind CSSのカラークラス名（例：blue-500）を提案します。完全一致する色のみコードを出力します。カスタムカラーの場合は近似値のクラスを表示します。