色を明るくする

色の明度アップツールは、CSSのhexコードと割合を受け取り、HSL空間の明度チャネルだけを上げて、より明るい色を返します。色相と彩度はそのままなので、ブランドの青は青のまま、赤は赤のままで、ホバー状態・背景・アクセシブルなティント向けに表面が柔らかくなります。量は、現在の明度と純白のあいだに残る余裕に対する割合です。0パーセントはスウォッチを変えず、100パーセントは純白になり、その間の値はどの開始色でも滑らかにスケールします。無効なhex文字列や0〜100の外の割合は、黙ってクランプせず明確な検証エラーで拒否します。

HSLでの明度アップの仕組み

#3366ccのようなCSS hex色、または短縮形#36cから始めます。パーサは3桁コードを展開し、桁を小文字にし、各ペアを0から255の赤・緑・青の整数に変換します。これらのチャネルは標準のCSSおよびW3Cの式で色相・彩度・明度に写像されます。

明度はチャネル分数の最大と最小の平均、彩度はその明度に依存し、色相は色相環上の度数で測られ、無彩色のグレーは色相0を報告します。明度アップはRGBで白へ混ぜるのではなく、色相と彩度を固定したまま明度のパーセントだけを上げます。新しい明度は、旧明度に100までの残距離を加え、amountを100で割った値でスケールしたものです。

amountが0なら式は純同一、100なら明度100の純白、20なら中間トーンの青が現在の明度から白へ20パーセント進みます。新しい明度が分かると、同じCSSの色相からRGBへの経路でHSLを整数チャネルと6桁の小文字hexに戻します。乱数シード、壁時計のタイムスタンプ、ネットワーク呼び出しはないため、同じ入力は常に同じ出力になります。

4桁または8桁のアルファ付きhexは、この契約が不透明RGBのみのため拒否されます。0未満または100超の割合は検証に失敗し、クライアントが許可範囲を黙って超えないようにします。

送信内容と返却内容

colorはhex文字列、amountは0から100（両端含む）の有限数です。成功時、応答は正規化された6桁の色と整理済みamountを返し、originalとresultのスウォッチを提供します。各スウォッチにはrole、hex、整数r g b、色相・彩度・明度の数値、印刷可能なrgbおよびhsl文字列が含まれます。

トップレベルのhexは一行クライアント向けの明度アップ後の色です。短いformula文字列はドキュメントとサポート向けにLプライム則を示します。典型的な確認は、#3366ccを20パーセント明るくする、純赤を50パーセント明るくする、amount 0が元のhexを返すことです。

デザインレビューや素早いティントには無料のブラウザフォームを使い、ホバートークンやテーマスケールの一括生成が必要なときはスクリプトから同一契約を呼び出してください。黙ったクランプに頼らずamountを文書化された範囲に保ってください。このツールは設計システムが予測可能であるよう、失敗を明示します。

実務で色の明度アップが使われる場面

プロダクトデザイナーは、色相をずらさずにブランドのプライマリを明るくしてホバーとアクティブ状態を作ります。ネイビーのCTAを20パーセント明るくしてもネイビーのままで、グレーやシアンへ流れません。アクセシビリティのレビュアーは、暗い背景と組み合わせるテキストやアイコン色の明るい相方を探り、目分量ではなくコントラストチェッカーに候補を渡します。

マーケティングチームは、彩度の高いロゴからキャンペーン用パステルスウォッチを作り、ブランドの色相アイデンティティを保ちつつソーシャルバナーやメールヘッダーに使います。フロントエンド技術者は継続的インテグレーションでシェードランプをスクリプト化し、1つのブランド色からチャート・チップ・セカンダリボタン向けの明るい段階の文書化された梯子を得ます。

後で色を暗くする、HSLをRGBに変換する、類似パレットを作る、WCAGコントラストを調べる必要がある場合は、この明度アップページを過負荷にせず、別の検索意図とランディングとして扱ってください。