색상 틴트 생성기

밝은 색상 단계 만들기

디자인 시스템에서는 흰색과 혼합해 더 밝은 단계를 만드는 경우가 많으며, Bootstrap의 tint-color()도 이 방식을 사용합니다. 흰색이 80–95%인 틴트는 알림, 선택된 행, 배지의 배경에 적합하고, 20–40%인 틴트는 호버 영역과 일러스트에 사용할 수 있는 더 부드러운 브랜드 색상이 됩니다. 비율이 의미를 유지하도록 각 단계를 틴트가 아닌 원래 기본 색상에서 생성하고, 가장 밝은 단계 위의 텍스트나 아이콘에는 기본 색상 자체를 사용하십시오.

틴트가 분필처럼 보이는 이유

흰색을 추가하면 밝기뿐 아니라 채도도 낮아지므로 옅은 틴트가 우유를 탄 듯 보일 수 있고, 특히 파란색은 라벤더색으로 변하기 쉽습니다. 밝은 단계가 어색해 보이면 채도가 약간 더 높은 기본 색상을 사용하거나, 색상 변환기에서 밝기를 직접 설정해 비교하십시오. 틴트가 밝아질수록 그 위의 어두운 텍스트는 대비 기준을 통과하기 쉬워집니다. 사용하는 조합은 대비 검사 도구에서 확인하십시오.

사용 방법

1. 유효한 #RGB 또는 #RRGGBB 값과 원하는 비율을 입력합니다.
2. 고정된 브라우저 로컬 색상 연산을 실행합니다.
3. 색상 견본을 확인하고 결과 또는 팔레트 값을 복사합니다.

개인정보 보호 및 제한사항

색상 값은 이 기기에 보관됩니다. 대비 결과는 수학적 검사 결과일 뿐, WCAG 준수를 포괄적으로 보장하지 않습니다. 사용 상황, 글꼴 렌더링, 텍스트가 아닌 요소의 대비, 사용자 인터페이스 상태는 별도로 검토해야 합니다.