HEX와 RGB는 다른 색인가요?

같은 색을 적는 방법만 다릅니다. HEX는 빨강, 초록, 파랑의 세기를 각각 16진수 두 자리로 이어 붙인 것이고 RGB는 같은 값을 0부터 255까지의 10진수로 적은 것입니다. #1f6feb와 rgb(31, 111, 235)는 화면에서 똑같이 보입니다.

화면 색을 CMYK로 바꾼 값을 인쇄소에 그대로 넘겨도 되나요?

참고용으로만 쓰세요. 이 도구의 CMYK는 단순 계산식으로 구한 값이고, 실제 인쇄 색은 종이와 잉크, 인쇄기에 맞춘 색상 프로파일에 따라 달라집니다. 형광에 가까운 화면 색은 인쇄로 그대로 나오지 않습니다. 색이 중요한 인쇄물은 인쇄소의 교정쇄나 별색 견본으로 확인해야 합니다.

명도 대비 4.5:1은 어디에서 정한 기준인가요?

웹 콘텐츠 접근성 지침(WCAG) 2.1의 AA 등급 기준입니다. 보통 크기의 글자는 배경과의 대비가 4.5:1 이상, 큰 글자는 3:1 이상이어야 합니다. 한국의 웹 접근성 국가표준(한국형 웹 콘텐츠 접근성 지침)도 같은 4.5:1을 씁니다.

큰 글자는 얼마나 커야 3:1 기준을 쓸 수 있나요?

WCAG는 18pt(약 24px) 이상이거나 굵은 글씨로 14pt(약 18.66px) 이상인 글자를 큰 글자로 봅니다. 그보다 작은 글자는 굵더라도 4.5:1을 맞춰야 합니다.

투명도가 있는 색도 넣을 수 있나요?

넣을 수 있습니다. 8자리 HEX나 rgb(31 111 235 / 0.5) 같은 값을 읽고 투명도를 유지해 변환합니다. 다만 명도 대비는 뒤에 어떤 색이 비치는지에 따라 달라지므로 불투명한 색으로 보고 계산합니다.

색 이름은 어떤 것을 쓸 수 있나요?

CSS에 정해진 영어 색 이름 140여 개(tomato, skyblue, rebeccapurple 등)와 빨강, 하늘색, 연두 같은 기본 한글 색 이름을 읽습니다. 결과의 색 이름 칸에는 넣은 색과 가장 가까운 CSS 색 이름을 보여 줍니다.

색상 변환 (HEX·RGB·HSL·CMYK), 어울리는 색, 명도 대비 검사

🔒 입력한 내용과 파일은 이 브라우저 안에서만 처리합니다. 서버로 보내지 않습니다.

색상 변환·명도 대비 검사 사용법

색 하나를 여러 표기로 바꿔 보고, 어울리는 색을 찾고, 글자가 배경 위에서 충분히 잘 보이는지 검사하는 도구입니다. 디자인 시안의 HEX 값을 CSS의 hsl()로 옮길 때, 로고 색에 맞는 보조 색이 필요할 때, 버튼 글자가 흐리다는 지적을 받고 기준을 확인할 때 씁니다.

색 변환·조합 탭

색 값 칸에 값을 넣습니다. #1f6feb, 1f6feb, rgb(31, 111, 235), hsl(216 84% 52%), hsv(216 87% 92%), cmyk(87 53 0 8), tomato, 하늘색을 모두 읽습니다. 옆의 색 고르기 칸에서 골라도 됩니다.
아래 표에 HEX, RGB, HSL, HSV, CMYK, 가장 가까운 색 이름이 나오고 줄마다 복사 버튼이 있습니다.
표 아래에는 이 색을 배경으로 썼을 때 흰 글자와 검은 글자 가운데 어느 쪽이 잘 보이는지 대비 숫자와 함께 알려 줍니다.
어울리는 색의 색 칸을 누르면 그 색이 새 기준 색이 됩니다. 조합 색 모두 복사는 조합별 HEX 목록을, CSS 변수로 복사는 --comp-1 같은 이름을 붙인 :root 블록을 복사합니다.

예를 들어 #1f6feb를 넣으면 rgb(31, 111, 235), hsl(216 84% 52%), hsv(216 87% 92%), cmyk(87% 53% 0% 8%)가 나오고 가장 가까운 이름은 royalblue입니다. 흰 글자와의 대비는 4.63:1, 검은 글자와의 대비는 4.53:1이라 흰 글자가 조금 더 잘 보인다고 표시됩니다. 이 색 주소 복사를 누르면 이 색이 담긴 주소가 복사되어 다른 사람이 열었을 때 같은 색이 바로 보입니다. 크롬과 엣지에서는 화면에서 색 찍기 버튼이 함께 나타나 화면의 아무 곳이나 눌러 색을 가져올 수 있습니다.

표기별 쓰임

표기	뜻	쓰기 좋은 곳
HEX	빨강, 초록, 파랑을 16진수 두 자리씩	디자인 도구와 CSS에서 값을 주고받을 때
RGB	같은 값을 0~255로	프로그램 코드, 투명도를 함께 적을 때
HSL	색상(0~360도), 채도, 밝기	같은 색상에서 더 밝게, 더 흐리게 조절할 때
HSV	색상, 채도, 명도	포토샵 등 그림 프로그램의 색 고르기 창(HSB)
CMYK	청록, 자홍, 노랑, 검정 잉크의 비율	인쇄물의 대략적인 값 확인

어울리는 색을 만드는 규칙

보색: 색상환에서 180도 반대편 색. 강조 버튼처럼 눈에 띄어야 하는 곳에 조금만 씁니다.
유사색: 양옆 30도의 색. 차분하게 어울려 배경과 보조 요소에 알맞습니다.
삼색 조합: 120도씩 떨어진 세 색. 화려하므로 한 색을 주로 쓰고 나머지는 작게 씁니다.
분할 보색: 보색의 양옆(150도, 210도) 색. 보색보다 덜 부딪칩니다.
밝기 단계: 색상과 채도는 두고 밝기만 10%에서 95%까지 바꾼 일곱 단계. 호버 색, 테두리, 옅은 배경을 한 계열로 맞출 때 씁니다.

명도 대비 검사 탭

글자 색과 배경 색을 넣으면 두 색의 명도 대비와 기준별 통과 여부가 나옵니다. 대비는 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다.

기준	보통 글자	큰 글자, 아이콘·입력칸 테두리
AA (대부분의 서비스가 맞추는 수준)	4.5:1 이상	3:1 이상
AAA (가장 엄격)	7:1 이상	4.5:1 이상

기준은 W3C의 웹 콘텐츠 접근성 지침(WCAG) 2.1이며, 한국형 웹 콘텐츠 접근성 지침도 보통 글자에 4.5:1을 요구합니다. 흰 글자(#ffffff)와 배경 #1f6feb는 4.63:1로 AA 보통 글자를 통과하고 AAA 보통 글자는 미달입니다. 회색 글자 #999999를 흰 배경에 쓰면 2.84:1로 모든 기준에 못 미칩니다. 이때 글자 색을 AA에 맞게 조정을 누르면 색상과 채도는 그대로 두고 밝기만 움직여 4.5:1을 넘는 가장 가까운 색으로 바꿔 줍니다. 두 색 바꾸기는 글자와 배경을 서로 바꾸고, 결과 복사는 두 색과 판정을 글로 복사해 검수 문서에 붙일 수 있게 합니다.

여러 색 한 번에 탭

색 값을 한 줄에 하나씩 붙여 넣으면 줄마다 HEX, RGB, HSL, CMYK, 가까운 이름을 표로 보여 줍니다. 형식이 섞여 있어도 되고, 읽지 못한 줄은 몇 번째 줄인지 알려 주고 건너뜁니다. 브랜드 안내서의 색 목록을 한꺼번에 다른 표기로 옮길 때 쓰고, 표를 CSV로 저장, HEX만 복사, 표 복사로 가져갑니다.

알아 둘 점

HSL과 CMYK는 정수로 반올림해 보여 주므로 다시 HEX로 바꾸면 끝자리가 1 정도 달라질 수 있습니다. 정확한 값이 필요하면 HEX를 기준으로 삼으세요.
명도 대비는 색각 이상이 있는 사람과 밝은 야외에서 화면을 보는 사람 모두에게 영향을 줍니다. 대비를 통과해도 빨강과 초록만으로 뜻을 구분하는 화면은 따로 고쳐야 합니다.
같은 값이라도 모니터마다 색이 다르게 보입니다. 색 값은 약속일 뿐 보이는 색을 보장하지 않습니다.

마지막 수정 2026-11-09. 있었으면 하는 기능이나 불편한 점은 이 도구에 건의하기로 알려 주세요.

색상 변환·명도 대비 검사