色のコントラストを係数で調整

中間灰まわりのコントラストは、HSLの明度を動かしたりガンマのべきを上げたりするのではなく、赤・緑・青の各チャネルを八ビットの中点である百二十八から引き離すか寄せる古典的な画像操作です。デザイナー、トークン作者、グラフィックスエンジニアは、色相環を回さず色を一枚の写真としても扱わずに、より強い、またはより平坦な見本が欲しいときにコントラスト係数を使います。本ツールはCSSのhex色と、ゼロから十までの閉区間にある有限の係数を受け取り、出力が中間灰に中間灰からの符号付き距離と係数の積を足したものであるというチャネルごとの規則を適用し、各チャネルをゼロから二百五十五の合法範囲にクランプして、調整後のhexとRGB整数を返します。係数が一なら見本は変わりません。係数がゼロなら全チャネルが中間灰に潰れます。一を超える値はコントラストを上げ、ハイライトやシャドウをクリップし得ます。

中間灰まわりのコントラストがRGBチャネルに与える効果

ハッシュ三・三・六・六・c・cのようなCSS hex色、または短い形のハッシュ三・六・cから始めます。パーサは三桁コードを展開し、桁を小文字化し、各対をゼロから二百五十五までの赤・緑・青の整数へ変換します。その八ビット尺度での中間灰は百二十八です。

これはペイントソフトやラスタパイプラインの古典的なコントラストスライダが使う整数の支点です。各チャネルは普通の算術で書き直されます。中間灰を引き、コントラスト係数を掛け、再び中間灰を足し、最も近い整数へ丸め、ゼロから二百五十五の合法な箱へクランプします。

すでに中間灰にあるチャネルは符号付き距離がゼロなので、任意の有限係数で動きません。中間灰より暗いチャネルは、係数が一より大きいとそこから遠ざかり、ゼロと一の間だと近づきます。中間灰より明るいチャネルは逆向きに同じことをします。

ちょうど一の係数は恒等変換で、丸めた各チャネルは入力と一致します。ゼロの係数は三チャネルすべてを中間灰に平坦化し、それはhexコードの八・零・八・零・八・零です。大きな係数はクリップします。

暗い赤はゼロに、明るい青は二百五十五に当たり、クリップされた端点は巻き戻さず合法な壁に留まります。同じ係数が赤・緑・青に独立して掛かるため、色相を固定するHSLコントラストの話と比べ、相対的なチャネルバランスは変わり得ます。その差は意図的です。 この契約は中間灰まわりの線形な引き伸ばしであり、知覚スライダでも二色のWCAG比でもありません。

四桁・八桁のアルファ付きhexは、契約が不透明RGBのみであるため拒否されます。

入力契約、応答の形、検証

colorはhex文字列、factorはゼロから十までを含む有限数です。各見本にはrole、hex、整数のr g b、表示用のrgb文字列が含まれます。トップレベルのhex、r、g、bは一行クライアント向けにコントラスト調整後の結果を反映します。

短いformula文字列はチャネルごとの中間灰規則を文書化とサポート用に示します。典型的な確認は、中間の青に係数一点五を適用する、飽和した赤を灰色へ平坦化するために係数零点五を適用する、係数一が元のhexを返すことを確認する、係数ゼロが中間灰になることを確認する、係数十五や色の欠落を拒否する、などです。

素早いプレビューには無料のブラウザフォームを配線し、トークンの一括生成や継続的インテグレーションの検査が必要なときはスクリプトから同一契約を呼び出してください。乗数そのものの黙ったクランプに頼らず、文書化された区間内に係数を保ってください。このツールは不正な係数ではっきり失敗し、設計システムとレンダリングパイプラインが環境間で予測可能であるようにします。

中間灰のコントラスト係数が役立つ場面

ブランドと製品のチームはしばしば一つの主役hexを保ち、フル画像エディタを開かず、目分量で第二のブランド色を作らずに、より強くまたはより静かな同伴色を必要とします。デザイントークンの著者は、HSLの明暗がパステルすぎ、ガンマが表示固有すぎるときに、ベース見本へ係数を掃引してコントラストの段を作ります。

プレゼンテーションとマーケティングの道具は、飽和したロゴからキャンペーン変種を作ります。ポスターでは係数を上げ、落ち着いた背景チップでは下げます。撮像を教える著者は、RGBを中間灰まわりに引き伸ばすことがHSL明度の変更ともガンマべき曲線とも二色のWCAGコントラスト測定とも違うことを示せます。

後でアクセシビリティのために二つのhexを比べる、ガンマ指数を適用する、HSLで明るくまたは暗くする、写真全体をフィルタする必要があるなら、この中間灰係数のページを過負荷にせず、別の検索意図とランディングとして扱ってください。