색상 셰이드 생성기
색상에 검은색을 일정한 비율로 섞어 더 어두운 셰이드를 생성합니다. CSS 형식으로 색상 하나를 입력하고, 2~20단계와 혼합 공간을 선택하면 원래 색상부터 각 셰이드의 HEX, RGB, HSL, OKLCH 값이 담긴 표가 표시됩니다. sRGB 혼합은 기존 셰이드 도구와 Sass에 맞고, OKLab은 지각적으로 균일한 단계를 제공합니다. UI 색상 스케일을 만들 때 적합합니다.
자주 묻는 질문
셰이드란 무엇인가요?
셰이드는 색상에 검은색을 섞은 것입니다. 색조는 유지하면서 더 어두워집니다. 흰색을 섞은 틴트나 회색을 섞은 톤과는 다릅니다.
단계별 간격은 어떻게 정해지나요?
단계가 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-600 및 --brand-700 같은 사용자 지정 속성에 복사하세요. 브라우저에서 직접 혼합하려면 color-mix(in oklab, var(--brand) 80%, black)을 사용하세요. OKLab 설정의 20% 셰이드와 동일한 결과가 나옵니다.
더 어두운 셰이드는 자동으로 접근성을 충족하나요?
아니요. 대비 검사기로 각 셰이드에 놓인 텍스트의 대비를 확인하세요. 어둡게 보이는 셰이드도 다른 어두운 색상이나 색이 있는 텍스트와 함께 사용하면 4.5:1 기준에 미달할 수 있습니다.