Color Converter：HEX・RGB・HSL・CMYK

Color Converter とは？

Color Converter は、HEX、RGB、HSL、HSB（HSV）、CMYK の 5 つの主要なカラーフォーマット間でカラーを即座に変換する無料のオンラインツールです。対応するフォーマットで任意のカラー値を貼り付けるか入力すると、ツールが自動的に入力内容を検出し、他のすべての表現をリアルタイムで同時に表示します。Figma の HEX 値と CSS の HSL 関数を切り替えたり、画面の RGB 値を印刷の CMYK パーセンテージに変換したりといった日々の手間を、電卓に値をコピーする手間なく解消します。すべての変換はサーバー不要でブラウザ内でローカルに処理されます。

主な機能

• HEX・RGB・HSL・HSB・CMYK 間の変換 — 有効なカラーが入力されると同時に 5 つのフォーマットがすべて表示されます。ソースは hex、rgb、hsl、hsb、cmyk のステートオブジェクトを同期して保持する useColorConversion フックを使用しています。
• 入力フォーマットの自動検出 — テキストエリアが HEX（# で始まる値または /^[0-9a-f]{3,8}$/i に一致する値）、RGB（rgb プレフィックス）、HSL（hsl プレフィックス）を自動的に検出し、「Detected: HEX」（または RGB/HSL/Auto）と表示するバッジを表示します。
• 入力中のリアルタイム変換 — 解析可能な値を生成するキー入力のたびに、5 つの出力フォーマットすべての即座な再レンダリングが発生します。ボタンを押す必要はありません。
• 任意のフォーマットをクリップボードにコピー — 各フォーマット行にはコピーボタンがあり、コピー成功後 2 秒間緑のチェックマークを表示します。トースト通知でアクションを確認します。
• ビジュアルカラープレビュー — 大きなプレビューボックスが現在のカラーで塗りつぶされ、輝度に基づいて自動コントラストのテキスト（黒または白）で hex 値を表示します。
• RGB・HSL・HSB・CMYK の数値入力 — 手動調整パネルで個別チャンネルを微調整できます。R・G・B（0～255）、H（0～360）・S（0～100）・L（0～100）（HSL 用）、H（0～360）・S（0～100）・B（0～100）（HSB 用）、C・M・Y・K（0～100）（CMYK 用）、いずれも有効な範囲にクランプされます。
• 共有可能な URL — ツールは現在のカラーを URL にエンコードする useShareableState フックを使用し、特定のカラー変換への直接リンクを可能にします。
• 読み込み後はオフラインで動作 — 変換中のネットワークリクエストなし。完全な変換ライブラリはページにバンドルされています。

使い方

ステップ 1：カラーを入力する

Color Converter を開きます。入力カードの左半分にテキスト入力フィールドがあります。次のいずれかを貼り付けます。

• hex 値：#3B82F6
• RGB 関数：rgb(59, 130, 246)
• HSL 関数：hsl(217, 91%, 60%)
• 素の hex 文字列：3b82f6（# なし）

認識可能な値を入力または貼り付けると、入力フィールドの右上に小さなバッジが表示されます（例：「Detected: HEX」）。カードの右半分に検出されたカラーが即座に表示されるライブカラープレビューボックスが表示されます。

あるいは、プレビューボックスの下にあるネイティブカラーピッカーを使用することもできます。四角のスウォッチをクリックするとブラウザのカラーチューザーが開き、カラーを選択すると入力が設定され、すべてのフォーマットが同時に更新されます。

ステップ 2：すべてのフォーマットを確認する

入力カードの下に「All Formats」カードが 5 行を一覧表示します。

各行にはフォーマットラベル、等幅フォントでフォーマットされた値、コピーアイコンボタンが表示されます。任意のコピーボタンをクリックしてその特定の値をクリップボードに配置します。

ステップ 3：数値入力で微調整する

テキスト入力の下に、4 つの調整可能なカラーモデルすべてに対する直接の数値入力があります。

• RGB：R・G・B とラベル付けされた 3 つの数値入力 — それぞれ 0 ～ 255 の値を受け付け、有効な範囲にクランプされます。
• HSL：H（0～360）・S（0～100）・L（0～100）とラベル付けされた 3 つの数値入力。
• HSB：H（0～360）・S（0～100）・B（0～100）とラベル付けされた 3 つの数値入力。
• CMYK：C・M・Y・K とラベル付けされた 4 つの数値入力 — それぞれ 0 ～ 100 の値を受け付けます。

任意の入力を変更すると hex ステートが更新され、5 つの出力フォーマットすべてに即座に伝播します。目標の色相角、彩度パーセンテージ、または CMYK 値がわかっていて CSS 用の同等の hex が必要な場合に便利です。

ステップ 4：変換された値をコピーして使用する

必要なフォーマットの横にあるコピーボタンをクリックします。ボタンアイコンがクリップボードアイコンから 2 秒間緑のチェックマークに切り替わります。画面下部に成功トーストが表示されます。

ツールは HistoryPanel（Premium）でも変換の履歴を追跡します。履歴エントリを復元すると、入力が保存された hex 値に設定され、すべての変換が再実行されます。

ステップ 5：特定のカラーを共有する

カラーを変更するたびに URL が自動更新されます（useShareableState 経由）。特定のカラーへの直接リンクを共有するにはブラウザの URL をコピーします。リンクを開いた受信者には「Loaded from shared link」トーストが表示され、すべてのフォーマットで共有されたカラーがプリロードされます。

実用例

Figma のデザイントークンを CSS に変換する

デザイナーがブランドバイオレット #8467C7 を提供します。開発者は CSS の color-mix() 関数用に HSL 値が必要です。Color Converter を開いて #8467C7 を入力すると、HSL 行に即座に hsl(261, 40%, 59%) が表示されます — 貼り付け準備完了です。

印刷カラーをウェブ用に変換する

印刷会社がコーポレートブルーを cmyk(76%, 47%, 0%, 4%) として指定します。テキスト入力の自動検出は生の CMYK 記法を認識しませんが、CMYK 数値入力パネルを使って直接値を入力できます。C を 76、M を 47、Y を 0、K を 4 に設定します。HEX・RGB・HSL の出力がリアルタイムで更新され、ウェブ用の値が即座に得られます。

ダークモードパレットを作成する

開発者がダークテーマを構築しており、明るいカラーを暗いバリアントに変える必要があります。#E2E8F0（ライトスレート）を入力し、HSL が hsl(214, 32%, 91%) であることを確認したあと、L チャンネル入力を 91 から 25 に手動で下げてダーク相当色を取得します。HEX 出力が #253443 に更新されるので、それを直接コピーします。

ヒントとベストプラクティス

# なしで入力するとより速く入力できます。 自動検出の正規表現は 3b82f6 のような素の hex 文字列を HEX フォーマットとして一致させます。ハッシュを取り除いたデザインツールから直接貼り付けることができます。

正確なチャンネル制御には RGB 入力を使用します。 正確な赤の値が 200 のカラーが必要な場合は、正しい hex プレフィックスを探すのではなく、R 入力に直接入力します。最小/最大クランプにより、誤って範囲外の値を入力することを防ぎます。

共有可能な URL でカラーをブックマークします。 カラーは useShareableState を通じて URL にエンコードされるため、頻繁に参照するブランドカラーをブックマークし、値を再入力せずに即座に再開できます。

検出バッジは素早い有効性チェックです。 入力後にバッジが表示されない場合、入力が有効なカラーとして認識されていません。タイプミスを確認してください — よくある間違いには # の欠落、アルファチャンネルを含む rgba の使用（現在は解析されません）、パーセンテージベースの RGB 値の入力などがあります。

4 つのカラーモデルすべてに編集可能な入力があります。 RGB・HSL・HSB・CMYK はすべて専用の数値入力パネルを持っています。任意のモデルから値を直接調整して開始でき、他のフォーマットはリアルタイムで更新されます。

よくある問題とトラブルシューティング

入力後に出力行に何も表示されません。 入力テキストが有効なカラーとして認識されていません。parseColorToHex 関数は # hex、素の hex、rgb()、hsl() 文字列を処理します。別のフォーマットを入力した場合（CSS カラー名 cornflowerblue など）、自動検出が null になり変換は行われません。代わりに hex 値を使用してください。

RGB 入力が 255 を超える値を受け付けます。 コードは変更時に Math.min(255, Math.max(0, val)) に値をクランプするため、300 を入力すると入力が処理された時点で 255 にスナップされます。これは想定された動作です。

HSL の色相入力が 360 でラップします。 色相フィールドは Math.min(360, Math.max(0, val)) にクランプされます。361 を入力すると 360 に設定され、-1 を入力すると 0 に設定されます。

コピーボタンが反応しません。 navigator.clipboard.writeText が失敗した場合（例：安全でないコンテキストや制限されたコンテキスト）、ツールは一時的な textarea 要素を使用して document.execCommand('copy') メソッドにフォールバックします。両方が失敗した場合は、ブラウザがサイトのクリップボード権限を持っているか確認してください。

「Loaded from shared link」トーストが予期せず表示されます。 このトーストは isFromUrl が true の場合に一度表示され、URL クエリ文字列にカラーがエンコードされていることを意味します。ブックマークした URL を開いた場合は想定された動作です。hasShownShareToast ref ガードにより、トーストはページロードごとに一度だけ表示されます。

プライバシーとセキュリティ

Color Converter はすべての変換を JavaScript の計算でローカルに処理します。カラー値、入力テキスト、変換結果はいずれもサーバーに送信されません。共有可能な URL はカラーをブラウザの URL にのみエンコードします — リンクを共有することを選択しない限り、どこにも送信されません。ツールはコピー操作に Web Clipboard API を使用しており、これも完全にローカルです。最初のページ読み込み後は完全にオフラインで動作します。

よくある質問

Color Converter は無料ですか？

はい、アカウント不要で完全無料です。5 つの変換フォーマット、ビジュアルカラーピッカー、RGB と HSL の手動入力、クリップボードコピー、共有可能な URL はすべてのユーザーが無料で利用できます。PresetsPanel や HistoryPanel などの Supporter 機能は、30 日間のアクセスに $5 の Ko-fi アクティベーションが必要です。

Color Converter はオフラインで動作しますか？

はい。ページが一度読み込まれると、すべての変換ロジックが外部リクエストなしに JavaScript で完全に実行されます。ネットワーク接続を切断しても中断なくカラーの変換を続けることができます。

Color Converter でデータは安全ですか？

はい。カラー値はブラウザのメモリのみで処理されます。何もサーバーに送信されません。共有可能な URL はクライアント側でカラーをエンコードします — Glyph Widgets のサーバーは作業した特定のカラーをログに記録しません。

Color Converter はどのフォーマットをサポートしていますか？

ツールは 5 つのフォーマットをサポートします：HEX（# あり/なしの 3 桁または 6 桁の hex 文字列）、RGB（rgb(R, G, B) 表記）、HSL（hsl(H, S%, L%) 表記）、HSB/HSV、CMYK。5 つのフォーマットすべてに直接値調整のための専用数値入力パネルがあります。

HSL と HSB の違いは何ですか？

どちらも色相（0～360 度）と彩度（0～100%）を使用しますが、第 3 チャンネルが異なります。HSL は輝度を使用し、50% が完全に飽和したカラー、100% が常に白です。HSB（HSV とも呼ばれる）は明度/値を使用し、100% が最も純粋な色相、0% が常に黒です。Figma やほとんどのデザインツールは HSB を表示し、CSS は HSL を使用します。

CMYK を HEX に変換できますか？

テキスト入力の自動検出は生の CMYK 記法を解析しませんが、CMYK 数値入力パネルを使用して C・M・Y・K の値を直接入力できます。CMYK 値を調整すると HEX を含む他のすべてのフォーマットがリアルタイムで更新されます。

CMYK 変換が印刷値と少し異なって見えるのはなぜですか？

画面から印刷への変換はカラープロファイルに依存します。ツールは ICC プロファイル補正なしの標準的な sRGB から CMYK の数式を使用しています。印刷制作作業には、プリンターと用紙に対応した正しい ICC プロファイルを適用するカラーマネジメントツールを使用してください。

#F0F のような 3 桁の短縮 hex 値を入力できますか？

はい。parseColorToHex 関数は /^[0-9a-f]{3,8}$/i に一致する hex 文字列を検出し、これには 3 桁の短縮形が含まれます。#F0F は #FF00FF と同等として扱われます。

同僚に特定のカラーを共有するにはどうすればいいですか？

ツールでカラーを変更し、ブラウザの URL をコピーします。現在の hex 値は useShareableState を通じて URL クエリ文字列にエンコードされています。同僚がリンクを開くと、「Loaded from shared link」通知とともにカラーがすべてのフォーマットにプリロードされた状態で表示されます。

Color Converter はアルファ（RGBA / HSLA）をサポートしていますか？

現在のバージョンではサポートしていません。入力パーサーは rgb() と hsl() を処理しますが、rgba() や hsla() は処理しません。アルファチャンネルの値は変換パイプラインで保持されません。完全なアルファサポートが必要な場合は、RGB または HSL の値を手動で抽出してアルファを別途処理してください。

関連ツール

• Color Picker — アップロードした画像や画面から直接カラーをサンプリングし、結果をコンバーターに送ります。
• Contrast Checker — 変換した 2 色が WCAG AA または AAA のコントラスト要件を満たしているか確認します。
• 近日公開: Palette Generator — ベースカラーから調和のとれたカラーパレットを生成し、各スウォッチを希望のフォーマットに変換します。

今すぐ Color Converter を試す：Glyph Widgets Color Converter