색상 음영 생성기
HEX 색상이나 Pantone 이름을 입력해 UI, 브랜드, CSS 변수, Tailwind 작업에 쓸 수 있는 실용적인 색상 스케일을 만드세요.
Pantone 참조색을 선택하면 해당 근사 HEX 값으로 음영을 생성합니다.
Pantone 매칭은 디지털 근사값입니다. 최종 인쇄 색상은 공식 가이드로 확인하세요.
생성된 색상 스케일
스와치를 클릭해 HEX 값을 복사하거나, 전체 스케일을 CSS와 개발용 형식으로 복사할 수 있습니다.
UI 미리보기
생성된 색상이 배경, 카드, 버튼, 텍스트에서 어떻게 보이는지 확인하세요.
색상 스케일을 UI 토큰으로 전환
밝은 값은 배경, 중간 값은 동작 요소, 어두운 값은 텍스트와 고대비 영역에 적합합니다.
색상 음영 생성기란?
색상 음영 생성기는 하나의 기준 색상에서 더 밝은 틴트, 더 어두운 셰이드, 채도를 낮춘 톤을 만듭니다. 버튼, 배경, 테두리, 차트, 브랜드 시스템에 사용할 수 있는 일관된 색상 스케일을 만들 수 있습니다.
Tailwind용 50-950 색상 스케일 만들기
기본 모드는 일반적인 디자인 시스템 토큰 이름과 비슷한 11단계 50-950 스케일을 출력합니다. 일반 값, CSS 변수, Tailwind 설정, JSON을 복사해 개발자에게 전달할 수 있습니다.
생성 색상을 Pantone 참조색과 비교
생성된 각 색상은 이 사이트의 가장 가까운 Pantone 참조색과 비교됩니다. 디지털 음영 탐색을 인쇄 중심의 색상 논의와 연결하는 데 도움이 됩니다.
색상 스케일 활용 방법
음영 스케일은 하나의 브랜드 색상을 완전한 작업용 시스템으로 확장합니다. 밝은 값은 배경과 호버 상태, 중간 값은 동작 요소, 어두운 값은 텍스트와 테두리, 고대비 표면에 사용할 수 있습니다.
색상 음영 FAQ
틴트, 셰이드, 톤은 무엇인가요?
틴트는 색에 흰색을 섞고, 셰이드는 검은색을 섞으며, 톤은 회색을 섞습니다. 이 조합으로 같은 기준 색상의 제어된 변형을 만들 수 있습니다.
공식 Pantone 음영 생성기인가요?
아닙니다. 이 사이트는 독립적으로 운영되며 Pantone LLC와 제휴되어 있지 않습니다. 여기에 표시되는 Pantone 참조는 기획과 커뮤니케이션을 위한 디지털 근사값입니다.
출력을 Tailwind CSS에서 사용할 수 있나요?
네. 50-950 모드는 Tailwind 스타일 색상 스케일에 맞게 설계되었고, Tailwind 내보내기는 바로 붙여 넣을 수 있는 colors 블록을 제공합니다.
생성된 음영은 인쇄용 색상 관리가 되어 있나요?
아닙니다. 이 생성기는 빠른 디자인 탐색을 위해 브라우저 친화적인 RGB 혼합을 사용합니다. 정확한 제작 색상은 보정된 도구와 공식 물리 색상 가이드로 확인하세요.
Pantone color palette generator와 무엇이 다른가요?
팔레트 생성기는 여러 색상의 조화로운 조합을 만듭니다. 이 페이지는 하나의 기준 색상에 집중해 더 밝고, 더 어둡고, 더 차분한 변형을 만듭니다.
이 도구가 내 색상을 업로드하나요?
아닙니다. 음영 생성은 브라우저 안에서 실행됩니다. 계정, 업로드, 서버 측 색상 처리가 필요하지 않습니다.
더 많은 도구
디지털 참고용
생성된 색상과 Pantone 매칭은 기획, UI 디자인, 커뮤니케이션을 위한 디지털 근사값입니다. 공식 Pantone 제품, 라이선스 데이터, 물리 스와치 확인을 대체하지 않습니다.