カラーフォーマット変換
カラー値
HEX#3498DB
RGB52, 152, 219
HSL204, 70%, 53%
HSV204, 76%, 86%
CMYK76, 31, 0, 14
コードスニペット
CSS hex
#3498dbCSS rgb()
rgb(52, 152, 219)CSS hsl()
hsl(204, 70%, 53%)SwiftUI
Color(red: 0.204, green: 0.596, blue: 0.859)Android XML
<color name="color">#3498DB</color>Flutter
Color(0xFF3498DB)関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。画像配色抽出画像をサーバーに送らずブラウザ内だけで主要カラー（HEX/RGB）と占有率（%）を抽出。色数指定・ワンクリックコピー・CSS/JSON書き出し対応。CSS単位変換CSSの px / rem / em / pt / % を相互変換。ルート・親フォントサイズも指定可。すべてブラウザ内で計算します。
HEX・RGB・HSLで色を貼り付けると、HEX・RGB・HSL・HSV・CMYKのすべての形式で表示し、CSS・SwiftUI・Android・Flutter用のコピー可能なコードを生成します。別の構文で同じ色が必要な開発者向けのツールです。すべてブラウザで動作します。
使い方
- HEX・rgb()・hsl()形式で色を貼り付けます。
- ライブプレビューで各フォーマットの値を確認します。
- 作業中のプラットフォーム用スニペットをコピーします。
仕組み
入力された構文に関わらず、赤・緑・青の成分に解析されます。その値をもとにHSL（色相・彩度・輝度）、HSV（色相・彩度・明度）、そして印刷向けのCMYK（シアン・マゼンタ・イエロー・ブラック）モデルを計算します。各プラットフォームのスニペットはその言語の正確な構文で書かれるので、コードに直接貼り付けられます。
機能
5つのカラーモデル
任意の色のHEX・RGB・HSL・HSV・CMYKを一度に確認できます。
コピー可能なコード
CSS・SwiftUI・Android XML・Flutterのスニペットを取得できます。
柔軟な入力
HEX（3桁または6桁）・rgb()・hsl()形式に対応しています。
プライベート＆即時
すべての変換はブラウザで行われ、アップロードされません。
活用シーン
Web開発
CSSのためにhex・rgb()・hsl()の間で色を切り替えるときに。
モバイルアプリ
SwiftUI・Android・Flutter用の正確なカラーリテラルを取得できます。
印刷
印刷向け作業のためにCMYKの内訳を確認できます。
デザインからコードへ
デザインの色を必要なコードに正確に変換します。
注意事項
- HSVはデザインツールによってはHSBとも呼ばれます。
- ここでのCMYKは単純な変換であり、カラーマネジメントプロファイルではありません。
- AndroidとFlutterのスニペットは完全な不透明色を前提としています。
- すべての変換はお使いのデバイスで行われ、データはアップロードされません。
よくある質問
- どの入力形式に対応していますか？
- #あり・なしどちらでも可なHEX（3桁または6桁）・rgb()/rgba()・hsl()/hsla()形式に対応しています。
- 通常のカラー変換ツールとの違いは何ですか？
- このツールは開発者向けの出力に特化しており、CSS・SwiftUI・Android・Flutter用のコードとHSV・CMYKも提供します。
- CMYKは印刷用として正確ですか？
- 標準的な数学的変換です。正確な印刷出力には、印刷会社のカラーマネジメントプロファイルをご利用ください。
- HSVとは何ですか？
- 色相・彩度・明度のモデルで、デザインツールではHSBとも呼ばれます。色の選択と調整に便利です。
- 色はアップロードされますか？
- いいえ。すべてブラウザで変換され、データがデバイスの外に出ることはありません。