色を明るく・暗く
ローカル処理色を指定した分だけ明るく、または暗くします。
使い方と処理基準
色を指定した分だけ明るく、または暗くします。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
「作業」で明るくまたは暗くを選び、度合い（%）を入れると、HSLの明度をその分（%ポイント）変えた色を表示します。20なら明度50% → 70%のように変わります。
できること
- 明るく
- 明度を上げてパステル寄りにします。
- 暗く
- 明度を下げて濃い色にします。
色を明るく・暗くの使い方
- 1作業を選ぶ明るくまたは暗くを選びます。
- 2色・度合いを入力基準の色と変える明度（%）を入れます。
- 3コピー変わった色のコードをコピーします。
活用例
20%明るく
入力: #3366cc、20
結果: #85a3e0（hsl 220, 60%, 70%）
20%暗く
入力: #3366cc、20
結果: #1f3d7a（hsl 220, 60%, 30%）
主な利用シーン
- ボタンのホバー（明るく）・押下（暗く）の色を作るとき
- 背景用の淡い色をブランドカラーから作るとき
よくある質問 (FAQ)
Sassのlighten()と同じですか？
はい、同じ方式です。HSLの明度に%ポイントを足し引きし、0%・100%を超えないように合わせます。