🪜 색상 명암 팔레트
색상 하나를 고르면 밝은 50부터 어두운 900까지 10단계 셰이드가 만들어집니다.
사용 방법
- 기준이 될 색상을 선택합니다.
- 50(가장 밝음)부터 900(가장 어두움)까지 10단계가 생성됩니다.
- 단계별 HEX를 개별 복사하거나 CSS 변수 블록을 통째로 복사합니다.
이럴 때 유용해요
- 디자인 시스템의 primary-50 ~ primary-900 스케일을 만들 때
- 버튼 기본·hover·pressed 상태 색을 규칙적으로 정할 때
- 차트에서 같은 계열의 진하기만 다른 색이 여러 개 필요할 때
알아두면 좋은 팁
- 색상(H)과 채도(S)는 고정하고 밝기(L)만 95%→18%로 단계별 조절하는 방식입니다. 기준 색은 500 단계와 비슷한 밝기가 됩니다.
- 밝은 단계(50~100)는 배경·서피스, 중간(400~600)은 버튼·링크, 어두운 단계(800~900)는 텍스트·다크모드 배경에 어울립니다.
- 노랑처럼 원래 밝은 색은 어두운 단계에서 갈색빛이 됩니다. 필요하면 어두운 쪽 채도를 수동으로 살짝 올려 보정하세요.
자주 묻는 질문
50, 100, 500 같은 숫자는 무슨 의미인가요?
머티리얼 디자인과 테일윈드 CSS에서 굳어진 관례로, 숫자가 작을수록 밝고 클수록 어둡습니다. 500이 그 색의 기준(대표) 톤이고, 50은 거의 흰색에 가까운 배경용 톤입니다.
내가 고른 색이 정확히 500이 되나요?
밝기 단계가 고정 간격이라 기준 색의 원래 밝기에 따라 500과 정확히 일치하지 않을 수 있습니다. 색상·채도는 그대로 유지되므로 계열의 통일감은 보장됩니다.
틴트와 셰이드는 어떻게 다른가요?
틴트(tint)는 흰색을 섞어 밝게 만든 것(50~400 단계), 셰이드(shade)는 검정을 섞어 어둡게 만든 것(600~900 단계)입니다. 이 도구는 두 방향을 하나의 스케일로 만들어 줍니다.
생성된 CSS 변수는 어떻게 쓰나요?
복사한 :root 블록을 전역 CSS에 붙여넣으면 color: var(--color-700) 처럼 어디서든 참조할 수 있습니다. 색을 바꿀 일이 생겨도 변수 선언부만 수정하면 전체에 반영됩니다.
