HEX, RGB, HSL, CMYK 변환과 텍스트 대비 확인법

색상 코드는 같은 색을 다른 방식으로 적은 것이에요. HEX, RGB, HSL은 화면에서 나오는 같은 빛을 설명하므로 반올림 오차를 빼면 서로 정확하게 바꿀 수 있어요. CMYK는 종이에 찍는 잉크를 설명하기 때문에 화면 값에서 바꾼 결과는 추정치일 뿐이에요. WCAG 대비 비율은 두 색의 밝기 차이를 비교하는 별도의 수치이고, 글자가 잘 읽히는지 판단하는 기준이 돼요. 색을 색상 변환기에 붙여 넣으면 모든 형식을 한 번에 볼 수 있어요.

색상 변환기다른 형식의 색상 코드가 필요해요무료로 사용하기

사진, 로고, 스크린샷 안에 있는 색이 필요하다면 먼저 이미지 색상 추출기로 픽셀의 색을 읽은 뒤 HEX 값을 여기에 붙여 넣으세요. 이미지에서 정확한 색을 고르는 방법에서 단계별로 설명해요.

HEX와 RGB는 같은 숫자예요

HEX 코드는 16진수 두 자리씩 세 묶음으로 이루어져 있어요. #34D6A0에는 빨강, 초록, 파랑 값이 각각 들어 있어요. 각 묶음은 00부터 FF까지의 수이고, 10진수로는 0부터 255까지예요. 그래서 34는 52, D6은 214, A0은 160이며, RGB 형식으로는 rgb(52, 214, 160)이 돼요.

숫자를 16진수로 적는 것은 모양만 바꿀 뿐이에요. 짧은 표기 #abc는 각 자리를 두 배로 늘린 #aabbcc와 같아요. 여덟 자리 코드는 끝에 투명도 묶음을 하나 더 붙여요. 00은 완전 투명, FF는 완전 불투명이에요. 예를 들어 #34D6A080은 약 절반쯤 투명한 색이에요. RGBA는 같은 투명도를 0부터 1 사이의 숫자로 적어요.

CSS는 색 이름도 받아요. rebeccapurple은 #663399이에요. 변환기는 브라우저가 직접 색 이름을 읽기 때문에, 브라우저가 아는 이름이라면 모두 쓸 수 있어요.

HSL은 사람이 색을 설명하는 방식에 가까워요

HSL은 색조(hue), 채도(saturation), 명도(lightness)를 뜻해요. 색조는 색상환을 도는 각도예요. 빨강은 0도, 초록은 120도, 파랑은 240도예요. 채도는 색이 회색에서 얼마나 멀리 떨어져 있는지를, 명도는 검은색이나 흰색에서 얼마나 떨어져 있는지를 나타내요.

같은 #34D6A0은 hsl(160, 66%, 52%)예요. 색조는 초록과 파랑 사이에 있고, 채도는 높으며, 명도는 중간보다 살짝 밝아요. HSL은 손으로 고치기가 가장 쉬운 형식이에요. 색조는 그대로 두고 명도만 옮기면 더 밝거나 어두운 색을 얻을 수 있어요.

HSV는 HSL과 비슷하지만, 명도 대신 가장 강한 채널의 밝기인 명도값(value)을 써요. 일부 색상 선택 도구가 이 형식을 쓰기 때문에 다른 도구에서 만날 수도 있어요. 변환기는 두 값을 나란히 보여 주므로 비교해 볼 수 있어요.

CMYK는 잉크용이라서 추정치예요

화면은 빛을 더하는 방식이에요. 빨강, 초록, 파랑을 모두 섞으면 흰색이 돼요. 인쇄는 흰 종이 위에 잉크를 얹어 빛을 빼앗는 방식이에요. 시안, 마젠타, 옐로, 블랙을 써요. 두 방식은 정확히 맞아떨어질 수 없어서 CMYK 값은 언제나 번역에 가까워요.

변환기는 단순한 공식을 써요. 검정 잉크인 K는 0부터 1까지의 척도에서 빨강, 초록, 파랑 값 가운데 가장 큰 값을 1에서 뺀 값이에요. 시안, 마젠타, 옐로는 K를 뺀 나머지 값으로 계산해요. 이 공식은 인쇄기가 쓰는 잉크, 종이, 색상 프로필을 고려하지 않아요. 그래서 인쇄 결과는 달라질 수 있고, 아주 밝은 색은 CMYK 잉크로 아예 인쇄할 수 없을 수도 있어요. CMYK 값은 인쇄소와 대화를 시작하는 용도로 쓰고, 대량 인쇄 전에는 교정쇄를 요청하세요.

대비는 색조가 아니라 밝기의 문제예요

WCAG 대비 비율은 두 색의 상대 휘도(relative luminance)를 비교해요. 휘도는 감마 보정을 거친 빨강, 초록, 파랑 값으로 계산해요. 사람의 눈은 초록에 가장 민감하므로 초록의 비중이 가장 커요. 먼저 각 채널을 0부터 255까지의 척도에서 변환하고, 휘도는 빨강에 0.2126, 초록에 0.7152, 파랑에 0.0722를 곱해 더해서 구해요.

비율은 밝은 쪽 휘도에 0.05를 더한 값을, 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것이에요. 검은 글자를 흰 바탕에 놓으면 가능한 최댓값인 21 대 1이 나와요. 두 색은 색조가 꽤 달라 보여도 명도가 비슷하면 비율이 낮을 수 있어요. 바로 이런 경우를 잡아내려고 이 검사가 있어요. 대비가 낮으면 QR 코드가 인식되지 않는 것과 같은 문제가 생길 수 있어요.

기준 값

WCAG 2.x는 두 단계를 정해 두었고, 요구하는 비율은 글자 크기에 따라 달라요.

• AA 단계: 일반 텍스트는 4.5 대 1, 큰 텍스트는 3 대 1
• AAA 단계: 일반 텍스트는 7 대 1, 큰 텍스트는 4.5 대 1

큰 텍스트는 24픽셀 이상이거나, 굵은 글씨로 18.66픽셀 이상인 텍스트예요. 이보다 작으면 일반 텍스트로 봐요. 흰 바탕의 회색 글자는 흔히 실패하는 경우예요. #777777처럼 중간 회색을 흰 바탕에 놓으면 약 4.48 대 1이 나와요. 일반 텍스트에서는 AA 기준을 아주 조금 못 넘고, 큰 제목에서는 AA를 통과해요.

변환기는 비율을 소수점 둘째 자리에서 반올림해 보여 주지만, 통과와 실패 판정은 정확한 값으로 해요. 그래서 4.50으로 표시되어도 실제로는 기준보다 살짝 낮아서 실패할 수 있어요. 이 검사는 한 가지만 측정해요. 글꼴 두께, 줄 간격, 색맹인 사람이 디자인을 보는 방식은 다루지 않으니, 실제 페이지를 실제 크기로도 확인하세요.

색조와 명도 단계

변환기 아래의 띠는 색을 중심으로 한 아홉 단계를 보여 줘요. 흰색을 섞은 밝은 쪽 네 단계, 원래 색, 검은색을 섞은 어두운 쪽 네 단계예요. 단계를 누르면 그 HEX 코드가 복사돼요. 브랜드 색 하나에서 밝은 배경, 마우스를 올렸을 때의 색, 진한 글자 색처럼 관련된 색들을 한꺼번에 만들어야 할 때 유용해요. 고른 색 짝은 쓰기 전에 대비 섹션으로 꼭 확인하세요.

fixmint로 하는 방법

1. 색상 칸에 HEX, RGB, HSL 값이나 rebeccapurple 같은 CSS 색 이름을 붙여 넣으세요.
2. HEX, RGB, HSL, HSV, CMYK 행을 읽으세요. 필요한 값 옆의 복사를 누르세요. CMYK는 추정치라고 표시돼요.
3. 배경 칸에 배경색을 입력하거나 색 견본을 누르고, 흰색 위, 검은색 위, 내 배경 위 아래의 비율을 확인하세요.
4. 각 비율 아래의 네 가지 표시, 즉 일반 텍스트와 큰 텍스트 각각의 AA와 AAA를 확인하세요.
5. 색조와 명도 단계에서 견본을 누르면 색이 복사돼요.

빠른 답변

CMYK 값은 정확한가요?

아니요. 인쇄기, 종이, 색상 프로필을 고려하지 않는 단순한 산술 변환이에요. 출발점으로만 생각하고, 교정쇄를 요청하세요.

대비 비율이 통과하면 디자인이 접근성 있는 건가요?

텍스트 색이 측정 가능한 기준 하나를 충족했다는 뜻이에요. 접근성은 글자 크기, 간격, 움직임, 페이지 구조에도 달려 있으니, 대비 비율은 전체 검토가 아니라 하나의 지침으로 보세요.

스타일시트에는 어떤 형식으로 저장해야 하나요?

가장 쉽게 읽고 고칠 수 있는 형식이면 됩니다. HEX는 짧고 흔히 쓰여요. HSL은 색조는 그대로 두고 명도만 바꿀 수 있어서 손으로 조정하기가 더 쉬워요.