Question 1

カラーフォーマット

Accepted Answer

Web カラーはいくつかのフォーマットで表現できます。HEX、RGB、HSL は CSS やデザインツールで最もよく使われる3つのフォーマットです。それぞれ同じ色を異なる方法で表し、フロントエンド開発のワークフローでは相互変換が不可欠です。

Question 2

HEX、RGB、HSL

Accepted Answer

HEX（#rrggbb）は赤・緑・青の各チャンネルを2桁の16進数（00–ff）でエンコードします。例: #3b82f6。RGB（rgb(r, g, b)）は各チャンネルを0〜255の整数で表します。例: rgb(59, 130, 246)。HSL（hsl(h, s%, l%)）は色相（0–360°）、彩度（0–100%）、明度（0–100%）を使い、より直感的に色を調整できます。例: hsl(217, 91%, 60%)。

Question 3

カラーピッカー

Accepted Answer

上のカラースウォッチをクリックすると、ブラウザのネイティブカラーピッカーが開きます。色を選択すると、3つのフォーマットフィールドが自動的に更新されます。

Question 4

When to use HEX vs RGB vs HSL

Accepted Answer

Use HEX when working with CSS shorthand or design tools — it is the most compact notation and widely recognized by designers. Use RGB when you need to manipulate individual color channels programmatically (e.g., adjusting opacity with rgba()). Use HSL when you want intuitive color adjustments — changing hue rotates the color, changing saturation controls vividness, and changing lightness controls brightness. HSL is the most human-friendly format for creating color palettes and design systems.

Question 5

How to convert HEX to RGB

Accepted Answer

Paste a HEX color value (e.g. #3b82f6) into the HEX field and the RGB and HSL equivalents update instantly. You can also type RGB or HSL values directly — all three fields stay in sync. Click any Copy button to copy the value to your clipboard.

カラーコンバーター

カラーフォーマット

HEX、RGB、HSL

カラーピッカー

プライバシー