デザイン

カラーコンバーター

HEX・RGB・HSL間の色変換をリアルタイムで実行。ビジュアルカラーピッカーまたは値の直接入力に対応。

今はAIに聞けば数秒でHEX・RGB・HSL間の色変換をしてくれます。でも誰もが有料プランやトークンをいつでも使えるわけではなく、AIへの聞き方が分からないこともあります。このコンバーターはそのために存在します：摩擦のない即座の結果。手動での変換方法も下で説明しています。
色を選択
カラースウォッチをクリックしてピッカーを開く。3つのフォーマット（HEX・RGB・HSL）が自動更新されます。
プレビュー
#3B82F6
各フィールドに直接入力することもできます。入力すると他のフィールドが自動更新されます。
#
color: #3b82f6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);

色の形式変換の仕組み

HEX → RGB 16進数のペア（00〜FF）を16進法で読み取り、10進数の値（0〜255）に変換する — 例：#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)。
RGB → HEX 10進数の値（0〜255）を16進数のペア（00〜FF）に変換する — 例：rgb(59, 130, 246) → 59=3B, 130=82, 246=F6 → #3B82F6。
RGB → HSL 輝度は最大チャンネルと最小チャンネルの平均、彩度は両者の差、色相はどのチャンネル（R・G・B）が最大かによって決まる — 例：rgb(59, 130, 246) → hsl(217°, 91%, 60%)。
RGB → CMYK変換に統一的な方法が存在しない理由 RGBは加法混色（画面・光）で非常に広い色域を持つ。CMYKは減法混色（紙の上のインク）で色域が狭い——結果は紙・インク・プリンターごとのカラープロファイル（ICC）に左右される — HEX↔RGB↔HSL（正確で無損失な数式変換）とは異なり、RGBからCMYKへの変換には固定の計算式がありません：同じ赤 rgb(230, 30, 30) でも、使用するICCプロファイルによって印刷される色合いが変わります。実際には、ほとんどの企業は自社でICCプロファイルを管理していません——単にデザインファイルを送り、印刷会社側が自社の校正済みプロファイルを適用して印刷します。例えばCanvaはネイティブでRGBで動作します——Canva Proでも正確なCMYKをプレビューしたり調整したりすることはできません。「印刷用PDF」として書き出す際、変換は自動的に行われ、彩度の高い色は印刷すると色がくすんで見えることがよくあります。プロフェッショナルなワークフローでは印刷会社固有のICCプロファイルを依頼し、最終ファイル（PDF/X形式）に埋め込みますが、ほとんどの人が省略してしまう工程です。
すべての印刷がCMYKを使うわけではない 大判印刷（ジガントグラフィア）や布地へのシルクスクリーン印刷は、紙のオフセット・デジタル印刷と同じRGB → CMYKの流れを必ずしもたどらない — シルクスクリーン印刷（Tシャツ、布地）では、ロゴやシンプルなデザインには通常CMYKではなくパントーン（Pantone）のスポットカラー（あらかじめ調合されたインク）が使われます——各色は別々の版（スクリーン）で刷られ、彩度の高い色（オレンジ、鮮やかな赤、電光のような青）はCMYKの混色では再現できません。写真的なデザインにはCMYKまたは「シミュレーテッドプロセス」が使われます。パントーンもRGBと100%対応しているわけではありません：パントーンが各色に公開しているHEX/RGB値は、あくまで画面上でのプレビュー用の近似値であり、同じ色でも素材（コート紙、非コート紙、布地）によって異なる値になります。物理的なインクは、どこに使われるかによって見え方が変わるからです——実際の製造では、近似のHEX/RGBではなく、印刷会社に正確なパントーンコードを指定するのが正しい方法です。大判印刷では、業者によって実務が異なります：すでに変換されたCMYKを求める業者もいれば、その素材向けに校正済みのプロファイルを持つ自社のRIPがあるためRGBを好む業者もあります——常にその業者に直接確認するのが正解です。

重要な概念

16進数形式は、色を6桁の16進数（0〜9、A〜F）で表します。赤・緑・青の3ペアに分かれており、例えば#FF0000は純粋な赤です。HTMLとCSSで最も広く使われている形式です。

RGB（Red, Green, Blue）は、赤・緑・青それぞれのチャンネルを0〜255の数値で表します。rgb(255, 0, 0)は純粋な赤です。CSSでは透明度（アルファ）チャンネルを追加したrgba()も使用できます。

HSLは色をHue（色相, 0〜360°）、Saturation（彩度, 0〜100%）、Lightness（輝度, 0〜100%）で表します。人間が色を知覚する方法に対応しているため、手動で色を調整する際に最も直感的な形式です。

ブランドカラーの固定値（CSS変数・デザイントークン）にはHEXを使います。動的な透明度が必要な場合はRGB/RGBAを使います。カラーパレットを作成したり、色相・彩度・輝度をプログラムで変化させたい場合（テーマ生成・カラーバリアント）はHSLが最適です。

OKLCHはCSS Color Level 4で導入された知覚的に均一なカラースペースです。HSLと異なり、同じL（明度）値を持つ色は人間の目に同じ明るさで見えます。これにより、アクセシブルで調和のとれたパレットの作成が予測しやすくなります。3つの値は：L（明度、0〜1）、C（彩度、約0〜0.4）、H（色相、0〜360°）です。Chrome、Firefox、SafariはすでにOKLCHをoklch()関数でサポートしています。

アルファチャンネルは色の不透明度を0（完全に透明）から1（完全に不透明）で定義します。CSSではrgba(255, 0, 0, 0.5)または8桁の16進数表記#FF000080を使用します。opacityプロパティで色から不透明度を分離することもできます。主な違い：rgba()は子要素に影響を与えずにその色だけを透明にします；opacityは要素全体とそのすべての内容に透明度を適用します。

色のコントラストは2色（通常はテキストと背景）の相対的な輝度差です。WCAG 2.1では通常のテキストに最低4.5:1（AAレベル）、大きなテキスト（18pt以上または14pt太字）に3:1のコントラスト比を要求しています。コントラストが不十分だと、弱視や色覚障害のある人が読みにくくなります。ChromeのアクセシビリティパネルやwebAIMコントラストチェッカーでコントラスト比を測定できます。

WebデザイナーとUI/UXデザイナーは、CSS・Figma・Sketch・Adobe XDで作業する際にHEX・RGB・HSL・HSBを変換するのに毎日活用します（ツールごとに好みのフォーマットが異なるため）。フロントエンド開発者は、CSSやTailwindで色を正確に適用したり、視覚的な色がどの数値に対応するかを調べたりするのに使います。グラフィックデザイナー・ブランディングデザイナーは、ブランドパレットをソフトウェア間（Illustrator・Canva・Photoshop）で移行し、すべてのフォーマットで色が同一であることを確認するのに使います。印刷デザイナーは、CMYKへのエクスポート前にRGB（スクリーン）を最も近い相当値に変換するのに使います。アクセシビリティ専門家は、正確な輝度値を取得し、WCAG 2.1ガイドラインに従ってコントラスト比を確認するのに使います。

パソコンでは、Chrome・Firefox・Edgeで Ctrl + D（Windows/Linux）または Cmd + D（Mac）を押すと、すぐにブックマークに追加できます。Mac の Safari では Cmd + D を押すか、「ブックマーク」→「ブックマークを追加」で登録します。Android（Chrome）では、右上の3点メニュー（⋮）をタップし「ホーム画面に追加」または「ブックマークに追加」を選択します。iPhone/iPad（Safari）では、共有ボタン（□↑）をタップして「ホーム画面に追加」を選択します。ブックマークに登録しておけば、デザインでHEX値を見つけてCSSのRGB値が必要になったとき、1クリックで変換できます。

色の変換に加えて、レスポンシブレイアウトのためにサイズ単位（pxからremやem）を変換する必要がある場合は、px・rem・em変換ツールが役立ちます。同じようなCSSのワークフロー向けに作られており、基準サイズを入力するだけで、すぐに換算値が得られます。