使い方
- #1e90ff、rgb(30 144 255)、oklch(65% 0.18 250)などの色を入力または貼り付けます。カラーピッカーをクリックして選ぶこともできます。
- 色見本を確認し、意図した色になっているか確かめます。
- 一覧から必要な形式をコピーします。透明度のある値では、アルファ値も保持されます。
仕組み
入力できる形式: 3桁、4桁、6桁、8桁のHEX（4桁と8桁の末尾はアルファ値）、数値またはパーセント指定のrgb()とrgba()、hsl()とhsla()、hwb()、oklch()、およびパーセントまたは0〜100の数値で指定するcmyk()。従来のカンマ区切り構文と、「/ alpha」を使う最新のスペース区切り構文の両方に対応しています。色相はdeg、turn、rad、gradで指定できます。「tomato」などの色名は読み込めません。カラーピッカーを使うか、カラーコードを入力してください。
すべての変換はsRGBを経由します。HSLとHWBはRGB値を単純に変換した形式なので、正確に変換できます。OKLCHは知覚的な色空間です。明度の変化がほぼ均等な色の違いとして見えるため、カラーパレットの作成に役立ちます。公開されているOKLabの変換行列を使って計算しています。一部のOKLCHの色はsRGBで表示できる範囲外です。その場合は範囲外であることを示し、表示可能な最も近い色を表示します。
CMYKは一般的な簡易式（K = 1 − RGB各チャンネルの最大値）で計算します。実際の印刷結果は用紙、インク、ICCプロファイルによって異なるため、この数値は印刷用の確定値ではなく、出発点としてお使いください。
使用例
ブランドカラーのHEXコードをCSSに変換
スタイルガイドに#0b5d1eと記載されています。入力すると、古いCSS向けのrgb(11, 93, 30)、明度を手動で調整するためのhsl(133.9, 78.8%, 20.4%)、最新のCSS色関数向けのoklch()値を確認できます。
透明度のある色を確認
rgba(0, 0, 0, 0.5)は#00000080に変換されます。末尾の2桁のHEX（80）はアルファ値を表します。255段階中128で、約50 %です。
デザインファイルのOKLCH値を確認
oklch(70% 0.4 150)は非常に鮮やかな緑色で、sRGB画面では表示できません。ツールが範囲外であることを示し、最も近いsRGBの色を表示するため、ほとんどの画面ではデザインの見え方が異なることを確認できます。
よくある質問
HSLに変換して戻すと、HEXが1段階変わることがあるのはなぜですか？
HEXでは、各チャンネルを0〜255の整数で表します。他の形式の値は表示用に丸められます（HSLは小数第1位まで）。丸めた値を元の形式に戻すと、1段階ずれる場合があります。元の値を正確に保つには、HEXをコピーしてください。
このCMYK値は印刷に適していますか？
いいえ。CMYK値だけでは印刷用として正確とは限りません。色プロファイルを使わない簡易式で計算しています。プリンターではFOGRAやGRACoLなどのプロファイルを使用し、値も異なるため、印刷会社に確認するか、カラーマネジメント対応アプリで変換してください。
OKLCHとは何ですか？CSSで使えますか？
OKLCHは、知覚的な明度、彩度（色の鮮やかさ）、色相で色を表します。現在の主要ブラウザーはCSSのoklch()に対応しています。古いブラウザーにも対応する場合は、HEXまたはrgb()のフォールバックを用意してください。
8桁のHEXコードは何を表していますか？
#RRGGBBAAでは、末尾の2桁が不透明度を表し、00（完全に透明）からff（完全に不透明）まで指定できます。4桁の#RGBA形式も、各チャンネルを1桁で指定する点を除き、同じ仕組みです。
プライバシー
色の変換はブラウザー内で行われます。入力内容が外部に送信されたり、保存されたりすることはありません。