HEX・RGB・HSL・HSV・HWB・OKLCH・CMYKを出力カラーピッカーと不透明度スライダー白・黒に対するWCAG 2コントラスト比濃淡パレットを自動生成

カラー変換ツール - HEX・RGB・HSL・OKLCH・CMYK・コントラスト確認

なぜ色の形式を変換するのか？

デザイナーや開発者はさまざまな形式で色を扱います。デザインツールではHEX、CSSではrgb()やhsl()、Tailwind CSS v4のようなモダンなデザインシステムではOKLCH、印刷ではCMYK。このツールはそれらを瞬時に相互変換します。

すべての変換はネットワーク通信なしでブラウザ内で計算されます。

見やすい配色、トラッキングなし。

1
#3B82F6、rgb(59 130 246)、hsl(217 91% 60%)、oklch(...)、cmyk(...)、tomato のような色名など、任意の CSS 形式で色を入力します。カラーピッカーで選ぶこともできます。
2
透明度が必要なら不透明度スライダーを調整します。8桁の HEX や rgba を含むすべての形式が一緒に更新されます。
3
必要な形式をコピーします。デザインの受け渡しには HEX、CSS には rgb() や hsl()、最新のデザイントークンには OKLCH、印刷の目安には CMYK を使います。
4
白文字・黒文字に対する WCAG コントラストを確認し、パレットの色をクリックすると明るい・暗いバリエーションを試せます。

デザイナーから Figma の #0EA5E9 を受け取ったら hsl() に変換し、明度だけを変えてホバーやアクティブ状態を作れます。

本文テキストは WCAG AA で 4.5:1 以上のコントラスト比が必要です。ブランドカラーを白文字のボタン背景に使う前に確認しましょう。

生成された濃淡を、Tailwind CSS やデザインシステムの 50〜900 のパレットのたたき台にできます。

画面の色を CMYK に変換して印刷会社に伝えます。あくまで目安で、正確な印刷色は用紙やプリンターのプロファイルに左右されます。

RGB と HSL の違いは？+

どちらも同じ色を表します。RGB は赤・緑・青の光を混ぜ、HSL は色相・彩度・明度で表すため、「10%明るくする」など人が調整しやすい形式です。

OKLCH を使う理由は？+

OKLCH は知覚的に均等で、HSL と違って明度の変化量が同じなら見た目の差も同じになります。最新のブラウザすべてが対応しており、一貫したカラースケールやダークテーマを作りやすくなります。

必要なコントラスト比は？+

WCAG AA は通常のテキストで 4.5:1、大きなテキスト（約 24 px、太字なら約 19 px）で 3:1 を求めます。AAA ではそれぞれ 7:1 と 4.5:1 です。

CMYK の値は正確ですか？+

いいえ。カラープロファイルなしで画面の RGB から CMYK に変換すると、計算上の近似値になります。ブランドにとって重要な印刷物では、校正刷りを依頼するか Pantone を参照してください。