カラーピッカー & 変換

このツールについて

Colors in CSS and design tools are expressed in several formats: HEX (#rrggbb), RGB (red, green, blue channels from 0–255), and HSL (hue 0–360°, saturation 0–100%, lightness 0–100%). HEX is compact and universally supported; RGB maps directly to screen hardware; HSL is the most intuitive for designers because adjusting lightness or saturation does not change the hue. This tool converts between all three formats instantly, shows a color swatch preview, and calculates the WCAG contrast ratio against white and black so you can verify that text remains readable for users with low vision.

使い方

1. 1Type a HEX, RGB, or HSL value into the corresponding input — all other fields update automatically.
2. 2Use the color wheel or gradient picker for visual selection.
3. 3Check the WCAG contrast ratio to ensure your color is accessible on white or black backgrounds.
4. 4Copy any format (HEX, RGB, or HSL) to use directly in your CSS or design tool.

よくある質問 (FAQ)

What is HSL and why is it useful?

HSL stands for Hue, Saturation, Lightness. Hue is the color family (0° = red, 120° = green, 240° = blue). Saturation is intensity (0% = grey, 100% = fully saturated). Lightness is brightness (0% = black, 100% = white). HSL is designer-friendly because you can create a lighter or darker shade by only changing L, while the hue stays the same.

What is the WCAG contrast ratio and why does it matter?

The WCAG contrast ratio measures how distinguishable text is against its background. A ratio of at least 4.5:1 is required for normal text (WCAG AA) and 3:1 for large text. This tool shows your color's contrast against white and black so you can choose combinations that are readable for users with low vision.

What is the difference between HEX 3-digit and 6-digit?

#RGB is a shorthand for #RRGGBB where each digit is doubled: #f0a is the same as #ff00aa. It can only represent colors where each channel is a repeated digit. The full 6-digit form works for any color.

How do I use this color in CSS?

All three formats are valid CSS. HEX: color: #3b82f6; — RGB: color: rgb(59, 130, 246); — HSL: color: hsl(217, 91%, 60%); — with alpha: rgba(59, 130, 246, 0.5) or hsla(217, 91%, 60%, 0.5).