🎨
無料カラーコンバーター
HEX、RGB、HSL、HSV、CMYK 形式の間でカラーを瞬時に変換します。明度スケールとプリセット見本が含まれています。
読み込み後はオフラインでも動作
HEX、RGB、HSL、HSV、CMYKの間で色を変換します — ライブプレビュー付きで、ワンタップコピー可能。すべてブラウザ内で動作します。
対応形式: HEX (#fff または #ffffff)、RGB (255, 255, 255)、HSL (360, 100%, 50%)
100%
プリセット:
HEX#14B8A6
rgb() · レガシーrgb(20, 184, 166)
rgb() · モダンrgb(20 184 166)
hsl() · レガシーhsl(173, 80%, 40%)
hsl() · モダンhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB値20, 184, 166
WCAGコントラスト
白い背景上
2.49:1
黒い背景上
8.44:1
🖨️ 印刷用: これらの CMYK 値 (89%、0%、10%、28%) は、参照用の標準 sRGB → CMYK 近似値です。正確な印刷色については、プリンタの ICC プロファイルまたは印刷校正を使用してください — スクリーン CMYK ではすべてのインク/用紙に完全に対応できません。
明度スケール
スウォッチをクリックしてそのシェードに切り替え
主な用途
- Web デザイン用に色を変換任意の色の HEX、RGB、HSL 値を取得します — CSS または Tailwind に貼り付ける準備ができています。
- 印刷用に色を変換 (CMYK)スクリーン色 (HEX/RGB) を CMYK 値に変換して、印刷デザインと専門的な印刷で使用します。
- デザイン システム用に色のパレットを構築ブランド カラーをすべての形式に変換し、完全なデザイン システム用に一貫した明るさ スケールを生成します。
- アクセシビリティ用の色コントラストをチェックコントラスト比ツールで使用するための RGB 値を取得するために色を変換 — アクセス可能な設計用の WCAG コンプライアンス。
- Figma 用の色を変換Figma カラーピッカーとデザイントークンシステムに貼り付けるための正確な HEX と RGB 値を取得。
使い方
すべての変換ロジックは手書きのJavaScriptで、ブラウザ内で完全に動作します — ライブラリもサーバー呼び出しも不要です。ツールは入力を解析し、純粋な数学関数のチェーンを通して処理し、現代的なCSS Color 4空間であるoklch()やlab()を含む11の出力形式を同時に生成します。
- 1柔軟な入力解析カスタムパーサーは16進数（3、4、6、8桁）、rgb()/rgba()、レガシーのカンマ構文とモダンなスペース構文両方のhsl()/hsla()、そして単純な数値トリプルを受け付けます。アルファ値は小数またはパーセントで入力でき、変換開始前に0〜1の範囲に正規化されます。
- 2変換ハブとしてのRGB受け付けられたすべての形式はまず正規のRGBトリプルに解決されます。この単一の表現からツールが展開します：HSLとHSVは標準のmin/max/彩度の計算式を使い、CMYKはキーチャンネルを見つけることで導出され、sRGBの線形化（IEC 61966-2-1で定義された区分的ガンマ曲線）は知覚空間の計算前に適用されます。
- 3知覚的な色空間をゼロから計算oklch()はBjörn Ottossonの参照3×3行列（LMS立方根空間）を使って計算されます。lab()とlch()はBradfordの色順応を使ってD65白色点からD50に変換します。これはCSS Color 4がlab()を定義する方法と一致します。これらはブラウザのレンダリングエンジンで使われているのと同じ式です — ここでは外部依存なしで実装されています。
- 4WCAGコントラストと明度スケール相対輝度はWCAG 2.1の式（線形化されたR、G、Bを0.2126/0.7152/0.0722で重み付け）に従って計算され、白と黒に対するコントラスト比はAA-large、AA、AAA、Failのいずれかに評価されます。9段階の明度ストリップはHSLの明度チャンネルを10%から90%まで動かして生成され、任意のスウォッチをクリックしてその色合いに変換できます。