OKLCH vs HSL：仕様・性能の違いと使い分け基準
色モデルの変換、CSS スケールの作成、パレットの抽出、WCAG・APCA コントラストの確認ができます。 画面上の共通ラベルは、対応する訳語があれば日本語で表示されます。専門的なフィールドやメッセージの一部は英語のままの場合があります。形式名やコードは変更されません。 すべての解析・変換処理はお使いの端末のブラウザメモリ内で標準Web APIにより実行され、外部サーバーへは一切送信されません。
| 評価項目 | OKLCH | HSL | 色・パレット・コントラストスタジオ |
|---|---|---|---|
| 技術仕様・データ構造 | CSS Color 4 · oklch(L C H) | sRGB Cylinder · hsl(H S% L%) | 1. 色・パレット・コントラストスタジオ |
| 処理性能・効率特性 | Perceptually uniform L + P3 | Uneven perceived luminance | 2. Web Crypto / Canvas / ArrayBuffer |
| 最適な実運用ユースケース | 50–950 Design Token Scales | Legacy sRGB-only pickers | 3. 色と CSS デザイン |
技術選定の結論：どちらを選ぶべきか
色モデルの変換、CSS スケールの作成、パレットの抽出、WCAG・APCA コントラストの確認ができます。 色モデルの変換、CSS スケールの作成、パレットの抽出、WCAG・APCA コントラストの確認ができます。 できること、対応形式、現実的なサイズ上限は、ツール・ブラウザー・メモリー・デバイスによって異なります。元のファイルは取っておき、使用前に必ず結果を確認してください。
よくある質問（FAQ）
すべてのツールは完全にブラウザー内で動作しますか？
いいえ。処理方法はツールと使う機能によって異なります。ワークスペース内の表示とプライバシーポリシーをご確認ください。Web ページだからといって、処理場所を判断しないでください。
センシティブなファイルを処理できますか？
まず、そのツール固有のプライバシー情報をご確認ください。一部の機能では外部サービスが使われる場合があります。どこで処理されるか確認できるまで、センシティブなデータの入力はお控えください。
ファイルや入力テキストが外部サーバーに送信されることはありますか？
いいえ。すべてのデータはブラウザのタブ内メモリでのみ処理され、外部へ送信・保存されることはありません。