カラーコンバーター
HEX、RGB、HSLを変換
カラーコンバーター の使い方
HEX、RGB、HSLを変換 無料オンラインツール、登録不要、広告なし。今すぐ無料でお使いいただけます。
カラーコンバーターが必要な場面
デジタルデザインにおける色は複数のフォーマットで存在し、それぞれ異なるコンテキストに適しています。Webデザイナー、フロントエンド開発者、グラフィックデザイナーが異なるツールとプラットフォームで作業する際、フォーマット間の変換は日常的な作業です。
- CSS開発：デザインツールはHEX（#7B35F5）でエクスポートしますが、CSSはRGB（rgb(123,53,245)）やHSL（hsl(264,91%,58%)）も受け付けます。コードの一貫性を保つためにCSSの構文を変換します。
- ブランドカラーの一貫性：コーポレートカラーはWeb用HEX、印刷用CMYK、スクリーン用RGBで正確に表現される必要があります。すべての媒体で色が正確に一致するよう変換します。
- アクセシビリティ：HSLは色相を維持しながら輝度を調整しやすく、十分なコントラストを持つアクセシブルなカラーバリアントを作成するのに役立ちます。JIS X 8341（WCAG準拠）に対応したデザインに重要です。
- デザインからコードへの受け渡し：FigmaやAdobe XDはHEXでエクスポートします。一部の開発者は直感的な色相/彩度/明度モデルからHSLを好みます。
- 印刷物の準備：スクリーンカラー（RGB）は印刷物にはCMYKに変換する必要があります。RGBはCMYKより広いカラーガマットを持ち、スクリーン上の一部の鮮やかな色は印刷では再現できません。
フォーマットの概要：HEX（#RRGGBB）は簡潔でWeb用に普遍的。RGB（チャンネルごとに0〜255）はスクリーンのネイティブフォーマット。HSL（色相0〜360°、彩度0〜100%、輝度0〜100%）は人間が最も直感的に理解しやすい。CMYK（チャンネルごとに0〜100%）はプロフェッショナル印刷用。
Frequently Asked Questions
RGBとRGBAの違いは何ですか？
RGBAはRGBに透明度（アルファ）チャンネルを追加します：rgba(123,53,245,0.5)は50%透明の紫です。アルファ値は0（完全に透明）から1（完全に不透明）の範囲です。HEXは8桁表記でアルファをサポートします：#7B35F580（16進数の80=50%の不透明度）。
なぜRGBとCMYKは異なるカラーガマットを持つのですか？
RGBは加法混色で赤・緑・青の光を混ぜると白（スクリーン用）になります。CMYKは減法混色でシアン・マゼンタ・イエロー・ブラックのインクを混ぜると光を吸収します（印刷用）。RGBはCMYKが印刷で再現できる範囲より鮮やかな色を表現できます。
HSLとは何ですか？なぜ便利なのですか？
HSL（色相、彩度、輝度）は人間にとって直感的に設計されています。色相は色（0°=赤、120°=緑、240°=青）。彩度は強度（0%=グレー、100%=鮮やか）。輝度は明るさ（0%=黒、50%=純粋な色、100%=白）。色相を変えずに明るくしたり暗くしたりするにはLの値を変えるだけです。
HEXからRGBに手動で変換するには？
6桁のHEXを3組のペアに分け、各ペアを16進数から10進数に変換します。#7B35F5：7B=123（赤）、35=53（緑）、F5=245（青）→rgb(123,53,245)。変換ツールが即座にこれを行いますが、仕組みを理解するとコードで直接HEX値を読み取りやすくなります。
カラープロファイル（sRGB、AdobeRGB、Display P3）とは何ですか？
カラープロファイルはデバイスが表示できるカラーガマットを定義します。sRGBはWebと一般的なモニターの標準。AdobeRGBは約50%広い可視スペクトルをカバーし、プロの写真に使われます。Display P3（Appleデバイス）はsRGBより約25%広く、最新iPhoneなどで対応しています。
カラーコンバーター vs カラーピッカー vs パレットジェネレーター
カラーコンバーターは既存のカラー値をフォーマット間で変換します。カラーピッカー（ブラウザのDevTools、OSのカラーピッカー）は視覚的に色を選択して値をエクスポートできます。パレットジェネレーターはカラー理論を使ってベースカラーからハーモニーのある色の組み合わせを作成します。コントラストチェッカーは色の組み合わせがWCAGアクセシビリティ基準を満たすか確認します。4つはすべてデザイナーのワークフローで補完的に使われます。