カラーコード変換
HEX・RGB・HSL・HSV・CMYKのカラーコードを相互に変換できます。カラーピッカーで色を選択し、各フォーマットのCSSコードをコピーできます。
R
G
B
H
S%
L%
H
S%
V%
C
M
Y
K
CSS コード
HEX
#3CF91ARGB
rgb(60, 249, 26)HSL
hsl(111, 95%, 54%)CMYK
cmyk(76%, 0%, 90%, 2%)プリセットカラー
Tailwind CSS パレットからカラーを選択
カラーコード変換ツールの使い方
カラーコード変換ツールは、Webデザインやアプリ開発で頻繁に必要になるカラーフォーマットの相互変換を簡単に行えるツールです。 カラーピッカーで色を選択するか、HEX・RGB・HSL・HSV・CMYKのいずれかの値を入力すると、他のすべてのフォーマットにリアルタイムで変換されます。
各フォーマットのCSSコードはワンクリックでクリップボードにコピーでき、CSSファイルやデザインツールにそのまま貼り付けて使えます。 プリセットカラーから素早く選択することも可能です。
対応カラーフォーマット
| フォーマット | 形式 | 説明 |
|---|---|---|
| HEX | #RRGGBB | 16進数のカラーコード。CSSで最も一般的に使われる形式。 |
| RGB | rgb(R, G, B) | 赤・緑・青の光の三原色。各値は0〜255。ディスプレイの色表現の基本。 |
| HSL | hsl(H, S%, L%) | 色相・彩度・明度。直感的な色調整が可能。CSSでも使用可能。 |
| HSV/HSB | hsv(H, S%, V%) | 色相・彩度・明度（Value）。PhotoshopやFigmaなどのデザインツールで使用。 |
| CMYK | cmyk(C, M, Y, K) | シアン・マゼンタ・イエロー・キー（黒）。印刷用のカラーモデル。 |
主な機能
- HEX・RGB・HSL・HSV・CMYK の5フォーマット間の双方向リアルタイム変換
- HTMLカラーピッカーによる視覚的な色選択
- 各フォーマットのCSSコードをワンクリックでコピー
- CSS Named Color に一致する場合は色名を表示
- Tailwind CSS カラーパレットからのプリセット選択
- 大きなプレビューで選択した色をリアルタイム確認
- 入力値のバリデーション（範囲外の値は自動補正）
関連記事
よくある質問
- Q. 対応しているカラーフォーマットは？
- HEX（#RRGGBB）、RGB（0-255）、HSL（色相・彩度・明度）、HSV/HSB（色相・彩度・明度Value）、CMYK（シアン・マゼンタ・イエロー・キー）の5つのフォーマットに対応しています。すべてのフォーマット間で双方向にリアルタイム変換できます。
- Q. HEXとRGBの違いは何ですか？
- HEXは16進数（#FF0000など）、RGBは10進数（rgb(255, 0, 0)など）でカラーを表現します。どちらも赤・緑・青の光の三原色を基にしており、表記方法が異なるだけで表現できる色は同じです。CSSではどちらも使用可能です。
- Q. HSLとHSVの違いは何ですか？
- HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)、HSVは色相(Hue)・彩度(Saturation)・明度(Value)で色を表現します。HSLはCSSで直接使用でき、HSVはPhotoshopやFigmaなどのデザインツールで広く使われています。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。