カラーコンバーター

カラーコンバーターとは#

カラーコンバーターは、1つの色を、コードで使うカラーコードへまとめて変換するツールです。hex、rgb()、hsl()、hwb()、oklab()、oklch()のいずれかで色を入力すると、ほかの表記やCSS変数、Tailwind・SwiftUI・Composeの値が入力に合わせて更新されます。プレビューを確認しながら、H・S・L・Aのスライダーでページを離れずに色を調整できます。

必要な表記だけをコピーすることも、すべてをまとめてJSONとしてコピーすることもできます。

使い方#

1. カラーコードを入力または貼り付けるか、ピッカーから色を選びます。
2. 必要に応じてH・S・L・Aのスライダーで色を微調整します。
3. 必要な表記をコピーするか、全形式をまとめてコピーします。

対応する形式#

入力#

• hex: #3b82f6のような6桁、または透明度を含む8桁。
• rgb()・hsl(): スペース区切りとカンマ区切りのどちらも受け付けます。alphaはスラッシュの後、またはカンマ区切りの4値目に置きます。rgba()とhsla()も受け付けます。
• hwb(): 色相・白み・黒み。
• oklab()・oklch(): 明度、彩度またはa/b軸、色相。

出力#

• HEX: 6桁。alphaが1未満のときは8桁。
• RGB・HSL: 区切りの設定に従います。alphaはスペース区切りではスラッシュの後、カンマ区切りでは4値目に入ります。
• HWB・OKLab・OKLCH: スペース区切り。必要なときはスラッシュの後にalphaが付きます。
• CSS変数: --colorのカスタムプロパティ。
• Tailwind: bg-[#3b82f6]のような任意カラー。
• SwiftUI: Color(red: 0.231, green: 0.51, blue: 0.965)。alphaが1未満のときはopacityが付きます。
• Compose: Color(0xFF3B82F6)。alphaは先頭のバイトで示します（ARGB順）。

カンマ区切りでrgb(59, 130, 246, 0.5)のように書く形はCSS Color 4では有効ですが、古いブラウザやビルド環境ではrgba()やhsla()が必要です。

活用シーン#

• デザインファイルの色を、CSSやアプリのコードへ貼り付けられる値に変換する。
• 既存のカラーコードが別の表記ではどう表されるかを確認する。
• 同じ色をhex・RGB・OKLCHで見比べる。
• モックアップからTailwindの任意カラーやカスタムプロパティ、SwiftUIやComposeの値を用意する。

よくある質問#