カラー変換ツール（HEX/RGB/HSL）

このツールの使い方

1. 1

   Click the color swatch to open your operating system's color picker and choose a color visually.

2. 2

   Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

3. 3

   Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

4. 4

   Copy whichever format you need straight into your CSS or design file.

カラー変換ツール（HEX/RGB/HSL）とは何ですか？

よくある活用例

• Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

• Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

• Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

• Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

• Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

• Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

よくある質問