カラーコード変換器全形式

カラーコード変換器全形式へようこそ。これは、あらゆる色の値を一度にすべての一般的な形式に変換する無料のオンラインツールです。HEXコード、RGB値、HSLやHSVの定義、CMYKの4色、あるいは CSS の名前付きカラーを貼り付けるだけで、即座に等価な値を読み取り、ライブプレビューのスウォッチを確認し、WCAGアクセシビリティ・コントラストをチェックし、補色、三補色、類似色、ティント、シェードからなるデザイナーパレットを生成できます。

オールインワンのカラー変換器を使用する理由

オンラインの多くのカラー変換器は、一方向（HEX から RGB、または RGB から CMYK）の変換しか処理できないため、全体像が必要な場合に複数のツールを組み合わせる必要があります。この変換器は、単一のフィールドですべての一般的な形式を受け付け、入力された形式を自動検出し、ライブプレビューとともに5つの形式すべてを一度に返します。これにより、Web、モバイル、印刷、デザインツールの間を行き来する際の手順を大幅に節約できます。

サポートされている入力形式

HSLとHSVカラーモデルの違いは何ですか？

HSL と HSV はどちらも、色相（Hue）、彩度（Saturation）、および3番目の明度に関連する値という直感的な3つのチャンネルを通じて色を記述しますが、3番目のチャンネルが異なります。

• HSL — 色相、彩度、明度：明度は 0%（純粋な黒）から 50%（その色相の最も鮮やかなバージョン）を経て 100%（純粋な白）までの範囲です。HSL は色の明暗を対称的かつ予測可能に変えられるため、CSS で好まれます。
• HSV / HSB — 色相、彩度、明度（Brightness）：明度は 0%（純粋な黒）から 100%（その色相の最も彩度が高い完全なバージョン）までの範囲です。HSV は、Photoshop、Figma、およびほとんどのデスクトップデザインツールのカラーピッカーの背後にあるモデルです。

例えば、完全に飽和した赤は HSL では hsl(0, 100%, 50%) ですが、HSV では hsv(0, 100%, 100%) になります。2つの異なる思考モデルにおける同じ色ですが、CSS 作成者として考えるか、画家として考えるかによって、どちらも有用です。

CMYKの値が印刷ソフトと少し違って見えるのはなぜですか？

RGB は画面で使用される加法混色モデルであり、CMYK はプリンターで使用される減法混色モデルです。このツールが実行する数学的変換は、ICC カラープロファイル、インク被覆率の制限、または紙固有の調整を含まない迅速な近似値です。製品の印刷作業では、常にデザインソフトウェアのカラーマネジメントされた CMYK プロファイル（US Web Coated SWOP v2 や Coated FOGRA39 など）に従ってください。デザインの初期段階で「十分に近い」CMYK 値が必要な場合に、この変換器を迅速なリファレンスとして使用してください。

WCAGコントラストチェックはどのように機能しますか？

Web Content Accessibility Guidelines（WCAG）は、2つの色間の相対輝度（緑を赤より、赤を青より重く評価する知覚的明るさモデル）に基づいたコントラスト比を定義しています。比率は 1:1（コントラストなし）から 21:1（純粋な白の上の純粋な黒）までです。

• AAA — 比率 ≥ 7:1。本文テキストの最も厳格なアクセシビリティレベルを満たします。
• AA — 比率 ≥ 4.5:1。ほとんどの規制における本文テキストの最低基準です。
• AA Large — 比率 ≥ 3:1。大きなテキスト（18pt以上または14ptの太字）およびグラフィック UI 要素に十分です。
• Fail — 比率 < 3:1。テキストにはこの組み合わせを使用しないでください。

ツールは純粋な白と純粋な黒に対するコントラストを計算し、この色が背景として使用された場合のデフォルトのテキスト色として最適な選択肢を強調表示します。

変換器はカラーパレットを生成しますか？

はい。変換のたびに、ツールは同じ色相からデザイナーパレットを構築します。これには以下が含まれます：

• 補色 — ホイール上で真反対の色（色相を180°回転）。高コントラストのアクセントに便利です。
• 三補色 — 120°間隔で均等に配置された2つの色。バランスが取れて鮮やかです。
• 類似色 — ±30°の隣接する色相。調和のとれたグラデーションや背景に便利です。
• ティント — 3つの明るいバリエーション（同じ色相、高い明度）。
• シェード — 3つの暗いバリエーション（同じ色相、低い明度）。

パレットのスウォッチをクリックすると即座に変換器に読み込まれ、ブランドカラー、アイコンセット、または UI テーマの迅速な検討に最適です。

ツールの使い方

1. 色を入力または選択する — 入力フィールドに任意の値を入力するか、小さなカラースウォッチをクリックしてブラウザのカラーピッカーを開きます。
2. 変換する — 「変換」ボタンをクリックします。ツールは入力形式を自動検出し、他のすべての形式を計算します。
3. 必要なものをコピーする — 各形式の値の横にあるワンタップコピーボタンをクリックします。ボタンにチェックマークが表示され、クリップボードにコピーされたことが確認できます。
4. アクセシビリティを確認する — 白と黒に対する WCAG コントラスト比を確認し、その色がテキストや背景として読みやすいかどうかを確かめます。
5. パレットを探索する — デザイナーパレットセクションの任意のスウォッチをクリックして変換し、ページを離れることなくデザインの探索を広げます。

実用的なユースケース

Web開発者の場合

• Figma のデザイン案から HEX を hsl() に変換し、CSS カスタムプロパティやモダンなテーマシステムで使用する
• ブランドの HEX カラーから直接、半透明オーバーレイ用の rgba() 値を生成する
• リリース前に、ブランドカラーが白背景で WCAG AA を満たしているか検証する

グラフィックデザイナーの場合

• Webサイトの CSS カラーを、印刷モックアップ用の CMYK 近似値に変換する
• 1つの色から階調スケール（ティントとシェード）を作成する
• ブラウザ上で補色や三補色のアクセントを見つける

UI・プロダクトデザイナーの場合

• デザインドキュメントの作成時に、HSV（Figma のピッカー）と HSL（CSS）を相互変換する
• あらゆる背景に対して、最適なテキスト色（黒か白か）を自動的に特定する
• 結果ページの URL を通じて、変換した色を素早くブックマークしたり共有したりする

最良の結果を得るためのヒント

• セパレーターは柔軟に — パーサーは括弧内のカンマ、スペース、またはスラッシュを受け入れます。したがって、rgb(79 70 229) も rgb(79, 70, 229) と同様に機能します。
• 必要に応じてパーセンテージを使用 — rgb(31%, 27%, 90%) も有効です。ツールは内部的にパーセンテージを 0–255 に変換します。
• CSS名前付きカラーを試す — rebeccapurple のようなモダンな追加分を含む、140以上の名前が機能します。
• チャンネルバーを確認する — 赤/緑/青および CMYK チャンネルの視覚的な内訳により、印刷版の色の主成分を簡単に確認できます。
• CMYKは目安として扱う — 正確な最終値については、カラーマネジメントされた印刷ソフトウェアで結果を確認してください。

よくある質問

HEX値を入力する際に # 記号を含める必要がありますか？

いいえ。#4f46e5 と 4f46e5 の両方を受け付けます。先頭の # は任意です。

4桁および8桁の HEX値（アルファ付き）はサポートされていますか？

パーサーはそれらを受け入れますが、RGB、HSL、HSV、および CMYK の古典的な形式はアルファを保持しないため、変換中にアルファチャンネルは削除されます。ツールは色の部分のみに焦点を当てています。

変換した色を共有したりブックマークしたりできますか？

はい。フォームは GET 経由で送信されるため、URL には変換した色が含まれます。変換後にページの URL をコピーして、正確な結果ページを共有したりブックマークしたりしてください。

一部の HEX値が大文字で表示されるのはなぜですか？

出力では HEX を大文字（例: #4F46E5）に統一しています。これは多くのデザインガイドやブランドスタイルガイドで使用されている慣習です。小文字で入力し直しても等価として扱われます。

モバイルデバイスでも動作しますか？

はい。インターフェースは完全にレスポンシブであり、フォーム、パレット、コントラストカードは小さな画面ではシングルカラムのレイアウトに再配置され、快適なタッチ操作が可能です。

追加リソース

• HSL と HSV - Wikipedia
• CMYKカラーモデル - Wikipedia
• WCAG 2.1 コントラスト（最低限）の要件