🎨

カラーコード 変換

HEX、RGB、HSL、CMYK 形式間で色を即座に変換できます。任意のフィールドを編集すると、残りは自動的に更新されます。

生成ツール ローカルで実行 データは送信されません
HEX RGB HSL CMYK 変換 WCAG
カラーピッカー ツール
フォーマット
HEX
RGB
HSL
CMYK
白いテキスト 黒いテキスト
#FF5733
最も近い CSS 名: —
この色に白文字
—
この色に黒文字
—
色形式について
  • HEX —Web / CSS / HTML で最も一般的。コンパクトな6文字の16進表記（例: #FF5733).
  • RGB —スクリーン向けプログラミング、CSS、canvas API で使用。各チャンネル（Red、Green、Blue）は 0-955 の範囲。
  • HSL —Hue、Saturation、Lightness。人間にとってより直感的で、明るさや色調を簡単に調整できます。
  • CMYK —Cyan、Magenta、Yellow、Key（Black）。印刷デザインやプロの出版ワークフローで使用。
  • いずれかのフィールドを編集すると、他のすべての形式が自動更新されます。短縮形式（255, 87, 51）と完全形式（rgb(255, 87, 51)）入力に対応。

カラーコンバーターとは？

HEX、RGB、HSL、CMYK の間で色を即座に変換できます。ビジュアルピッカー付きで、必要な形式に調整してコピーできます。

カラーコンバーターの使い方

  1. HEX、RGB、HSL、HSV、またはその他の対応形式で色を入力します。
  2. ツールが値を他のカラー形式へ自動変換します。
  3. 出力が目標の色と完全に一致するまで、各項目を微調整できます。
  4. CSS、デザイン引き継ぎ、印刷作業に必要な形式をコピーできます。

関連ツール

🎨
カラーピッカー ツール
HEX、RGB、HSL、CMYK 間で色を変換します
 🎨
カラーパレット 生成
補色、類似色、トライアドのカラーパレットを生成します
 ♿
WCAG コントラスト チェック
アクセシビリティのために WCAG AA および AAA の色コントラスト比を確認します
カラー形式を理解する ▾
例
入力 #FF5733
出力 RGB(255, 87, 51), HSL(11, 100%, 60%), CMYK(0, 66, 80, 0)
一般的な使用例
  • デザインモックアップの色をCSSで使える値に変換
  • RGBまたはHSLの色をフロントエンドコード用のHEXに変換
  • 印刷向けのCMYK値とデジタルカラー形式を比較
  • デザインファイルを引き継ぐ前に色仕様を正規化
よくある質問
CSSのoklch()とlab()に対応していますか？

このツールは従来の色空間間で変換します。CSSのoklch/labには専用の知覚カラー変換ツールが必要です。

CMYK変換の精度はどの程度ですか？

変換にはsRGB→CMYKの計算式を使用しています。印刷制作ではICCプロファイル対応のツールを使用してください。

カラーコード 変換 Online —HEX、RGB、HSL & OKLCHとは何ですか？

カラーコード 変換 Online —HEX、RGB、HSL & OKLCHはすべてブラウザ内で動作し、データをサーバーにアップロードせずにこのタスクを完了できます。

カラーコード 変換 オンライン —HEX、RGB、HSL & OKLCH は無料で使えますか？

はい。このツールは無料で使用でき、サインアップは不要です。