カラーフォーマットコンバーター

任意の CSS 構文でカラーを入力すると、HEX・RGB・HSL・HWB・LAB・LCH・OKLCH・OKLAB として一度に、ライブスウォッチ付きで表示します。すべてブラウザ内で変換します。

カラーフォーマットコンバーターは、すべてのカラーの解析と変換をブラウザ内でローカルに行います。入力または貼り付けた値は端末から離れず、ArrayKit には何もアップロードされません。

CSS カラーコンバーターを開く

カラーフォーマットコンバーター について

カラーフォーマットコンバーターは、任意の CSS 構文で書かれた 1 つのカラー — #7c3aed のような HEX、rgb() や hsl() の値、hwb()・lab()・lch()・oklch()・oklab()、または rebeccapurple のような名前付きカラー — を受け取り、他のすべての記法で同時に表示します。HEX(A)・RGB(A)・HSL(A)・HWB・LAB・LCH・OKLCH・OKLAB に加え、最も近い CSS 名前付きカラーとライブスウォッチが得られ、それぞれすぐにコピーできます。パレットを OKLCH のようなモダンな空間へ移行する、デザインツールとスタイルシートでカラーを合わせる、知覚的に均一な空間で値がどう見えるか確認するデザイナー・フロントエンド開発者のために作られています。アルファは最初から最後まで保持されます。すべての解析と変換はブラウザ内でローカルに動作するため、入力したカラーが端末から離れることはありません。

機能

カラーフォーマットコンバーター の使い方

  1. 任意の CSS 形式でカラーを入力欄に入力または貼り付けます
  2. ライブスウォッチを見て正しいカラーを入力したか確認します
  3. 必要な記法をコピーします — HEX・RGB・HSL・HWB・LAB・LCH・OKLCH・OKLAB
  4. 読みやすいラベルが欲しいときは最も近い名前付きカラーを取得します

例

入力

#7c3aed

出力

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

1 つの HEX がすべての CSS カラー記法に一度に展開されます。

よくあるエラーとトラブルシューティング

よくある質問

このコンバーターはどのカラー形式を出力しますか？
入力したどのカラーについても、HEX(A)・RGB(A)・HSL(A)・HWB・LAB・LCH・OKLCH・OKLAB を同時に表示し、加えて最も近い CSS 名前付きカラーも表示します。
OKLCH とは何で、なぜそれに変換するのですか？
OKLCH は明度・彩度・色相が予測どおりに振る舞う、知覚的に均一なカラー空間です。OKLCH でのカラーの補間や明度調整は HSL や RGB よりも均等に見えるため、デザイナーはパレットをこれに移行します。
最も近い名前付きカラーはどう選ばれますか？
あなたのカラーを 148 個の CSS 名前付きカラーと RGB 距離で比較し、最も近い一致を返します。本当に近いものがないときは、誤解を招く名前を提案せず、そう伝えます。
コンバーターはアルファチャンネルを保持しますか？
はい。半透明のカラーは HEXA（#rrggbbaa）として、rgba()/hsla() として、そして HWB・LAB・LCH・OKLCH・OKLAB では `/ 0.5` のアルファ末尾付きで表示されます。不透明なカラーはアルファを完全に省きます。
oklch() や lab() の値を入力として貼り付けられますか？
はい。入力は oklch()・oklab()・lab()・lch()・hwb() を含む任意の CSS カラー構文を受け付け、HEX や rgb() を扱うのと同じ方法で他のすべての形式に変換します。
入力したカラーはサーバーに送られますか？
いいえ。解析とすべての変換はブラウザ内でローカルに動作するため、入力または貼り付けたカラーは端末から離れず、ArrayKit にアップロードされません。

関連ツール

すべての ArrayKit ツール