색상 음영·틴트 생성기

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

기준 hex 색상을 고르거나 붙여넣으면 가장 밝은 틴트부터 가장 어두운 셰이드까지 이어지는 색상 칸을 즉시 만들어 주며, 입력한 원본 색상은 가운데에 놓입니다. 슬라이더 두 개로 모양을 정합니다 — 칸 수는 3~20개, 칸 사이 간격은 2~30%이고 기본값은 10칸·10%입니다. 틴트는 기준 색을 흰색 쪽으로, 셰이드는 검은색 쪽으로 섞은 색으로, 버튼·호버 상태·테두리·배경·차트에 쓰기 좋은 깔끔한 단색 계열 팔레트를 얻을 수 있습니다. 각 칸에는 정확한 hex 코드가 표시되고, 한 번 클릭하면 그 값이 클립보드에 복사되며 바로 아래에 rgb()·hsl() 값과 기준 색에서 얼마나 떨어졌는지가 함께 표시됩니다. 색상 칸 아래에는 팔레트 전체가 CSS 사용자 정의 속성이나 JSON 배열로 적혀 있고, 전체 복사·내려받기·지금 만든 배색을 그대로 여는 링크 복사 버튼이 붙어 있습니다.

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

각 칸은 기준 RGB 채널을 순백(틴트) 또는 순흑(셰이드) 쪽으로 섞어서 만들며, 가운데에서 한 칸 멀어질 때마다 설정한 간격만큼 비율이 커지며, 90%에 이르면 더 커지지 않습니다. 양 끝이 #ffffff나 #000000로 뭉개지지 않도록 거기서 멈추기 때문에, 90%를 넘는 칸은 마지막 색이 반복됩니다 — 칸 수가 많고 간격이 넓으면(20칸·30%) 반복이 생기며 화면이 몇 칸인지 알려 줍니다. 반복을 피하려면 간격이나 칸 수를 줄이세요. 계산이 결정적이라 같은 색을 넣으면 항상 같은 팔레트가 나옵니다. 표준 6자리 hex, #fff 같은 축약형, 앞의 # 없는 값 모두 입력할 수 있으며 색상 선택기와 텍스트 입력란은 서로 동기화됩니다.