HEX・RGB・HSLを相互に変換、プレビューつき
HEX・RGB・HSLの3つの形式でカラーコードを相互に変換します。カラーピッカーで色を選ぶか値を入力すると、プレビューとすべての形式が表示されます。
このページの変換ツールはHEX・RGB・HSLに対応しており、CMYKは扱いません。CMYKは印刷用の色の表し方で、画面で使うRGBとは表現できる色の範囲が違うため、正確に変換するには印刷用のカラープロファイルが必要です。
Pantoneは特色のため計算式では正確に変換できず、CMYK値に最も近い色番号を色見本やPantoneのカラーライブラリから探すことになります。数値変換の結果はあくまで目安として扱い、最終判断は印刷見本で行ってください。
RGBを最大値で割って正規化し、最大成分と最小成分の差から彩度(S)を、最大成分がどの色かで色相(H)を、最大成分そのものから明度(V)を求めます。差がゼロなら無彩色となり、色相は未定義として扱います。
印刷所が指定するカラープロファイルを使って変換し、蛍光色や鮮やかな青緑などRGBでしか表現できない色は事前に調整しておきます。変換後は、必ずプレビューや色校正で仕上がりを確認してください。
画像編集ソフトでファイルを開き、カラーモードやドキュメント情報の表示でCMYKになっているかを確認します。ファイルのプロパティやプリフライトチェック機能でも、カラースペースを調べられます。
PNGの仕様はRGBとグレースケールのみを扱うため、CMYKで保存することはできません。印刷用にCMYKデータが必要なら、TIFFやPDF、EPSなどの形式で書き出してください。
画像編集ソフトでカラーモードをCMYKに変換したうえでJPEGとして書き出せば保存できます。ただし、ブラウザなどCMYKのJPEGを正しく表示できない環境もあるため、印刷用途に限って使うほうが無難です。
Webデザイン、フロントエンド開発、グラフィックデザインに携わる方なら、異なるカラーフォーマット間での変換作業は日常茶飯事です。この無料のカラーコンバーターは、HEX・RGB・HSLのカラーコードを瞬時に相互変換でき、ライブプレビューとカラーピッカー機能も備えています。面倒な手動計算から解放され、より効率的なカラーワークフローを実現しましょう。
デジタルの世界では、色は複数のシステムで表現されます。それぞれのフォーマットには固有の特性と適した用途があり、状況に応じて使い分けることが重要です。各フォーマットの違いを理解することで、より正確で効率的な作業が可能になります。
HEXカラーコードは、6桁の16進数に「#」を付けた形式で色を表現します。例えば、#E74C3Cは鮮やかな赤色を表します。CSSやHTMLでの標準フォーマットとして広く普及しており、ほぼすべてのWebプロジェクトで使用されています。最初の2桁が赤、次の2桁が緑、最後の2桁が青の強度をそれぞれ示します。
RGB（赤・緑・青）モデルは、0〜255の数値3つで色を表現します。例えば、rgb(231, 76, 60)はHEXの#E74C3Cとまったく同じ色を指します。このフォーマットはプログラミング言語や画像編集ソフト、そして現代のCSSで広く活用されています。各チャンネルの値を直接操作できる点が開発者に好まれる理由です。
HSL（色相・彩度・明度）モデルは、人間が色を認識する方法に最も近い形式です。色相（H）は0〜360度、彩度（S）と明度（L）はパーセントで表されます。例えば、hsl(6, 78%, 57%)は、直感的に「やや彩度が高く、中程度の明るさの赤」と読み取れます。デザイナーがカラーパレットを構築する際に特に重宝するフォーマットです。
ツールは使いやすさを最優先に設計されています。以下の手順で簡単に利用できます：
すべてのフィールドは完全に同期されています。どのフォーマットの値を変更しても、他のフォーマットが即座に更新されるため、ボタンを押す必要もありません。
よくある状況：デザイナーがFigmaからRGB形式で色を渡してくれたが、CSSファイルにはHEX形式が必要なケースです。このコンバーターなら数秒で解決できます。例えば、rgb(52, 152, 219)を入力するだけで、自動的に#3498DBへ変換されます。デザインと開発間のスムーズな連携に欠かせないツールです。
iOSのSwiftやAndroidのKotlinでは、色の記述方式が異なる場合があります。FigmaやAdobe XDから書き出したデザインを実装コードに落とし込む際、カラーコンバーターはモバイル開発者にとって必須のツールです。
ブランドカラーを定義する際には、Web・印刷・SNSなど複数のメディアに対応するため、複数のフォーマットで色を記録する必要があります。カラーコンバーターを使えば、同じ色があらゆる媒体で正確かつ一貫して再現されることを確認できます。
インターフェイスデザインでは、HSLモデルが特に活躍します。プライマリカラーの明るいバリエーションや暗いバリエーションを作成したい場合、HSLの明度値を調整するだけで望む色が得られ、対応するHEXコードも即座に確認できます。デザインシステム構築において非常に効率的な手法です。
内蔵されたカラーピッカー機能を使えば、カラーコードを知らなくても視覚的に色を選択できます。カラーパネル上の任意の場所をクリックするだけで、HEX・RGB・HSLの値がすべて自動生成されます。数値よりもビジュアルで直感的に作業したい方に最適な機能です。
ライブプレビュー機能は、選択した色をリアルタイムで表示します。異なる色調を比較しながら、プロジェクトに適用する前に正確な色を確認できます。余計な修正作業を減らし、作業効率を大幅に向上させます。
HEXは色を16進数のコンパクトな形式で表現したもので、HTMLやCSSで広く使われています。RGBは同じ色を赤・緑・青それぞれの強度として3つの数値で表します。どちらも同じ色を表現していますが、記述フォーマットが異なります。
HSLは色を直感的に調整したい場合に特に便利です。色を明るくしたり、彩度を上げたりしたい場合、HSLの値を変更するだけで簡単に実現できます。RGBやHEXで同じことをしようとすると、はるかに複雑な計算が必要になります。
はい、カラーコンバーターは完全無料です。アカウント登録や支払いは一切不要で、制限なく何度でも利用できます。
はい、このツールは完全にレスポンシブ対応しており、スマートフォン・タブレット・PCのあらゆるモダンブラウザーで正常に動作します。
現在はHEX・RGB・HSLの3フォーマットに対応しています。アルファチャンネルを含むRGBAおよびHSLA形式のサポートは、将来のアップデートで追加予定です。