색상 틴트 생성기
색상에 흰색을 일정한 비율로 섞어 더 밝은 틴트를 생성합니다. CSS 형식으로 색상 하나를 입력하고, 2~20단계와 혼합 공간을 선택하면 원래 색상부터 각 틴트의 HEX, RGB, HSL, OKLCH 값이 담긴 표가 표시됩니다. sRGB 혼합은 기존 틴트 도구와 Sass에 맞고, OKLab은 지각적으로 균일한 단계를 제공합니다. 배경, 호버 상태, 스케일에 적합합니다.
자주 묻는 질문
틴트란 무엇인가요?
틴트는 색상에 흰색을 섞은 것입니다. 색조는 유지하면서 더 밝고 옅어집니다. 검은색을 섞은 셰이드나 회색을 섞은 톤과는 다릅니다.
단계별 간격은 어떻게 정해지나요?
단계가 N개일 때 k번째 행에서는 색상에 흰색을 (k - 1) / N 비율로 섞습니다. 따라서 10단계는 0%, 10%, 20% 순으로 90%까지 이어집니다. 첫 번째 행은 항상 원래 색상이며, 순수 흰색은 목록에 포함되지 않습니다.
sRGB 혼합과 OKLab 혼합은 어떻게 다른가요?
sRGB 혼합은 감마 인코딩된 채널 값의 평균을 계산합니다. Sass mix()과 대부분의 기존 틴트 생성기에서 흰색을 섞는 방식입니다. OKLab 혼합은 지각 공간에서 이루어지므로 명도 단계가 더 균일하게 보이고 밝은 부분의 색이 덜 빠르게 바래집니다.
어떤 입력 형식을 사용할 수 있나요?
#이 있거나 없는 hex 코드, CSS 색상 이름, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), cmyk()을 사용할 수 있습니다. 한 번 실행할 때 색상 하나를 입력하세요.
틴트를 몇 개까지 생성할 수 있나요?
한 번 실행할 때 2~20개까지 생성할 수 있으며, 기본값은 10개입니다. 개수에는 첫 번째 행의 원래 색상도 포함됩니다.
표에는 어떤 값이 표시되나요?
각 단계의 흰색 비율, hex 코드, rgb(), hsl(), 최신 CSS 구문의 oklch()가 표시됩니다. RGB 채널은 정수이며, HSL 백분율은 소수점 이하 최대 두 자리, OKLCH 명도와 채도는 최대 네 자리까지 표시됩니다.
투명한 색상은 어떻게 처리되나요?
흰색을 같은 알파값으로 섞기 때문에 입력 색상의 알파값이 모든 틴트에 유지됩니다. 따라서 hex 코드는 8자리이며 CSS 함수는 슬래시 뒤에 알파값을 붙입니다.
sRGB 범위를 벗어나는 색상은 어떻게 처리되나요?
혼합에는 전체 색상이 사용되지만 HEX, RGB, HSL은 sRGB만 표시할 수 있습니다. 따라서 색역을 벗어난 단계는 해당 열에서 CSS Color 4 알고리즘을 사용해 sRGB로 매핑됩니다. OKLCH 열에는 매핑되지 않은 값이 유지됩니다.
CSS에서 틴트를 어떻게 사용하나요?
hex 또는 oklch() 값을 --brand-100 및 --brand-200 같은 사용자 지정 속성에 복사하세요. 브라우저에서 직접 혼합하려면 color-mix(in oklab, var(--brand) 80%, white)을 사용하세요. OKLab 설정의 20% 틴트와 동일한 결과가 나옵니다.
밝은 틴트에 흰색 텍스트를 사용할 수 있나요?
보통은 어렵습니다. 밝은 틴트는 흰색과의 대비가 낮기 때문입니다. 밝은 틴트에는 어두운 텍스트를 사용하고 대비 검사기로 각 조합을 확인하세요. 일반 텍스트는 WCAG AA 기준에 따라 최소 4.5:1의 대비가 필요합니다.