無料オンラインカラーコンバータ — HEX, RGB, HSL, CMYK

HEX、RGB、HSL、CMYKの形式間で色を瞬時に変換。この無料のカラーコンバータは、ウェブデザイン、印刷、グラフィックデザインのワークフローで使用できるライブプレビュー機能と双方向変換を提供します。

カラーコンバータとは？

カラーコンバータは、デジタルおよび印刷デザインで使用されるさまざまな形式の色値を変換します。ウェブ開発者はHEXとRGBを使用し、デザイナーはHSLで直感的な色調整を行い、印刷生産ではCMYKに依存します。

手動で変換を計算したり、デザインツールを開いたりする必要はありません。このコンバータは、一度にすべての形式を表示し、ライブプレビューで実際に使用している色を正確に確認できます。

このカラーコンバータの使い方

1. 色を入力 — HEX値を入力、またはRGB、HSL、CMYKの数値を入力します。
2. すべての形式を確認 — 他の形式は即座に更新されます。
3. 必要なものをコピー — 任意の形式のコピーボタンをクリックします。
4. プレビューを使用 — 色のスウォッチが正確な色とコントラストラベルを表示します。

主な機能

機能	利点
4形式サポート	HEX、RGB、HSL、CMYK — すべて一度に
双方向変換	任意の形式を編集すると、他の形式も更新
ライブプレビュー	正確な色をHEXラベル付きで表示
形式ごとのコピーボタン	各形式のワンクリックコピー
印刷用CMYK	印刷生産用の正確なCMYK値を取得

カラーフォーマットの理解

HEX

16進数表記は、赤、緑、青の値を表す6文字（0-9、A-F）を使用します：

• #FF0000 = 最大の赤色
• #3B82F6 = Tailwind CSSのblue-500

CSS、HTML、デザインツールでよく使用されます。常に#で始まります。

RGB（Red, Green, Blue）

加法的カラーモデルで、各チャンネルは0から255の範囲です：

• rgb(255, 0, 0) = 純粋な赤
• rgb(59, 130, 246) = Tailwind blue-500

CSS（rgb()関数）とほとんどのプログラミングコンテキストで使用されます。

HSL（Hue, Saturation, Lightness）

色調整に直感的なモデルです：

• Hue（0-360）：色輪上の位置（0=赤、120=緑、240=青）
• Saturation（0-100%）：色の強さ（0%=グレー、100%=完全な色）
• Lightness（0-100%）：明るさ（0%=黒、50%=通常、100%=白）

CSS（hsl()関数）で使用され、デザイナーがカラーパレットを作成するときに好まれます。

CMYK（Cyan, Magenta, Yellow, Key/Black）

印刷生産に使用される減法的カラーモデルです：

• 各値は0%から100%の範囲
• 紙上のインクのカバー率を表す
• CSSでは直接使用できません（ブラウザは内部でRGBを使用）

プロフェッショナルな印刷用のデザイン準備に不可欠です。

カラーフォーマットの比較

フォーマット	使用ケース	例	範囲
HEX	ウェブCSS、HTML	#3B82F6	チャンネルごとに00-FF
RGB	ウェブCSS、プログラミング	rgb(59, 130, 246)	チャンネルごとに0-255
HSL	デザイン、CSS	hsl(217, 91%, 60%)	H: 0-360、S/L: 0-100%
CMYK	印刷生産	cmyk(76%, 47%, 0%, 4%)	チャンネルごとに0-100%

実際の使用例

ウェブ開発

CSSにHEXまたはrgb()値を直接コピーします。HSLは、ホバー状態の明るさを変更するためのカラースケール生成に適しています。

デザインシステム

ブランドカラーをさまざまな形式間で変換します。フィギマからHSLを取得したデザイナーがいます — CSS用にHEXが必要です。1クリックで完了します。

印刷生産

印刷機に送る前に、画面の色をCMYKに変換します。一部の鮮やかなRGB色はCMYKで完全に再現できません（CMYKの「範囲」は小さい）。

アクセシビリティ

HSLの明るさ値を使って、色がWCAGのコントラスト要件を満たしているかを確認します。明るさが50%に近い色は、最も高い視覚的コントラストを持つ傾向があります。

カラー作業のヒント

ヒント	説明
HSLでパレットを作成	ハイを固定し、サチュレーションと明るさを変更して調和したカラースケールを作成します。
短いHEXを使用	#3BFは#33BBFFの略です。このコンバータは両方をサポートしています。
CMYKの範囲に注意	明るい青や緑はCMYKに変換されたときに変化することがあります。常に印刷テストを行ってください。
CSSはすべての形式をサポート	現代のCSSはHEX、rgb()、hsl()をすべてサポートしています。
透明度を指定	rgba()またはhsla()を使用して透明度を設定します。

よくある質問

Q: CMYKとRGBの違いは何ですか？

A: CMYKは印刷用に設計されており、RGBはディスプレイ用に設計されています。CMYKでは、色の範囲がRGBより狭くなります。

Q: なぜライブプレビューが必要ですか？

A: ライブプレビューは、変換後の色を即座に確認できるため、デザインの精度を高めます。

Q: すべてのブラウザでHSLがサポートされていますか？

A: はい、すべての現代のブラウザでHSLがサポートされています。ただし、古いブラウザでは互換性に注意が必要です。

Q: カラーコンバータで透明度を指定できますか？

A: はい、rgba()またはhsla()を使用して透明度を指定できます。

Q: なぜCMYKの範囲に注意する必要がありますか？

A: CMYKでは、RGBより少ない色を再現できるため、色の正確な表現に注意が必要です。印刷テストを行うことを推奨します。