명도 단계 생성
브랜드 색 하나를 넣으면 밝은 쪽(틴트)과 어두운 쪽(셰이드)으로 열 단계를 만들어 줍니다. Tailwind나 디자인 시스템에서 쓰는 50·100·…·900 형태 그대로 나옵니다.
🎨 계산은 전부 브라우저 안에서 끝납니다. 저장도 전송도 없습니다.
어디에 쓰나요
- · 50~200 배경, 연한 강조, 비활성 상태
- · 400~600 버튼, 링크 — 브랜드 색의 본체
- · 700~900 눌린 상태, 어두운 배경 위 글자
- 각 줄 오른쪽의 안내는 그 색을 배경으로 썼을 때 흰/검은 글씨가 접근성 기준(4.5:1)을 넘는지입니다.
이 도구로 할 수 있는 것
- 50~900 열 단계 생성
- 단계별 HEX·HSL 표시
- 흰 글씨·검은 글씨 가독 표시
- CSS 변수로 한 번에 복사
자주 묻는 질문
Q. 50~900 숫자는 무엇인가요?
디자인 시스템에서 쓰는 밝기 단계 이름입니다. 숫자가 작을수록 밝고 클수록 어둡습니다. Tailwind를 비롯한 여러 도구가 이 방식을 쓰기 때문에 그대로 가져다 쓸 수 있습니다.
Q. 어느 단계를 버튼 색으로 써야 하나요?
보통 500~600을 본체로 쓰고, 눌렀을 때는 700을, 배경 강조에는 50~100을 씁니다. 각 줄의 안내에서 흰 글씨가 읽히는지 확인하고 고르세요.
Q. 왜 채도는 그대로 두나요?
밝기만 바꿔야 같은 색 계열로 보입니다. 채도까지 함께 흔들면 단계마다 다른 색처럼 보여 계열이 흐트러집니다.
다른 색상 도구
화면마다 색 표현이 조금씩 달라, 같은 값도 기기에 따라 다르게 보일 수 있습니다.