devtools-hub

Color Format Converter

HEX / RGB / HSL / CMYK を瞬時に相互変換

BOOTHで見る(有料版)
カラーCSSデザイン

HEX・RGB・HSL・CMYK のいずれかを入力すると、他の全形式にリアルタイム変換。CSS 名前付き色(red、tomato、steelblue など)の入力にも対応。各フォーマットをワンクリックでコピー。

広告

Color Format Converter

CSS Name
#3B82F6rgb(59, 130, 246)
HEX
RGB
R
G
B
rgb(59, 130, 246)
HSL
H°
S%
L%
hsl(217, 91%, 60%)
CMYK
C%
M%
Y%
K%
cmyk(76%, 47%, 0%, 4%)

Features

  • HEX / RGB / HSL / CMYK の4フォーマットを相互変換
  • CSS 名前付き色(red, tomato, steelblue など)入力に対応
  • 各フォーマットをワンクリックでコピー(Copied! フィードバック付き)
  • 無効値のリアルタイムエラー表示

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • スポイトツール(EyeDropper API で画面から色をピック)
  • カラー履歴(直近20色を自動保存)

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • スポイトツール(EyeDropper API で画面から色をピック)
  • カラー履歴(直近20色を自動保存)
BOOTH で見る

HEX・RGB・HSL・CMYKの違いと使い分け

カラーコードには用途に応じた複数の形式があります。Web開発ではHEX・RGB・HSL、印刷デザインではCMYKが主流です。形式の特性を理解することで、ツール間の色の転用がスムーズになります。

HEX・RGB・HSLのWeb用途

HEX(#FF5733)はCSSで最も使われ、コンパクトで可読性が高いです。RGB(rgb(255,87,51))は数値操作やJavaScriptでの動的な色生成に向いています。HSL(hsl(11,100%,60%))は人間の直感に近く「同じ色相で明るくする」「彩度を下げる」操作が簡単です。TailwindCSSのカスタムカラーはHSLで管理するのが推奨されています。

CMYKとはなぜ印刷向けなのか

CMYKはシアン・マゼンタ・イエロー・キープレート(黒)の4色インクの混合量を表します。光の3原色(RGB)と異なりインクの混色(減法混色)で色を作るため、印刷物には物理的に対応する形式です。モニター上のRGB色はCMYKに変換すると彩度が落ちることがあるため、印刷物のデザインは最初からCMYKで作業することが推奨されます。

CSS名前付き色の活用

CSSでは約140種類の名前付き色(red・tomato・steelblue・coral・lavenderなど)が定義されています。チームのコミュニケーションでHEXコードより直感的で、デザインレビューや仕様書に使いやすいです。Color Format ConverterではCSS名前付き色を入力して各形式に変換できます。

スポイトで画面から色を取得(デスクトップ版)

デスクトップ版ではEyeDropper APIを使って画面上の任意のピクセルから色を取得できます。参考サイトや画像から使いたい色を直接ピックしてすべての形式に変換できるため、デザインリファレンスからの色の転用が格段に楽になります。

広告

Related Tools

color-deck

カラーコード変換 & パレット保存

カラーデザイン開発者向け

使ってみる →

BOOTH

Gradient Deck

グラデーションエディタ

カラーデザインCSS

使ってみる →

BOOTH

Box Shadow Generator

CSS box-shadow をスライダーで即作成。複数レイヤー対応

デザインCSS開発者向け

使ってみる →

BOOTH

このツールを共有する