How do I convert HEX to RGB color values?

Enter or pick a HEX color value (e.g., #3b82f6) and the tool instantly shows the equivalent RGB values (e.g., rgb(59, 130, 246)). You can also enter RGB values to get the HEX code. Click Copy next to any format to copy it to your clipboard.

What is the difference between HEX, RGB, and HSL color formats?

HEX uses a hash followed by six hexadecimal digits and is most common in CSS. RGB defines colors by red, green, and blue values (0-255). HSL uses hue (0-360), saturation (0-100%), and lightness (0-100%), which many designers find more intuitive for creating color palettes.

Which color format should I use for web development?

HEX is the most widely used format for CSS and HTML. RGB is common in JavaScript canvas operations and image processing. HSL is excellent for programmatically adjusting colors and building harmonious palettes. All three produce identical visual results in browsers.

Color Picker & Converter

HEX・RGB・HSLのカラー選択・変換ツール。ワンクリックでコピー。

カラーピッカー

HEX

RGB

HSL

hsl(217, 91%, 60%)

How to Use the Color Picker & Converter

This free online color picker lets you select any color and instantly see its representation in HEX, RGB, and HSL formats. Use the native color picker or enter values manually. Click "Copy" next to any format to copy it to your clipboard.

Understanding Color Formats

HEX is the most common color format in web development, using a hash followed by six hexadecimal digits (e.g., #3b82f6). RGB defines colors by their red, green, and blue components, each ranging from 0 to 255. HSL represents colors using hue (0-360 degrees), saturation (0-100%), and lightness (0-100%), which many designers find more intuitive.

When to Use Each Format

HEX is ideal for CSS and HTML color definitions. RGB is commonly used in CSS, JavaScript canvas operations, and image processing. HSL is excellent for creating color palettes and adjusting colors programmatically because changing hue, saturation, or lightness independently is straightforward. All three formats produce identical visual results.

Tips for Designers

When building a color palette, start with HSL and adjust the hue while keeping saturation and lightness consistent for harmonious colors. Use this tool to quickly convert between formats as you work across different design and development tools.

カラーピッカー・変換ツールについて

HEX、RGB、HSLの各カラー形式をリアルタイムで変換するツールです。カラーピッカーで色を選択するか、値を直接入力して変換結果をワンクリックでコピーできます。全ての処理はブラウザ内で完結します。

よくある落とし穴と対処 / Common Pitfalls

落とし穴 / Pitfall	問題 / Problem	対処 / Fix
3桁HEXの解釈 Shorthand hex confusion	#abc は #aabbcc の省略形。#abc000 とは別の色 #abc expands to #aabbcc	正確な比較は6桁に展開してから行う Expand to 6 digits before comparing
8桁HEXのアルファ位置 8-digit hex alpha position	#RRGGBBAA の末尾2桁が不透明度(80=50%)。先頭と誤解しがち Alpha is the last byte in #RRGGBBAA	透過付きは rgb(r g b / 50%) 表記の方が読み違えにくい Prefer the rgb() slash syntax for alpha
HSLの明度が直感とずれる HSL lightness is not perceptual	同じL値でも黄色は明るく青は暗く見える Equal L looks different across hues	知覚均等が必要ならOKLCH対応のColor Converterを使う Use OKLCH for perceptual uniformity
スクリーンの色がそのまま印刷で出ない Screen colors shift in print	RGB(加法混色)とCMYK(減法混色)の色域差 RGB and CMYK gamuts differ	印刷物はCMYK変換後の校正で確認する Proof in CMYK for print work

変換例 / Examples

#6366F1 (indigo-500)
= rgb(99, 102, 241)
= hsl(239, 84%, 67%)

CSSでの利用:
color: #6366F1;            /* HEX */
color: rgb(99 102 241);     /* モダン構文(カンマ不要) */
color: hsl(239 84% 67%);

Why browser-only?

Brand colors are design assets — often unreleased ones. This picker converts between HEX, RGB and HSL entirely in your browser: your palette never leaves the page, and conversions are instant and offline-capable. For OKLCH and CSS Color 4 conversions, see our Color Converter.

変換はブラウザ内で完結し、ブランドカラー等の値が外部送信されることはありません。 OKLCH対応の形式変換はColor Converter、配色の生成はColor Palette Generatorをどうぞ。