変換ツール

HEX、RGB、HSL、HSV、CMYK を変換

ブラウザで HEX、RGB、HSL、HSV/HSB、CMYK を変換。カラーピッカー、コードコピー、WCAG コントラスト確認。アップロードしません。

カラーコードを貼るかピッカーで選びます。HEX、RGB、HSL、HSV、CMYK が同時に更新されます。コントラストは不透明背景の WCAG 比です。

  • 端末内で実行
  • アップロードなし
  • すぐ変換
  • 無料
プレビュー
白背景
黒背景
入力形式

RGBA、HSLA、8桁 HEX はアルファを保持します。HSV と CMYK 文字列にはなく、別に表示します。

HSV と HSB は同じモデルです。V と B はどちらも明るさです。

ここでの CMYK は画面 RGB からの数学的な近似です。印刷用 ICC プロファイル変換ではありません。

WCAG コントラスト

前景にアルファがある場合は不透明な背景の上で合成して計算します。この版では背景アルファは使いません。コントラストだけでアクセシビリティ全体は保証しません。

項目 結果
AA 通常テキスト
AA 大きなテキスト
AAA 通常テキスト
AAA 大きなテキスト

通常テキストの例

大きなテキストの例

変換とコントラストはブラウザで実行され、値はアップロードされません。

使い方

  1. HEX、RGB、HSL、HSV、CMYK の値を貼るか、ピッカーを使います。
  2. 変換されたコードを確認し、必要な値をコピーします。
  3. テキスト用の色なら、不透明背景とのコントラストを確認します。

NEXNARA を使う理由

  • 非公開

    データはブラウザ内に留まります。

  • すぐ変換

    結果はすぐに表示されます。

  • アップロードなし

    NEXNARA のサーバーには何も送りません。

  • どこでも使える

    インストールは不要です。

詳しく見る

カラー変換ツールとは?

ある表記をほかの表記に変えます。CSS 用 HEX、デザイン用 RGB、調整用 HSL、ピッカー用 HSV、簡易 CMYK 近似をコピーできます。計算はブラウザ内だけです。

HEX とは?

HEX は赤・緑・青を #FF0000 のように16進ペアで書きます。短い #RGB は各桁を倍にします。8桁の #RRGGBBAA はアルファです。ここでは # は省略できます。

RGB とは?

RGB は赤・緑・青を 0–255 で混ぜます。RGBA は 0–1 のアルファを足します。画面の色の基準なので、ほかの変換の中心形式です。

HSL とは?

HSL は色相(0–360)、彩度(0–100%)、輝度(0–100%)です。色相 360 は 0 と同じです。HSLA はアルファを足します。RGB を意識せず明るさや彩度を変えるときに使います。

HSV / HSB とは?

HSV(別名 HSB)は色相、彩度、明度です。HSL とは違います。最も明るい赤は hsv(0, 100%, 100%) で hsl(0, 100%, 50%) です。このツールは HSV と HSB を同じモデルとして扱います。

CMYK とは?

CMYK はシアン・マゼンタ・イエロー・ブラックで各 0–100% です。印刷で使います。ここでの変換は画面 RGB の数学的近似であり、印刷用 ICC ではありません。

RGB と CMYK

RGB は画面の加法混色、CMYK は紙の上の減法混色です。同じ数値が印刷スウォッチと一致するとは限りません。最終印刷用ではなく、おおまかな目安です。

アルファとは?

アルファは不透明度です。1 は不透明、0 は完全透明です。8桁 HEX、RGBA、HSLA が保持します。このページの HSV・CMYK 出力にはアルファがないので、別欄に出します。

WCAG コントラスト比とは?

WCAG コントラストは文字と背景の相対輝度を比べます。目安は AA 通常 4.5:1、AA 大きい文字 3:1、AAA 通常 7:1、AAA 大きい文字 4.5:1 です。文字サイズや太さなどほかのアクセシビリティは扱いません。

色の変換方法

HEX、RGB、HSL、HSV、CMYK のいずれかを選び、値を貼るかピッカーを動かします。入力中に変換されます。結果はコピーできます。コントラストは不透明背景を置き、各 WCAG 行の PASS / FAIL を見てください。

プライバシー

値は NEXNARA にも外部のカラー API にも送られません。このツールでは Cookie やローカルストレージに保存しません。

よくある質問

HEX を RGB に変換するには?

#FF0000 のような HEX を貼るか色を選ぶと、RGB が rgb(255, 0, 0) と表示されます。

RGB を HEX に変換するには?

RGB を選び、rgb(255, 0, 0) または R、G、B 欄を入力すると HEX が #FF0000 になります。

HSL と HSV の違いは?

どちらも色相と彩度を使いますが、HSL の第3値は輝度、HSV は明度(value)です。最も明るい赤は HSL では輝度 50%、HSV では value 100% です。

HSV と HSB は同じですか?

同じです。HSB の B(明るさ)が HSV の V(value)です。hsv() と hsb() の両方を受け付けます。

RGB を CMYK に変換できますか?

画面 RGB からの近似としてはできます。すべてのプリンタプロファイルとは一致しません。

印刷 CMYK が違って見える理由は?

紙、インク、ICC プロファイルが結果を変えます。このページは印刷機をシミュレートしません。

8桁 HEX とは何ですか?

末尾2桁がアルファです。#FF000080 は約 50% 不透明の赤です。

必要なコントラスト比は?

WCAG AA 通常テキストは 4.5:1、大きいテキストは 3:1、AAA 通常は 7:1 です。このツールはこの4項目だけを表示します。

変換はローカルで行われますか?

はい。ブラウザだけで実行されます。サーバーも外部 API もありません。

HEX を HSL に変換するには?

HEX を貼って HSL 欄を読むか、HSL から始めて HEX をコピーします。色相 360 は 0 と同じです。