RGBからHSLへの変換式

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

直観的なテーマ編集のために、sRGB 値を色相、彩度、明度に変換します。

Formula

R、G、B を 0 ～ 1 に正規化し、最小/最大を見つけ、L と S を導出し、ドミナント チャネルから H を計算します。

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

直観的なテーマ編集のために、sRGB 値を色相、彩度、明度に変換します。

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

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

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

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

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

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

FAQ

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

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

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

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

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

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

概要

直観的なテーマ編集のために、sRGB 値を色相、彩度、明度に変換します。

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

この式を使用する場合