CMYKの変換は正確ですか？

スクリーン表示用の近似値変換です。印刷用の正確なCMYK値はDTPソフトで確認することを推奨します。

透明度（alpha）に対応していますか？

はい、RGBA、HSLAの透明度設定に対応しています。

CSSカスタムプロパティで出力できますか？

はい、var(--color-xxx): #xxxxxx;の形式で出力可能です。

oklchやlabにも対応していますか？

CSS Color Level 4のoklch、lab、lch形式にも対応しています。

このサイトはJavaScriptを有効にする必要があります。ブラウザの設定でJavaScriptを有効にしてください。

メインコンテンツへスキップ

ToolShare Lab

無料・登録不要

カラーコード変換

HEX / RGB / HSL を相互変換

このツールをシェア

シェア送るシェア

HEX

RGB

HSL

RGBA (透明度付き)

100%

HSLA (透明度付き)

カラー情報

明度 -

推奨テキスト色 -

補色

プリセットカラー

前回の設定があります

履歴

このツールについて

カラーコードの形式変換ツールです。HEX、RGB、HSL、CMYK間の相互変換に対応。デザインツールとコーディング間の色値変換がワンクリックで完了します。無料・登録不要・ブラウザ完結。

双方向変換

HEX⇔RGB⇔HSL⇔CMYKの相互変換

プレビュー付き

変換結果の色をリアルタイムでプレビュー

ワンクリックコピー

各形式の値をワンクリックでクリップボードにコピー

活用シーン

UIデザイナー

Figmaで決めた色をCSSに変換する場面

HEX値を入力するだけでRGB・HSL・RGBAを一括取得。コーディング作業がスムーズに進みます

フロントエンドエンジニア

デザイントークンの色値を各形式に変換する場面

ワンクリックコピーで必要な形式をすぐ取得。CSS変数やSCSS変数への転記が効率化されます

DTP・印刷デザイナー

Web用の色をCMYKに近似変換して確認する場面

スクリーン表示と印刷のカラー差異を事前に把握。補色や明度情報も同時に確認できます

使い方

カラー値を入力
HEX、RGB、HSLなど任意の形式でカラー値を入力します。
変換結果を確認
他のすべての形式に自動変換された結果を確認します。
値をコピー
必要な形式の値をクリックしてコピーします。

よくある質問

CMYKの変換は正確ですか？: スクリーン表示用の近似値変換です。印刷用の正確なCMYK値はDTPソフトで確認することを推奨します。
透明度（alpha）に対応していますか？: はい、RGBA、HSLAの透明度設定に対応しています。
CSSカスタムプロパティで出力できますか？: はい、var(--color-xxx): #xxxxxx;の形式で出力可能です。
oklchやlabにも対応していますか？: CSS Color Level 4のoklch、lab、lch形式にも対応しています。