HSLからRGBへの変換式

いいえ。数式リファレンス ページは静的なドキュメントです。インタラクティブ ツールはブラウザ上で 100% クライアント側で実行されます。

CSS 出力用に HSL 円筒座標を sRGB に変換し直します。

Formula

W3C CSS カラー モジュールごとに、色相セクター (0 ～ 6) と彩度および X オフセットの式を使用します。

HSL から RGB への変換式は印刷ワークフローにとって正確ですか?: 画面の RGB と印刷の CMYK は異なる色域を使用します。変換を近似的な証明として扱います。商業印刷用の ICC プロファイルを使用して調整します。
この式を CSS で使用できますか?: 最新の CSS は、多くの操作で color-mix()、oklch()、および lab() をサポートしています。複雑なパイプラインの場合は、JavaScript で計算し、CSS 変数をエクスポートします。
Color DevByte は私のカラーをアップロードしますか?: いいえ。数式リファレンスページは静的なドキュメントです。インタラクティブツールはブラウザ上で 100% クライアント側で実行されます。

CSS 出力用に HSL 円筒座標を sRGB に変換し直します。

Color DevByte は、サーバーにデータを送信せずに再現可能な色の計算を必要とする開発者、デザイナー、アクセシビリティのレビュー担当者向けに、この公式を文書化しています。

リンクされたカラーツールを使用して、ライブプレビューとマルチフォーマットエクスポートでこの数式をインタラクティブに適用します。

デザイントークンを構築するとき、WCAG コントラストを検証するとき、または CSS、Tailwind、またはデザインシステム JSON でカラーパイプラインを自動化するときに、hsl から rgb への変換式を適用します。

実稼働 UI の場合は、常にコントラストチェッカーまたはビジュアルプレビューを使用して結果を確認してください。ガンマ補正と色域マッピングのエッジケースにより、結果が変わる可能性があります。

ブラウザベースのツールは、輝度または ΔE の計算前に sRGB を線形化する必要があります。

RGB ブレンドで一般的な灰色がかった中間点を避けるために、グラデーションとテーマには OKLCH または LAB 補間を優先します。

FAQ

HSL から RGB への変換式は印刷ワークフローにとって正確ですか?

画面の RGB と印刷の CMYK は異なる色域を使用します。変換を近似的な証明として扱います。商業印刷用の ICC プロファイルを使用して調整します。

この式を CSS で使用できますか?

最新の CSS は、多くの操作で color-mix()、oklch()、および lab() をサポートしています。複雑なパイプラインの場合は、JavaScript で計算し、CSS 変数をエクスポートします。

Color DevByte は私のカラーをアップロードしますか?

いいえ。数式リファレンスページは静的なドキュメントです。インタラクティブツールはブラウザ上で 100% クライアント側で実行されます。

概要

CSS 出力用に HSL 円筒座標を sRGB に変換し直します。

リンクされたカラーツールを使用して、ライブプレビューとマルチフォーマットエクスポートでこの数式をインタラクティブに適用します。

この式を使用する場合