색상 셰이드 생성기

색상 셰이드 생성기란?

색상 셰이드 생성기는 기준 HEX 색 하나를 디자인 시스템에 바로 쓸 수 있는 완전한 틴트·셰이드 스케일로 바꿔 줍니다. RGB에서 선형으로만 섞는 대신 OKLCH나 HSL에서 보간할 수 있어 색조는 안정적으로 유지되고 명도는 고르게 배분되므로, 탁하거나 뿌옇게 뜬 단계 없이 지각적으로 균형 잡힌 스케일을 얻습니다. 단계 수는 2에서 24까지, 또는 쉼표로 구분한 사용자 라벨 목록으로 자유롭게 정하고 색조를 이동하거나 채도를 조절할 수 있습니다. 또한 각 단계의 WCAG 대비 힌트로 어떤 색이 흰 배경·검은 배경에서 텍스트로 쓸 만한지 확인하고, 완성한 스케일을 CSS 커스텀 속성·Tailwind 색 설정 객체·JSON으로 한 번에 복사할 수 있습니다.

색상 셰이드 생성기 사용법

1. 기준 색상(HEX) 입력란에 #rrggbb 또는 #rgb 형식으로 기준 색을 입력하거나, 큰 견본을 클릭해 시각적으로 고르세요.
2. 색 공간을 고르세요. OKLCH·HSL 은 색조가 안정적이고 지각적으로 균등한 스케일, RGB 는 기존의 선형 혼합입니다.
3. 원하는 단계 수(2~24)를 정하거나, 설정을 열어 쉼표로 구분한 사용자 단계 목록 입력, 색조 이동, 채도 조절, 내보내기 색 이름 설정을 하세요.
4. 각 행의 대비 셀 두 개(흰 배경·검은 배경의 글자 A)를 확인하세요. 해당 색이 텍스트용 WCAG AA를 충족하면 강조됩니다.
5. 단계별 HEX를 개별 복사하거나, 복사 버튼으로 스케일 전체를 CSS 변수·Tailwind 설정·JSON으로 복사하세요.

예시

자주 묻는 질문

RGB, HSL, OKLCH 옵션은 무엇이 다른가요?

RGB는 색을 흰색·검정 쪽으로 선형으로 섞어 빠르지만 중간 톤이 고르지 않게 보일 수 있습니다. HSL과 OKLCH는 색조를 유지하며 명도를 고르게 배분하고, 특히 OKLCH는 지각적으로 균일해 각 단계가 동일한 밝기 도약처럼 보입니다. 가장 균형 잡힌 스케일을 원하면 OKLCH를 고르세요.

몇 단계까지 만들 수 있고 이름을 붙일 수 있나요?

단계 수는 2에서 24까지 자유롭게 정합니다. 11단계는 익숙한 Tailwind 번호(50, 100…900, 950)를 쓰고, 다른 개수는 50~950 사이에 고르게 배분됩니다. 설정에서 쉼표로 구분한 사용자 라벨 목록을 입력하면 단계 수보다 우선하며 각 단계가 입력한 그대로 이름이 됩니다.

WCAG 대비 힌트는 어떻게 계산하나요?

각 색에 대해 상대 휘도로 순백·순흑과의 WCAG 대비비를 계산합니다. 각 행의 작은 셀 두 개는 흰 배경·검은 배경의 글자 A를 보여 주며, 대비비가 4.5:1(일반 텍스트 AA)에 이르면 강조됩니다. 마우스를 올리면 정확한 비율과 AA인지 AAA인지 알 수 있습니다.

제 색상 데이터가 어딘가로 업로드되나요?

아니요. 색 연산, 대비 검사, 세 가지 내보내기 모두 브라우저 안에서만 실행되므로 어떤 색상 값도 서버로 전송되지 않습니다. 오프라인에서 작동하며 팔레트가 비공개로 유지됩니다.