사용방법
- HEX/RGB/HSL 중 하나의 포맷으로 색상을 입력하거나 컬러 피커를 사용하여 색상을 선택합니다.
- 입력과 동시에 다른 포맷(CMYK 포함)으로 자동 변환된 값이 표시됩니다.
- WCAG 패널에서 흑백 텍스트와의 명암비 및 AA/AAA 통과 여부를 확인합니다.
- "복사" 버튼을 클릭하여 색상 값을 코드나 디자인 파일에 바로 붙여넣어 사용하세요.
핵심 기능
- HEX/RGB/CMYK 변환 + WCAG 검사: 색상 포맷 변환과 접근성 검사를 한 곳에서 간편하게 처리하세요.
- WCAG 대비 검사: 명암비를 자동으로 계산하고 AA/AAA 통과/실패 여부를 즉시 보여줍니다.
- 인쇄용 CMYK 변환: 화면 색상을 인쇄 디자인에 바로 사용할 수 있는 CMYK 백분율로 출력합니다.
- HSL 색상 공간: 색상/채도/명도를 더 직관적으로 제어하기 위해 HSL 값 조정을 지원합니다.
- 시스템 컬러 피커 연동: OS 내장 컬러 피커를 사용하여 화면 어디서든 정확하게 색상을 추출할 수 있습니다.
관련 도구
이미지를 선택하거나 드래그 앤 드롭, 또는 붙여넣어 브라우저에서 안전하게 픽셀 색상을 추출하세요. HEX/RGB/HSL 값을 복사하고 주요 색상 팔레트를 쉽게 생성할 수 있습니다.
디자인 및 프론트엔드 개발을 위한 Lorem Ipsum 더미 텍스트를 생성하세요. 일반 텍스트, HTML <p> 태그 및 JSON 배열 출력을 지원합니다. 가변 길이(단락/문장/단어) 제어 기능과 중국어(CJK) 더미 텍스트를 제공하며, 서버 업로드 없이 브라우저에서 안전하게 실행됩니다.
가로세로 비율 및 누락된 크기를 빠르게 계산하세요(너비 입력 시 높이 계산/높이 입력 시 너비 계산). TikTok 9:16, YouTube 16:9, Instagram 4:5 등의 프리셋이 내장되어 있으며, aspect-ratio CSS 코드를 자동으로 생성합니다. 서버에 업로드하지 않고 100% 로컬에서 실행됩니다.
계산 논리
- 변환 로직은 RGB↔HSL 및 RGB↔CMYK 간의 표준 수학 매핑 공식을 구현합니다.
- WCAG 검사는 먼저 상대 휘도(relative luminance)를 계산한 후, 이를 바탕으로 대비 비율(contrast ratio)을 구합니다.
- 상대 휘도의 근사 공식: (L = 0.2126R + 0.7152G + 0.0722B)
- 대비 비율 공식: (\frac{L_1 + 0.05}{L_2 + 0.05}) (이 값을 기준 삼아 AA/AAA 임계값과 비교합니다).
FAQ
내 색상이 접근성 표준(WCAG)을 충족하는지 어떻게 확인하나요?
색상을 입력한 후 "WCAG" 패널을 확인하세요. 도구가 흑/백 텍스트와의 대비 비율을 계산하고 AA/AAA 기준 통과/실패 결과를 보여줍니다.
인쇄용으로 HEX를 CMYK로 어떻게 변환하나요?
HEX 코드(예: #FF0000)를 입력하면 이 도구가 인쇄 디자인에 바로 사용할 수 있도록 즉시 CMYK 백분율(예: 0, 100, 100, 0)로 변환해 줍니다.
내 데이터는 안전한가요(로컬/개인정보 보호)?
네. 색상 변환과 대비 계산은 사용자 브라우저의 로컬 환경에서만 수행되며, 어떠한 색상 데이터도 서버로 업로드되지 않습니다.
이 도구는 무료인가요? 제한이 있나요?
가입이나 로그인 없이 100% 무료로 사용할 수 있습니다. 언제든지 변환된 값을 자유롭게 복사하여 사용할 수 있습니다.
WCAG 대비 계산에 왜 0.05를 더하나요?
이는 극한의 상황에서 0으로 나누는 것을 방지하고, 인간의 눈이 인지하는 가독성 특성을 더 잘 반영하기 위한 WCAG 공식 표준 규칙입니다.