CodeKitHub이 도구는 무엇인가요?
명암 램프는 서로 다른 명도 수준에서의 한 색상의 다양한 변형을 나열한 것으로, 호버 상태, 비활성화 상태, 테두리, 그리고 브랜드 색상과 동일하지는 않지만 관련되어야 하는 배경 등 UI 디자인 전반에서 사용됩니다.
이 도구는 기본 색상을 HSL로 변환하고 색조와 채도를 고정한 채, 명도를 약 95%(거의 흰색에 가까운 색조)에서 약 10%(거의 검은색에 가까운 음영)까지 단계적으로 변화시킵니다. 원래 색상은 램프 중앙의 자연스러운 위치에 배치됩니다.
왜 사용해야 할까요?
- 고정된 프리셋 팔레트뿐 아니라 어떤 단일 색상으로부터도 디자인 시스템 스타일의 램프(Tailwind의 50/100/200…/900 스케일과 같은)를 생성합니다.
- 필요한 세밀함에 따라 7, 9 또는 11단계를 선택하세요.
- 각 단계는 정확한 HEX 코드와 명도 백분율을 표시하며, 클릭하면 복사됩니다.
- 램프 전체에서 색조와 채도를 일정하게 유지하므로 모든 명암이 회색으로 향하지 않고 기본 색상과 명확하게 연관되어 보입니다.
- 무료, 즉시, 완전히 로컬에서 실행됩니다.
사용 방법
- 색상 선택기를 사용하거나 HEX 코드를 입력하여 기본 색상을 선택하세요.
- 램프에 원하는 단계 수(7, 9 또는 11)를 선택하세요.
- 각 명암의 HEX 코드와 명도 백분율을 스와치에서 직접 확인하세요.
- 아무 스와치나 클릭하여 HEX 코드를 복사하세요.
예시
입력
#3B82F6 (중간 파랑), 9단계결과
거의 흰색에 가까운 색조(명도 ~95%)부터 거의 검은색에 가까운 음영(명도 ~10%)까지 9단계이며, #3B82F6 자체는 중간 단계에 위치합니다9단계 전체에서 색조와 채도는 고정된 채로 유지되며 — 명도만 변화하므로 — 각 명암이 동일한 색상군의 일부임이 명확하게 나타납니다.
자주 묻는 질문
이것은 Tailwind CSS가 색상 스케일에 사용하는 것과 같은 시스템인가요?
기본 아이디어(고정된 색조/채도, 변화하는 명도)는 같지만 Tailwind의 특정 팔레트를 정확히 복제한 것은 아닙니다 — Tailwind의 50-900 스케일은 디자이너가 수작업으로 조정한 것이며 단일 공식으로 생성된 것이 아닙니다. 이 도구는 원하는 어떤 색상으로부터도 유사한 구조를 생성해 주며, 기본 색상이 Tailwind의 프리셋 중 하나가 아닐 때 유용합니다.
인접한 두 단계에서 색상이 거의 똑같아 보이는 이유는 무엇인가요?
이는 램프의 매우 밝거나 매우 어두운 끝부분 근처에서 발생할 수 있는데, 인지되는 명도가 숫자상 백분율이 시사하는 것보다 더 느리게 변화하기 때문입니다(이 도구에만 국한된 것이 아니라 인간 색상 지각의 잘 알려진 특성입니다). 단계 수를 줄이면(11 대신 7) 명도 값이 더 넓게 분산되어 거의 중복되어 보이는 스와치가 줄어듭니다.
이 명암들을 CSS 사용자 정의 속성으로 바로 사용할 수 있나요?
네 — 각 HEX 코드를 복사하여 CSS 변수(예: --color-brand-100부터 --color-brand-900까지)에 붙여넣고, 램프의 위치를 프로젝트에서 사용하는 명명 체계에 맞추면 됩니다.
이 도구를 사용해야 할까요, 아니면 색상 믹서를 사용해야 할까요?
호버 상태, 은은한 배경, 브랜드 색상과 관련된 테두리 등 하나의 색상에서 더 밝고 어두운 버전을 만드는 경우에는 이 명암 생성기를 사용하세요. 대신 서로 다른 두 색상 사이의 색상이 필요한 경우(예: 기본 파랑과 보조 주황 사이의 단계), 하나의 색상 명도를 변화시키는 대신 두 색상의 RGB 채널을 원하는 비율로 보간하는 색상 믹서를 사용하세요.
기본 색상이 이미 매우 밝거나 매우 어두운 경우 어떻게 되나요?
기본 색상은 항상 중앙 행에 위치하며, 색조는 그 위로 명도 약 95%까지, 음영은 그 아래로 약 10%까지 단계적으로 변화합니다. 기본 색상이 이미 거의 흰색에 가깝다면 램프의 색조 절반은 좁은 명도 범위로 압축되고(거의 중복된 행) 음영 절반은 넓게 퍼집니다 — 매우 어두운 기본 색상의 경우 그 반대입니다. 가장 고르게 분포된 램프를 얻으려면 색상의 중간 명도 버전(대략 40-60% 명도)에서 시작하세요.
톤(색상을 회색과 섞은 것)도 생성할 수 있나요?
아니요 — 이 도구는 채도를 고정한 채 명도만 변화시켜 색조와 음영은 생성하지만 톤은 생성하지 않습니다. 더 차분한 램프를 원한다면 먼저 기본 색상의 채도를 낮춘 다음(색상 선택기에서 더 회색빛 버전을 선택) 그로부터 램프를 생성하세요. 그러면 모든 단계가 낮아진 채도를 물려받습니다.