Stax
Tools

HEX to RGB Converter

Convert colour codes between HEX, RGB, HSL, and HSV.

#3B82F6
RGB sliders
R
G
B
HSL sliders
H
S
L
All formats — click to copy

カラーフォーマットの解説

このコンバーターの使い方

CSSで各フォーマットを使う場面

Web カラーは多くのフォーマットで表現でき、それぞれ異なる用途に適しています。HEXはHTMLとCSSで最もコンパクトで広く使われています。RGBはプログラムで操作しやすいフォーマットです。HSLは明度と彩度を調整するのに最も直感的です。RGBAとHSLAは透明度チャンネルを追加します（0 = 透明、1 = 不透明）。

  • カラーピッカーを使用するか、HEXコードを入力してベースカラーを設定します。
  • RGBまたはHSLスライダーをドラッグしてカラーを調整すると、すべてのフォーマットがリアルタイムで更新されます。
  • テーブルの任意のフォーマット行をクリックしてクリップボードにコピーします。
  • HEX：スタイルシートの静的カラー — 最短構文で普遍的にサポートされています。
  • RGB / RGBA：透明度が必要な場合（rgba）またはJavaScriptでカラーを計算する場合。
  • HSL / HSLA：デザインシステム構築時 — 明度のみを調整して一貫したシェードを簡単に作成できます。
  • CSS変数：一度定義してどこでも使用、テーマとダークモードのために簡単に更新できます。

よくある質問

How do I convert HEX to RGB?
Split the 6-digit hex code into three 2-digit pairs and convert each from base 16 to base 10. For example, #3b82f6: 3b → 59, 82 → 130, f6 → 246, giving rgb(59, 130, 246). This tool does it instantly — just enter your hex code or use the colour picker.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes colour by mixing light primaries — each channel 0–255. HSL (Hue, Saturation, Lightness) describes colour more intuitively: hue is the angle on the colour wheel (0–360°), saturation controls how vivid the colour is (0–100%), and lightness controls brightness (0–100%). HSL is much easier for humans to reason about when adjusting colours.
What is HSV / HSB?
HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is similar to HSL but differs in how brightness works. In HSL, 50% lightness is the 'pure' colour; in HSV, 100% value is the pure colour. HSV is used in most design apps (Figma, Photoshop) while HSL is more common in CSS.
How do I use colour codes in CSS?
CSS accepts hex (#3b82f6), rgb(59, 130, 246), rgba(59, 130, 246, 0.5), hsl(217, 91%, 60%), and hsla() formats. Modern CSS also accepts oklch() and lab() for wider gamut colours. For CSS custom properties, use --color: #3b82f6 and reference it with var(--color).
What is the Tailwind CSS arbitrary colour format?
Tailwind v3+ supports arbitrary values like bg-[#3b82f6] or text-[#3b82f6] for one-off colours not in your theme. For regular usage, define the colour in your tailwind.config.js under theme.extend.colors so you can use it as bg-brand-500 etc.

関連ツール