ナレッジハブ・技術ガイド
カラーコード相互変換（HEX・RGB・HSL・CMYK）
カラーコード相互変換（HEX・RGB・HSL・CMYK）
本ツールは100%クライアントサイド（ブラウザ内）で動作します。写真、動画、音声、PDFファイルが外部サーバーにアップロードされることは一切なく、お使いの端末のメモリ内で安全に処理されます。
コアアーキテクチャ & 計算式
RGB(r,g,b) ➔ Hue ➔ Saturation ➔ Lightness ➔ Base Format Array
Converting between spaces requires floating point math. For example, converting RGB to HSL requires identifying the maximum and minimum RGB values to calculate perceived luminance before extracting the angular hue.
ベストプラクティスとガイドライン
- Use CMYK for Physical Print: The RGB color space uses emitted light, meaning it can create neon, hyper vibrant colors that are physically impossible to replicate using CMYK ink on paper. Always convert and preview in CMYK before printing.
- Use Complementary Schemes for Call to Actions (CTAs): A complementary color sits directly across the color wheel. If your brand is primary Blue, a complementary Orange button will create the highest possible optical contrast.
- Beware of Saturation Traps in HSL: Scaling the lightness down in HSL while keeping saturation at 100% often creates muddy, hyper saturated colors. Pro designers naturally decrease saturation slightly as colors get darker.
よくある質問 (FAQ)
What is HSV vs HSL?
HSV stands for Hue, Saturation, Value, where 100% Value is pure color. HSL stands for Hue, Saturation, Lightness, where 100% Lightness is pure white. CSS uses HSL, not HSV.
Why did my CMYK conversion look dull?
The CMYK color gamut is physically smaller than the RGB gamut. Extremely vibrant blues and greens in RGB simply cannot be mixed using standard Cyan, Magenta, Yellow, and Black inks, so the converter clamps them to the nearest printable equivalent.
What is an Analogous color scheme?
An analogous scheme uses three colors that are situated directly next to each other on the color wheel (e.g., Red, Red-Orange, Orange). It creates a very harmonious, low contrast aesthetic.