CMYK 근사값을 그대로 인쇄소에 전달
표시된 CMYK 값은 프로파일 없는 수학적 근사치입니다. 인쇄기, 잉크, 종이, 렌더링 의도, ICC 프로파일에 따라 색분해 결과가 크게 달라질 수 있습니다.
WCAG 대비를 계산하는 HEX·RGB·HSL 색상 변환기
색상브라우저에서 실행(업로드 없음)
HEX, CSS rgb()/rgba(), hsl()/hsla(), CSS 이름색에서 길이가 제한된 sRGB 색상을 읽고 표준화한 HEX, RGB, HSL과 HSV, 프로파일 없는 CMYK 참고값을 비교합니다. 투명 색상은 흰색 또는 검은색 바탕에 먼저 합성한 뒤 흰색·검은색 글자의 WCAG 2.2 대비를 계산합니다.
다음에 할 작업
관련 작업 흐름을 이어가거나 이 작업 다음에 자주 사용하는 도구를 열어보세요.
작업 가이드
CSS 색상을 변환하고 글자 대비 검증하기
색상 변환기로 검토 가능한 sRGB 값을 만들되 최종 판단은 실제 문맥에서 내립니다. 원본 토큰을 보존하고, 투명도를 실제 바탕에 합성하고, 모든 상태를 검사하며, 프로파일 없는 CMYK 근사값을 인쇄 완성 파일과 구분합니다.
열기관련 도구코드 포맷 워크벤치 | CSS, HTML, JavaScript 외
형식별 엔진으로 8개 코드·데이터 언어를 로컬 포맷, 압축, 구문 검사합니다.
열기관련 도구이미지 워터마크 | 텍스트·로고를 로컬에서 추가
정적 PNG, JPEG, WebP 한 장 또는 제한된 묶음에 텍스트·로고 워터마크를 로컬로 추가합니다.
열기관련 도구Markdown 미리보기 | 정제 HTML 변환기
Markdown을 로컬에서 미리 보고 표, 작업 목록, 코드, 수식, 각주가 포함된 정제 HTML을 만듭니다.
열기이 도구 사용 방법
지원하는 HEX, CSS RGB, CSS HSL, transparent 또는 CSS 이름색을 입력하고 변환합니다.
표준화한 HEX, RGB, HSL 결과와 CSS가 아닌 HSV·CMYK 참고값을 비교합니다.
텍스트를 다시 파싱하지 않고 RGB, HSL, 알파 조절기로 sRGB 색상을 조정합니다.
투명도가 있으면 대비를 읽기 전에 실제 흰색 또는 검은색 바탕을 선택합니다.
흰색·검은색 글자를 일반 글자 4.5:1, 큰 글자 3:1 AA 기준과 비교합니다.
필요한 형식을 복사한 뒤 실제 CSS, 디자인 토큰, 브라우저, 인쇄 워크플로에서 다시 검증합니다.
이 도구를 써야 할 때
투명도를 잃지 않는 CSS 변수 마이그레이션
알파를 유지하고 sRGB 잘림을 확인하면서 기존 CSS 토큰을 HEX, rgba(), hsla() 사이에서 옮깁니다.
디자인 시스템 색상 토큰 문서화
디자인 토큰의 표준 HEX, RGB, HSL, HSV 값을 기록하고 CSS에 유효한 문자열을 따로 표시합니다.
반투명 표면의 글자 대비 검토
반투명 오버레이를 흰색 또는 검은색에 합성한 뒤 읽기 쉬운 흰색·검은색 글자를 선택합니다.
WCAG 글자 대비 1차 점검
일반·큰 글자 기준을 더 넓은 상태, 포커스, 시각 접근성 감사의 한 단계로 확인합니다.
웹 색상의 인쇄 핸드오프 준비
CMYK 값을 참고용으로 명시해 대화를 시작하고 원본 sRGB 토큰은 ICC 색상 관리 인쇄 워크플로에 전달합니다.
흔한 실수
알파 색상을 바탕 없이 대비 검사
반투명 전경이나 배경에는 하나의 고정된 표시 색이 없습니다. 바탕에 따라 최종 대비가 달라지므로 실제 흰색 또는 검은색 캔버스를 선택하고 실제 레이어 조합도 검사해야 합니다.
HSV 또는 CMYK 참고값을 CSS에 붙여 넣기
HEX, rgb(), hsl() 결과는 CSS에 사용할 수 있습니다. HSV와 cmyk() 참고 문자열은 디자인 검토용 데이터이며 이 도구가 지원하는 CSS 선언이 아닙니다.
형식 왕복 결과가 원문과 바이트까지 같다고 가정
CSS 파싱, 8비트 HEX 직렬화, 소수 둘째 자리 표시는 채널을 자르거나 반올림할 수 있습니다. 저자 정밀도나 넓은 색역이 중요하면 원본 토큰도 보관하세요.
한 번의 대비 계산을 전체 접근성 감사로 판단
대비 비율 통과만으로 포커스, 비활성 상태, 그라데이션, 이미지, 글꼴 렌더링, 색각 차이, 색상에만 의존한 정보 전달까지 검증할 수 없습니다.
예시
알파가 있는 최신 CSS RGB 색상 변환
CSS Color 4 백분율 입력에 25% 알파가 있습니다. HEX는 RRGGBBAA 순서를 사용하고 RGB와 HSL은 CSS 호환 출력에 알파를 유지합니다.
입력
rgb(100% 0% 50% / 25%)출력
HEX #FF008040 | RGB rgba(255, 0, 128, 0.25) | HSL hsla(330, 100%, 50%, 0.25) | HSV hsv(330deg 100% 100% / 25%) | CMYK 근사값 cmyk(0% 100% 50% 0%)AA 경계 양쪽의 글자색 비교
WCAG AA 경계 근처에서는 표시값을 반올림해도 반올림 전 수치로 내린 통과 판정은 바뀌지 않습니다. 흰색은 4.48:1로 일반 글자 실패, 검은색은 4.69:1로 통과합니다.
입력
#777777출력
흰색 글자: 4.48:1, 일반 AA 실패, 큰 글자 AA 통과 | 검은색 글자: 4.69:1, 일반 AA 통과, 큰 글자 AA 통과 | 권장: 검은색CSS sRGB, 알파, 대비, CMYK 근사값을 구분하는 방법
길이가 제한된 파서는 레거시 쉼표 형식과 최신 공백·슬래시 형식을 포함한 문서화된 HEX·CSS sRGB 구문만 받습니다. Culori가 파싱과 sRGB·HSL·HSV 변환을 수행하며 미지원, 미완성, 유한수가 아닌 값은 마지막 정상 결과를 바꾸지 않고 실패합니다.
HEX는 불투명 색상에 #RRGGBB, 알파가 1보다 작으면 #RRGGBBAA 순서를 사용합니다. CSS RGB·HSL 직렬화는 rgba()/hsla()에 알파를 유지합니다. 표시 가능한 sRGB 범위를 벗어난 CSS 입력은 잘라 내고 경고합니다.
HSL과 HSV는 잘린 동일 sRGB 색상을 원통 좌표로 표현합니다. 무채색에서는 색조가 수학적으로 효력이 없으므로 화면색이 회색인 동안 검토용 색조 조절값을 유지합니다. HSV는 디자인 데이터이며 CSS 함수로 표시하지 않습니다.
CMYK 참고값은 K = 1 - max(R,G,B)를 구하고 K를 제외한 뒤 C, M, Y를 계산합니다. 이 식에는 장치 프로파일이 없어 잉크, 종이, 총잉크량, 검정 생성, 별색, 렌더링 의도를 모델링할 수 없습니다.
알파 색상은 선택한 흰색 또는 검은색 바탕에 source-over 방식으로 합성합니다. 이후 WCAG 상대 휘도로 (L1 + 0.05) / (L2 + 0.05)를 계산합니다. AA 기준은 일반 글자 4.5:1, 큰 글자 3:1입니다.
입력은 256자로 제한됩니다. 변환은 로컬에서 원본을 바꾸지 않고 실행합니다. 이름공간을 분리한 브라우저 저장소에 최근 표준화 색상 최대 8개를 보관할 수 있고 초기화하면 삭제합니다. 실제 색상 값은 변환 분석에 넣지 않습니다.
자주 묻는 질문
어떤 색상 입력을 지원하나요?
#RGB, #RGBA, #RRGGBB, #RRGGBBAA, 최신·레거시 CSS rgb()/rgba(), hsl()/hsla(), transparent, CSS 이름색을 받습니다. 모든 CSS Color 4 색공간이나 currentColor·시스템 색상 해석까지 지원한다고 주장하지 않습니다.
투명도도 보존하나요?
네. 4자리·8자리 HEX와 CSS 알파 구문을 유지합니다. 알파 조절값은 모든 sRGB 출력에 반영됩니다. HSV는 알파를 데이터로 표시하지만 이 CMYK 근사값 자체에는 알파 채널이 없습니다.
CMYK 결과를 인쇄에 바로 쓸 수 있나요?
아닙니다. CMYK 결과는 잘린 sRGB에서 계산한 단순한 프로파일 없는 근사치입니다. 인쇄용 변환은 색상 관리 소프트웨어에서 인쇄소 ICC 프로파일, 용지, 잉크 한도, 검정 생성, 렌더링 의도를 적용해야 합니다.
투명 색상의 대비는 어떻게 계산하나요?
선택한 알파 색상을 흰색 또는 검은색 바탕에 먼저 합성한 다음, 그 불투명 sRGB 결과의 WCAG 상대 휘도와 대비를 계산합니다. 다른 실제 바탕색은 별도로 검사해야 합니다.
HSV 결과를 CSS에 붙여 넣을 수 있나요?
아닙니다. HSV는 디자인 도구 간 값 전달과 밝기 조정에는 유용하지만 CSS Color 4에는 hsv() 색상 함수가 없습니다. CSS에는 HEX, RGB, HSL 결과를 사용하세요.
반올림 규칙은 어떻게 되나요?
HEX는 8비트 채널로 직렬화합니다. RGB는 정수 채널로, HSL·HSV·CMYK·휘도·대비는 제한된 표시 정밀도로 보여 줍니다. 대비 통과 여부는 화면 반올림 전 비율로 판정합니다.
색상 값이 업로드되거나 원격 저장되나요?
변환과 대비 계산은 브라우저에서 실행됩니다. 최근 표준화 색상은 이 브라우저에만 저장되고 초기화하면 삭제됩니다. 집계 분석에는 입력 형식과 경고 플래그만 들어갈 수 있으며 입력 색상 문자열과 복사 결과는 포함하지 않습니다.
이 도구를 검증한 방법
관리 및 검수 SimpleWebUtils검토일
검증 방법: WCAG 대비를 계산하는 HEX·RGB·HSL 색상 변환기 검토에서는 “글자색을 고르기 전 반투명 CSS 토큰 합성”에 표시된 원본을 보존했습니다. “원본 구문과 색공간 분류”, “올바른 WCAG 기준 적용” 단계를 완료한 뒤 가능한 값은 그대로 대조했습니다. 연결된 실패 증거는 “형식 변환 중 알파 삭제”, “합성 결과 대신 원본 색상 검사” 항목별로 확인했습니다.
기대 결과: 반투명 토큰은 #2563EBD1로 정규화되고 흰 배경 위에서 #4C7FEF가 됐으며, 검정 글자는 5.59:1로 일반 AA를 통과하고 흰 글자는 3.76:1로 실패했습니다.
검증한 작업 가이드 열기관련 작업 가이드
도구를 열기 전에 자주 쓰는 작업 흐름과 예시를 확인하세요.
작업 가이드
CSS 색상을 변환하고 글자 대비 검증하기
색상 변환기로 검토 가능한 sRGB 값을 만들되 최종 판단은 실제 문맥에서 내립니다. 원본 토큰을 보존하고, 투명도를 실제 바탕에 합성하고, 모든 상태를 검사하며, 프로파일 없는 CMYK 근사값을 인쇄 완성 파일과 구분합니다.
작업 가이드공유 전 상품 이미지에 일관된 워터마크 넣기
상품, 교정본, 포트폴리오 이미지 폴더를 검수된 공유용 묶음으로 만드는 흐름입니다. 원본을 보존하고 목적에 맞게 텍스트 또는 로고를 선택한 뒤 서로 다른 화면 비율에서 대비와 회전 위치를 시험하고, 지원하는 정적 파일만 처리해 다운로드 후 형식, 메타데이터, 이름, 화질을 확인합니다.
관련 도구
관리 중인 다른 작업 흐름을 이어서 사용해 보세요
코드 포맷 워크벤치 | CSS, HTML, JavaScript 외
형식별 엔진으로 8개 코드·데이터 언어를 로컬 포맷, 압축, 구문 검사합니다.
포맷팅
이미지 워터마크 | 텍스트·로고를 로컬에서 추가
정적 PNG, JPEG, WebP 한 장 또는 제한된 묶음에 텍스트·로고 워터마크를 로컬로 추가합니다.
이미지
Markdown 미리보기 | 정제 HTML 변환기
Markdown을 로컬에서 미리 보고 표, 작업 목록, 코드, 수식, 각주가 포함된 정제 HTML을 만듭니다.
포맷팅
PDF 워터마크 | 텍스트·이미지 워터마크 추가
PDF에 텍스트 또는 이미지 워터마크를 추가하고 페이지 범위, 투명도, 회전, 위치를 조정합니다.
PDF
QR 코드 생성기 | 정확한 PNG·SVG와 스캔 안전 설정
입력한 정확한 텍스트나 준비된 URL·Wi-Fi·이메일·전화·SMS·vCard payload를 PNG 또는 SVG QR로 만듭니다.
QR코드