색상 밝게·어둡게
로컬 처리색을 원하는 만큼 밝게 하거나 어둡게 합니다
사용 방법과 처리 기준
색을 원하는 만큼 밝게 하거나 어둡게 합니다
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
현재 제한
- 최대 입력 길이 100,000자
"작업"에서 밝게 또는 어둡게를 고르고 정도(%)를 적으면, HSL 명도를 그만큼(%p) 바꾼 색을 보여 줍니다. 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%를 넘지 않게 맞춥니다.