メインコンテンツへスキップ
Calnex LogoCalnex
design

カラーコンバーター

HEX、RGB、HSL、CMYK 間で色を変換します。入力形式を自動検出し、すべての色空間表現を表示します。デザイナーや開発者に必須。

パラメーター

HEX、RGB、HSL、または HWB 形式で色を入力します

入力カラー値の形式

結果

HEX
#3B82F6

16進数の色表記

その他の結果 (5)
カラープレビュー
#3B82F6

色の視覚的なプレビュー

RGB
rgb(59, 130, 246)

Red: 59, Green: 130, Blue: 246

HSL
hsl(217, 91%, 60%)

Hue: 217°, Saturation: 91%, Lightness: 60%

CMYK
cmyk(76%, 47%, 0%, 4%)

Cyan: 76%, Magenta: 47%, Yellow: 0%, Black: 4%

名前付きカラー
Royal Blue (closest match)

CSS でこの色に最も近い名前の色を指定

入力と結果の例

#3B82F6
rgb(59, 130, 246)

CMYKはICCプロファイルなしの数学的近似です。特定のプリンターや用紙での色を予測しません。

カラーコンバーターを選ぶ理由

カラー コンバーターは、入力形式の自動検出を使用して、HEX、RGB、HSL、および CMYK 形式の間で色を変換します。また、色という名前の最も近い CSS も識別するため、Web デザイナーや開発者にとって不可欠なツールになります。

  • ✓HEX、RGB、HSL、CMYK カラー形式間の変換
  • ✓入力カラーフォーマットを自動検出します
  • ✓最も近い CSS 名前付きカラーマッチを表示します
  • ✓すべての値はコピーして CSS またはデザイン ツールで使用できるようになります

使い方

  1. 1サポートされている形式 (HEX、RGB、HSL、HWB) で色の値を入力します。
  2. 2入力形式を選択するか、自動検出のままにしておきます
  3. 3すべてのカラーフォーマット表現を即座に表示
  4. 4CSS またはデザイン ツールに必要な形式をコピーします。
  5. 5クイックリファレンスとして、最も近い名前付きの色を確認してください

よくある質問 (FAQ)

HEX と RGB の違いは何ですか?

HEX と RGB では、同じ色データを異なる方法で表現します。 HEX は 16 進表記 (#RRGGBB) を使用し、RGB は 10 進数値 (rgb(R, G, B)) を使用します。たとえば、#FF0000 と rgb(255, 0, 0) はどちらも純粋な赤を表します。

HEX の代わりに HSL を使用する必要があるのはどのような場合ですか?

HSL (色相、彩度、明度) は、より直感的に色を調整できます。簡単に色を明るくしたり (L を増やす)、より鮮やかにしたり (S を増やす)、色相を変更したりできます。 HEX は、正確な色の指定とデザイン ツールとの共有に適しています。

CMYKは何に使われますか?

印刷デザインにはCMYK(シアン、マゼンタ、イエロー、キー/ブラック)が使用されます。加算方式 (ライトベース) の RGB とは異なり、CMYK は減算方式 (インクベース) です。印刷用のデジタル デザインを準備する場合、RGB から CMYK への変換が不可欠です。

このツールを使用して HWB から変換できますか?

はい。 HWB (色相、白さ、黒さ) は、直感的に色を調整できる新しい CSS カラー形式です。 HWB 値を hwb(H W% B%) の形式で入力すると、ツールはそれを他のすべての形式に変換します。

最も近い名前付きの色の一致はどの程度正確ですか?

このツールは、RGB 空間のユークリッド距離を使用して、最も近い CSS 名前付き色を見つけます。色が名前付きの色と完全に一致する場合、完全一致が表示されます。それ以外の場合は、最も近い名前の色が表示されますが、入力とは若干異なる場合があります。

信頼性の高い参考文献

CSS Color Module Level 4 - W3C

ソースを表示

Color Values - MDN Web Docs

ソースを表示

Named CSS Colors

ソースを表示