Nifty

색상 음영·틴트 생성기

hex 색상 하나로 틴트와 셰이드 팔레트를 만들고 각 색상 칸을 클릭해 바로 복사하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.

색상 칸을 클릭하면 해당 hex가 복사됩니다

팔레트 내보내기
--color-1: #eff4ff;
--color-2: #cadaff;
--color-3: #a5c0ff;
--color-4: #80a6ff;
--color-5: #5b8cff;
--color-6: #4b73d1;
--color-7: #3a5aa3;
--color-8: #2a4075;
--color-9: #192747;
--color-10: #090e1a;

🔒 틴트와 셰이드는 브라우저에서 생성되며 업로드되지 않습니다.

이 색상 음영 생성기가 하는 일

기준 hex 색상을 고르거나 붙여넣으면 가장 밝은 틴트부터 가장 어두운 셰이드까지 이어지는 열 개의 색상 칸을 즉시 만들어 주며, 입력한 원본 색상은 가운데에 놓입니다. 틴트는 기준 색을 흰색 쪽으로, 셰이드는 검은색 쪽으로 섞은 색으로, 버튼·호버 상태·테두리·배경·차트에 쓰기 좋은 깔끔한 단색 계열 팔레트를 얻을 수 있습니다. 각 칸에는 정확한 hex 코드가 표시되고, 한 번 클릭하면 그 값이 클립보드에 복사되어 CSS나 디자인 파일, 스타일 가이드에 바로 붙여넣을 수 있습니다.

틴트와 셰이드를 계산하는 방법

각 칸은 기준 RGB 채널을 순백(틴트) 또는 순흑(셰이드) 쪽으로 일정 비율만큼 섞어서 만들며, 가운데에서 멀어질수록 그 비율이 커집니다. 양 끝은 완전한 흰색이나 검은색 직전에서 멈추도록 해서 #ffffff나 #000000로 뭉개지지 않고 전체 계열이 실제로 쓸 만하게 유지됩니다. 계산이 결정적이라 같은 색을 넣으면 항상 같은 팔레트가 나옵니다. 표준 6자리 hex, #fff 같은 축약형, 앞의 # 없는 값 모두 입력할 수 있으며 색상 선택기와 텍스트 입력란은 서로 동기화됩니다.

자주 묻는 질문

틴트와 셰이드의 차이는 무엇인가요?

틴트는 기준 색을 흰색과 섞은 색으로 더 밝고 부드러워집니다. 셰이드는 기준 색을 검은색과 섞은 색으로 더 어둡고 진해집니다. 이 도구는 왼쪽의 가장 밝은 색부터 오른쪽의 가장 어두운 색까지 한 줄에 모두 보여 줍니다.

입력한 색상이나 데이터가 서버로 업로드되나요?

아니요. 팔레트 전체가 브라우저의 자바스크립트로 로컬에서 생성됩니다. 입력하거나 복사한 내용은 어디로도 전송, 저장, 기록되지 않습니다.

특정 음영은 어떻게 복사하나요?

줄에 있는 색상 칸을 클릭하면 해당 hex 코드가 클립보드에 복사됩니다. 복사되면 칸에 잠깐 확인 표시가 나타나 값이 복사된 것을 알 수 있습니다.