カラーコンバーター
カラーコンバーターは、HEX、RGB、HSL、HSV、CMYKのカラー値をリアルタイムで相互変換し、グラデーションスライダー付きの対話型HSLピッカーと、SVGカラーホイール上に補色・類似色・トライアド・スプリットコンプリメンタリー・テトラディック配色を表示するハーモニーパレット生成機能を搭載しています。無料・登録不要。
#FF5733255, 87, 5110.6°, 100%, 60%10.6°, 80%, 100%0%, 65.9%, 80%, 0%#FF5733rgb(255, 87, 51)hsl(10.6, 100%, 60%)ご提案はありますか？
新しいツールのリクエストや改善提案をお待ちしています — Slackコミュニティにご参加ください！
カラーコンバーターとは？
カラーコンバーターは、Webデザイン、グラフィックデザイン、印刷で使用されるさまざまなフォーマット間でカラー値を変換するツールです。HEXコード（#FF5733）はHTML/CSSの標準、RGB（255, 87, 51）は赤・緑・青の強度を0〜255で定義する画面表示用、HSL（11°, 100%, 60%）は色相・彩度・明度で直感的な調整が可能、HSV（11°, 80%, 100%）はPhotoshopなどのデザインツールで使用され、CMYK（0%, 66%, 80%, 0%）は印刷の標準です。本ツールは5つすべてのフォーマットに対応し、即時プレビュー、グラデーションスライダー付き対話型カラーピッカー、SVGカラーホイール上に補色・類似色・トライアド・スプリットコンプリメンタリー・テトラディック配色を視覚化するハーモニーパレット生成機能を備えています。
カラーコンバーターの使い方
- 入力フォーマット（HEX、RGB、HSL）を選択してカラー値を入力すると、他のすべてのフォーマットへの変換結果が即座に表示されます
- 「カラーピッカー」タブで色相・彩度・明度スライダーを使って視覚的にカラーを選択できます
- 「パレット」タブに切り替えてベースHEXカラーを入力するとハーモニーパレットが生成されます
- 配色タイプ（補色、類似色、トライアド、スプリットコンプリメンタリー、テトラディック）を選んで、カラーホイール上に配色を表示します
- 各値の横にあるコピーボタンをクリックするか、「すべての値をコピー」で結果全体をクリップボードにコピーします
よくある質問
HEXとRGBのカラーフォーマットの違いは何ですか？
HEXとRGBは同じ情報を異なるフォーマットで表現しています。HEXは6桁の16進数文字列（#RRGGBB）で、各ペアが赤・緑・青の値を00〜FFで表します。RGBは0〜255の10進数値を使用します。例えば、#FF5733はrgb(255, 87, 51)と同等です。HEXはコンパクトでCSSで広く使われ、RGBはより人間が読みやすい形式です。
RGBの代わりにHSLを使うべき場面は？
HSL（色相・彩度・明度）は、色相を回転させて色を変更でき、彩度で鮮やかさを調整し、明度で明るさを制御できるため、デザイン作業において直感的です。任意の色の暗いシェードを作るには明度を下げるだけで済み、パステル調にするには彩度を下げて明度を上げます。RGB値ではこのような調整を直感的に行うのが難しくなります。
CMYKとは何ですか？なぜRGBと異なるのですか？
CMYK（シアン・マゼンタ・イエロー・キー/ブラック）は印刷デザインに、RGBは画面表示に使用されます。RGBは加法混色（光ベース：すべての色を合わせると白になる）で、CMYKは減法混色（インクベース：すべての色を合わせると黒になる）です。画面はプリンターが再現できるより広い色域を表示できるため、両者を変換すると色が異なって見える場合があります。
カラーハーモニーパレットはどのように機能しますか？
カラーハーモニーは、カラーホイール（HSL色相環）上の位置関係に基づいています。補色は180°離れた色、類似色は30°離れた色、トライアドは120°離れた色、スプリットコンプリメンタリーは150°と210°のオフセット、テトラディックは90°間隔の4色を使用します。これらの関係は、視覚的にバランスの取れた美しい配色を生み出し、デザイン、ブランディング、UIの分野で活用されています。