カラー形式コンバーターは、HEX、RGB、HSL、HSV、OKLCH の各形式間で色を変換します。ピッカーでの選択、HEX 値の入力、CSS カラー文字列の貼り付け、または RGB スライダーの調整が可能で、全形式がリアルタイムに更新され、個別のコピーボタンも備えています。
現代の CSS には、#7C3AED、rgb(124, 58, 237)、hsl(262, 83%, 58%)、oklch(55% 0.24 293) など、同じ色を表現する方法が数多くあり、それぞれに透過（アルファ）バリアントが存在します。そのため、形式間の変換が必要になる場面が多々あります（Figma のデザインは OKLCH、コードベースは HEX、テーマ変数は HSL、といった具合です）。カラー形式コンバーターは、これらすべての変換を一つのパネルで行います。ピッカーでの選択、あらゆる構文での貼り付け、あるいは RGB スライダーでの微調整に対応しています。HEX（アルファ付き）、rgb()/rgba()、hsl()/hsla()、hsv()、oklch() のすべてが同時に表示されるほか、CSS 変数スニペットや、コントラスト計算に役立つ輝度値も確認できます。アルファチャンネルも完全にサポートされており、各形式のコピーボタンによりワンクリックで利用可能です。また、ネイティブのカラー名や CSS がサポートするすべての記述を受け付けます。
HEX、RGB/RGBA、HSL/HSLA、HSV、OKLCH を同時に表示します。その都度変換し直すことなく、用途に合った形式をすぐに選べます。
HEX（#abc、#aabbcc、#aabbccff）、rgb()/rgba()、hsl()/hsla()、oklch()、および標準のカラー名に対応。CSS がサポートする形式なら何でも貼り付け可能です。
現代の CSS で採用されている OKLCH 形式に対応しています。知覚的に均一な色空間であり、新しいデザインシステムのデファクトスタンダードになりつつあります。
各形式に専用のコピーボタンがあります。クリックするだけで、コードに適した正確な構文でクリップボードにコピーされます。
赤／緑／青／アルファのスライダーを操作して微調整が可能です。ドラッグに合わせて、すべての形式の値がリアルタイムで更新されます。
透過率（アルファ）は、#RRGGBBAA、rgba(...)、hsla(...) など、すべての形式で適切に処理されます。一度設定すれば、すべての形式に自動的に反映されます。
Figma から提供された OKLCH や HSL を貼り付け、Tailwind の設定や CSS 変数用の HEX 形式をブラウザから離れることなく取得します。
スライダーを操作して様々な色合いを探索し、システム化されたデザインパレット用に OKLCH の値を取得します。
ブランドカラーを HSL 形式に変換し、hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) のようにホバー時の調整を行いやすくします。
輝度（Luminance）フィールドには WCAG コントラスト計算で使用される生の数値が表示され、アクセシビリティの計算に役立ちます。
ソースコードで見かけた oklch(...) を貼り付けて、それが実際にどのような色であるかを即座に視覚的に確認します。
DevSuite Pro のドックにあるカラー形式アイコンをクリックします。カラーピッカー、HEX 入力、RGB スライダーを備えたパネルが開きます。
ピッカーを使うか、HEX 値を入力するか、あるいは CSS のカラー文字列（rgb(...) や oklch(...) など）を貼り付けます。色が即座にプレビューされます。
下に表示される HEX、RGB、HSL、HSV、OKLCH、CSS 変数、輝度を確認します。調整に合わせてすべてが同期されます。
R/G/B/A スライダーをドラッグして細かく調整します。デザイン仕様に合わせた特定のシェードを作るのに最適です。
希望の形式の行にある「コピー」をクリックします。正しい構文の文字列がクリップボードに保存されます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
