高速カラーコードコンバーター：HEX、RGB、HSL＆OKLCH

動的な色フィードバック付きリアルタイムマルチフォーマット変換。開発者対応のCSSスニペットと、2026年のWebデザイン向けOKLCHを含む最新カラースペースサポートを取得。

RGB

rgb(74, 144, 226)
74
144
226

HSL

hsl(211°, 71%, 59%)

OKLCH

2026年基準
oklch(0.65% 0.15 252)

一貫した明るさを持つ最新の知覚カラースペース

HEX

#4A90E2

色知覚分析

温度
Cool & Calm
鮮やかさ
Highly saturated - very vibrant
UI快適性
Comfortable for UI use

実験モード

実験モードに入ってRGBチャンネルを手動で調整し、リアルタイムで色の変化を確認してください。

開発者対応のCSSスニペット

Tailwind CSS（カスタム設定）
colors: { 'my-color': '#4A90E2' }
標準CSS
color: #4A90E2;
RGB付きCSS
background-color: rgba(74, 144, 226, 0.5);
最新CSS（OKLCH）
color: oklch(0.65% 0.15 252);

リアルタイムマルチフォーマット変換（HEX、RGB、HSL、OKLCH）

すべての主要なカラーフォーマット間で即座に変換します。私たちのツールは、従来のHEXおよびRGBフォーマットと、2026年のWebデザイン基準向けのHSLやOKLCHなどの最新のカラースペースをサポートしています。

動的なカラーコントラストフィードバック

色がどのように知覚されるかについての即座のフィードバックを取得します。デザインで色を使用する前に、温度（ウォームとクール）、鮮やかさ（彩度レベル）、UI快適性（目の疲れの可能性）を理解してください。

開発者最適化のCSSスニペット

すべてのカラーフォーマットのコピーレディのCSSコード。Tailwind設定構文、透明度付き標準CSS、最新のOKLCH宣言が含まれています。プロジェクトに貼り付けるだけです。

よくある質問

OKLCHカラースペースとは？

OKLCHは、RGBやHSLよりも一貫性のある知覚的な明度を提供する最新の知覚カラースペースです。人間の目に同じように見える色がOKLCHで同様の値を持つため、スムーズなグラデーションと色の操作に最適であり、2026年のWebデザインの標準になりつつあります。

HEXをRGBに手動で変換するには？

6桁のHEXコードを3組に分割します：#RRGGBB。各組を16進数（ベース16）から10進数に変換します。たとえば、#FF6B6Bはrgb(255, 107, 107)になり、FF=255、6B=107です。私たちのツールはこれを自動的に即座に行います。

RGBの代わりにOKLCHを使用すべき理由は？

OKLCHはより均一な知覚的な明度を提供し、アクセシブルな色の組み合わせとスムーズなグラデーションを作成しやすくなります。OKLCHで明度を調整すると、すべての色相で一貫して変化しますが、HSLでは青が黄色よりも速く暗くなります。

パレットで色がどのように機能するかを見たいですか？

パレットを生成