색상 톤 생성기
색상에 중간 회색을 일정한 단계로 섞어 색조를 생성합니다. 색상은 유지하면서 채도는 낮아집니다. 색상 하나를 CSS 형식으로 입력하고, 2~20단계와 혼합 색 공간을 선택하면 원래 색상부터 각 색조의 HEX, RGB, HSL 및 OKLCH 값이 담긴 표를 확인할 수 있습니다. 차분한 팔레트, 비활성 상태, 은은한 표면색 및 더 부드러운 브랜드 색상 변형에 유용합니다.
자주 묻는 질문
색조란 무엇인가요?
색조는 색상에 회색을 섞은 것입니다. 색상은 유지하면서 더 차분해집니다. 흰색을 섞은 틴트나 검은색을 섞은 셰이드와는 다릅니다.
어떤 회색을 사용하나요?
sRGB 중간 회색 #808080, rgb(128 128 128)를 사용합니다. 따라서 밝은 색은 약간 어두워지고 어두운 색은 약간 밝아지면서 중간 회색에 가까워집니다. 다른 회색을 섞으려면 직접 회색을 지정할 수 있는 Color Mixer를 사용하세요.
단계별 간격은 어떻게 정해지나요?
N단계일 때 k행은 색상에 회색을 (k - 1) / N 비율로 섞습니다. 따라서 10단계에서는 0%, 10%, 20% 순으로 90%까지 표시됩니다. 첫 번째 행은 항상 원래 색상이며, 순수한 회색은 목록에 포함되지 않습니다.
HSL 채도를 낮추는 것과 색조는 어떻게 다른가요?
HSL 채도를 낮추면 HSL 명도는 유지되지만, 회색을 섞으면 명도도 중간값 쪽으로 이동합니다. 따라서 색조는 회색 필터를 통해 본 색상처럼 보여 차분한 배경과 비활성 상태에 적합합니다.
sRGB 혼합과 OKLab 혼합은 어떻게 다른가요?
sRGB 혼합은 감마 인코딩된 채널 값을 평균 내는 방식으로, 물감처럼 색조를 표현하는 차트와 Sass mix()에서 사용하는 전통적인 접근법입니다. OKLab 혼합은 지각 기반 색 공간에서 이루어지므로 단계가 바뀔 때마다 채도가 더 균일하게 감소합니다.
어떤 입력 형식을 사용할 수 있나요?
#이 있거나 없는 hex 코드, CSS 색상 이름, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), cmyk()을 사용할 수 있습니다. 한 번 실행할 때 색상 하나를 입력하세요.
색조를 몇 개까지 생성할 수 있나요?
한 번 실행할 때 2~20개까지 생성할 수 있으며, 기본값은 10개입니다. 개수에는 첫 번째 행의 원래 색상도 포함됩니다.
표에는 어떤 값이 표시되나요?
각 단계의 회색 비율, 16진수 코드, rgb(), hsl() 및 최신 CSS 구문의 oklch()를 표시합니다. RGB 채널은 정수이고, HSL 백분율은 소수점 이하 최대 두 자리, OKLCH 명도와 채도는 소수점 이하 최대 네 자리까지 표시됩니다.
투명한 색상과 넓은 색 영역의 색상은 어떻게 처리되나요?
입력의 알파값은 모든 색조에 유지되므로 16진수 코드는 8자리로 표시됩니다. 색역을 벗어난 단계는 HEX, RGB 및 HSL 열에서 CSS Color 4 알고리즘으로 sRGB 색역에 맞춰 변환되며, OKLCH 열에는 변환되지 않은 값이 표시됩니다.
CSS에서 색조를 어떻게 재현하나요?
16진수 또는 oklch() 값을 복사하거나, 브라우저에서 color-mix(in oklab, var(--brand) 70%, #808080)를 사용해 OKLab 설정의 30% 색조를 혼합할 수 있습니다. color-mix()는 현재 모든 주요 브라우저에서 작동합니다.