カラーコンバーター

HEX、RGB、HSLのいずれかの値を貼り付けるだけで、3つのフォーマットすべてで即座に変換されます。ライブスウォッチで、コードに適用する前に正確な色を確認できます。

このツールは役に立ちましたか？

カラーコンバーターとは？

カラーコンバーターは、HEX・RGB・HSLの各カラーモデル間で色を変換します。CSS、デザインツール、カラー理論を扱うWeb開発者やデザイナーに必須です。ライブプレビューのスウォッチ付き。

この計算機を使用するタイミング

デザイナーのFigmaやSketchのカラースペシフィケーションをCSS互換の値に変換するとき
デザインシステムを構築し、HEX、RGB、HSLフォーマット全体で一貫した色の値が必要なとき
HSLを使用してカラーパレットやスキームを作成し、一貫した彩度と明度を維持するとき
アクセシビリティ準拠（WCAG AA/AAA基準）のためのカラーコントラストを確認するとき
既存コードのレガシーカラー値を一貫性のために別のフォーマットに変換するとき
異なるフォーマットで色が実際にどう見えるかを検証してCSSカラーログをデバッグするとき

手順:

Enter a color value in HEX, RGB, or HSL format.
Select the input format using the tabs.
View converted values in all three formats.
See the live color preview swatch.

計算式

HEX → RGB: split #RRGGBB into decimal values RGB → HSL: normalize RGB → find hue/saturation/lightness HSL → RGB: convert via chroma formulas HEX: #RRGGBB (0-255 each) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

ユースケース

Converting CSS color values
Creating color schemes from base colors
Matching design system colors
Understanding color relationships through HSL

主な利点

Convert colors between 3 formats instantly
See live color preview
Copy any format with one click
Free no sign-up needed

プロのヒント

Use HSL for intuitive color adjustments
Use HEX for CSS compatibility
Use the preview to verify your color before using it
Keep a reference of common color conversions

避けるべきよくある間違い

Forgetting the # prefix for HEX colors
Using RGB values above 255 or below 0
Confusing HSL hue range (0-360) with RGB (0-255)

重要な用語の説明

HEX: Hexadecimal RGB representation
RGB: Red Green Blue color model
HSL: Hue Saturation Lightness model
Color space: Mathematical model for colors

例

Input: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Input: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.

結果の解釈方法

この変換ツールは3つのカラーフォーマットをサポートし、3つすべての相当値を同時に表示します。HEX（#RRGGBB）はWeb開発で最も一般的なフォーマットです。RGB（rgb(R, G, B)）は個々のカラーチャネルを直接制御します。HSL（hsl(H, S%, L%)）は人間にとって最も直感的です。色相がカラーファミリーを決定し、彩度が強度を制御し、明度が明るさを制御します。コントラスト比インジケーターは、前景/背景のカラー組み合わせがWCAGアクセシビリティ基準を満たしているかを表示します。AA準拠には通常テキストで4.5:1以上、大型テキストで3:1以上が必要です。AAA準拠には通常テキストで7:1以上、大型テキストで4.5:1以上が必要です。プレビュースウォッチを使用して、適用前にカラーを視覚的に確認してください。