Which input formats are auto-detected?

HEX (e.g. #FF5733 or FF5733), RGB (e.g. rgb(255, 87, 51)), and HSL (e.g. hsl(11, 100%, 60%)) are auto-detected from the input.

Which output color spaces are produced?

HEX, RGB, HSL, HSV, and CMYK values are all returned for every valid input, one per line.

What is the difference between HSL and HSV?

Both use hue, saturation, and a lightness/value component. HSL's Lightness goes 0=black to 100=white regardless of saturation. HSV's Value goes 0=black to 100=the pure hue. HSV matches how humans perceive color; HSL is more intuitive for tint/shade.

CMYK is the subtractive color model used in printing. If you are preparing a design for print, convert your screen color to CMYK to preview how it will appear on paper.

Are 3-digit HEX codes supported?

Yes. #F00 is expanded to #FF0000, #abc to #aabbcc, following the CSS shorthand convention.

What happens with invalid input?

The tool reports an error and does not produce partial output. Check that your HEX has 3 or 6 hex digits, or that RGB/HSL values are within their valid ranges.

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

入力

例を試す:

出力

Local only

使い方

Enter a color in HEX, RGB, or HSL format.
Read the converted values across all color spaces.
Copy the desired format.

このツールを使うタスク

WCAG アクセシビリティのコントラスト比を確認する

前景色と背景色のコントラスト比を測定し、WCAG AA または AAA のしきい値を満たしているか確認します。

タスク

色を hex・RGB・HSL・名前付き形式の間で変換する

色の値を hex(#ff5733)、rgb()、hsl()、CSS の名前付きカラーの間で変換し、さまざまな文脈で使えるようにします。

タスク

CSS を Sass/SCSS に変換する

Sass は CSS を変数、ネスト、mixin、関数で拡張します。プレーンな CSS を SCSS に変換して、これらの機能を段階的に使い始めましょう。

タスク

ベースカラーからカラーパレットを生成する

1 つのベースカラーから、補色、類似色、トリアード、シェード/ティントのバリエーションを導出し、デザインシステムに活かします。

タスク

RGB 色を HEX に変換する(逆変換も)

色の値を rgb() と #rrggbb 表記の間で変換します。CSS 作業に欠かせないアルファチャネルの扱いにも対応します。

タスク

このツールを使うパイプライン

Hex カラーから RGB とコントラストチェック

パイプライン

よくある質問

Which input formats are auto-detected?: HEX (e.g. #FF5733 or FF5733), RGB (e.g. rgb(255, 87, 51)), and HSL (e.g. hsl(11, 100%, 60%)) are auto-detected from the input.
Which output color spaces are produced?: HEX, RGB, HSL, HSV, and CMYK values are all returned for every valid input, one per line.
What is the difference between HSL and HSV?: Both use hue, saturation, and a lightness/value component. HSL's Lightness goes 0=black to 100=white regardless of saturation. HSV's Value goes 0=black to 100=the pure hue. HSV matches how humans perceive color; HSL is more intuitive for tint/shade.
When is CMYK useful?: CMYK is the subtractive color model used in printing. If you are preparing a design for print, convert your screen color to CMYK to preview how it will appear on paper.
Are 3-digit HEX codes supported?: Yes. #F00 is expanded to #FF0000, #abc to #aabbcc, following the CSS shorthand convention.
無効な入力の場合どうなりますか？: The tool reports an error and does not produce partial output. Check that your HEX has 3 or 6 hex digits, or that RGB/HSL values are within their valid ranges.

カラーコンバーター

最近の履歴

使い方

このツールを使うタスク

このツールを使うパイプライン

よくある質問

関連ツール