색 밝게·어둡게 하기

색을 "20% 밝게" 하는 일은 간단해 보이지만, 도구마다 그 뜻이 다릅니다. Sass lighten()은 HSL 명도에 20포인트를 더하고, color.scale()은 흰색 명도까지 거리의 20%만큼 이동하며, 틴트는 흰색을 20% 섞고, OKLCH는 사람이 실제로 느끼는 명도를 바꿉니다. 이 도구는 밝게, 어둡게, 채도 높게, 채도 낮게, 회색화에 대해 네 가지 방법을 모두 계산하고, 결과를 HEX, RGB, HSL, OKLCH로 보여 주며, 대응하는 Sass와 최신 CSS 코드를 알려 주고, 10% 단계별 결과를 모두 나열합니다.

사용 방법

1. CSS가 지원하는 어떤 형식으로든 색을 입력합니다.
2. 더 밝게, 더 어둡게, 채도 높게·낮게, 더 회색에 가깝게 중에서 고르고 양을 정합니다.
3. 코드베이스에 맞는 방법을 고릅니다: Sass HSL, Sass scale, 흰색·검정 혼합, OKLCH 중 하나입니다.
4. HEX, CSS(HEX 대체 줄과 상대 색 또는 color-mix() 줄), Sass 호출을 복사합니다.

계산식

HSL add: L′ = L + a · HSL scale: L′ = L + (100 − L) × a · mix: c′ = c + (t − c) × a · OKLCH: L′ = L + a, C′ = C × (1 ± a) · luma: Y′ = 0.2126 R + 0.7152 G + 0.0722 B

a는 양입니다(HSL 가감은 포인트, 그 밖에는 비율). c는 각 RGB 채널, t는 섞는 흰색·검정·회색입니다. 어둡게와 채도 낮추기는 대응하는 뺄셈을 씁니다. 혼합으로 회색화할 때는 CSS filter: grayscale()과 같은 가중치의 Rec. 709 휘도 회색을 씁니다. sRGB를 벗어난 OKLCH 결과는 채도(chroma)가 줄어들며, 이때 CSS 줄에는 맞춘 색이 나옵니다.

예시

Sass lighten(#6b717f, 20%)는 HSL 명도를 45.9%에서 65.9%로 올려 #A1A5AF가 되고, darken(#b37399, 20%)는 #7C4465가 됩니다. 같은 비율로 #3366CC에 흰색을 20% 섞으면 #5C85D6(51 + 204 × 0.2 = 91.8 → 92, 나머지도 같은 방식)이 되어, 같은 퍼센트의 lighten()보다 부드러운 단계입니다. #3366CC의 휘도 회색은 0.2126 × 51 + 0.7152 × 102 + 0.0722 × 204 = 98.5이므로, 혼합 방식의 회색화 결과는 #636363입니다.