HEX · RGB · HSL · 색상표 · 명도 대비

색상 코드 변환, 사진 속 색까지 뽑아 드려요

코드를 넣거나 색을 고르면 HEX, RGB, HSL로 바로 바꿔요. 색상표에서 고르거나 사진을 눌러 색을 뽑고, 글자로 썼을 때 잘 읽히는지도 확인해요.

색 바꾸기

HEX
−
RGB
−
HSL
−
CMYK (인쇄 참고용)
−

같은 색의 밝고 어두운 단계

글자색과 배경의 명도 대비

위의 색으로 쓴 글자예요. 가나다 ABC 123

명도 대비
−
보통 글자 AA
−
보통 글자 AAA
−
큰 글자 AA
−
큰 글자 AAA
−
아이콘·그래픽
−

사진에서 색 뽑기

색상표에서 고르기

고른 색과 사진은 이 브라우저 안에서만 쓰고, 어디에도 올리거나 저장하지 않아요.

색상 코드 읽는 법

색상 코드의 종류와 뜻
표기뜻
HEX #2E8B57빨강, 초록, 파랑을 16진수 두 자리씩 적어요. 00이 가장 약하고 FF가 가장 강해요.
RGB (46, 139, 87)빨강, 초록, 파랑을 0~255로 적어요. HEX와 같은 값을 10진수로 쓴 거예요.
HSL (146, 50%, 36%)색상각 0~360도, 채도, 밝기로 적어요. 밝기 50%가 그 색의 기본이고 0%는 검정, 100%는 흰색이에요.
CMYK인쇄 잉크의 비율이에요. 시안, 마젠타, 노랑, 검정으로 적어요.

밝기만 조금 바꾸고 싶을 때는 HSL이 편해요. 도구의 ‘밝고 어두운 단계’는 색상과 채도를 그대로 두고 밝기만 바꾼 색이에요.

명도 대비, 글자가 잘 읽히는 기준

글자색과 배경의 밝기 차이를 수치로 나타낸 값이에요. 1:1은 차이가 없고 21:1은 검정과 흰색이에요. 웹 접근성 지침 WCAG 2.2는 다음 기준을 둬요.

WCAG 2.2 명도 대비 기준
대상AAAAA
보통 글자4.5:17:1
큰 글자3:14.5:1
아이콘과 그래픽3:1기준 없음

큰 글자는 18포인트(약 24px) 이상이거나, 굵게 쓴 14포인트(약 18.7px) 이상이에요. 한글 같은 글자는 이와 같은 크기로 보이는 값을 쓰라고 적혀 있어요. 로고와 꾸밈 글자, 누를 수 없는 비활성 버튼은 기준에서 빠져요.

대비는 이렇게 계산해요

화면은 빛을 더해서, 인쇄는 잉크로 빛을 빼서 색을 만들어요. 두 방식이 낼 수 있는 색의 범위가 달라서 화면의 선명한 색이 인쇄로는 안 나오기도 해요.

정확한 변환에는 기기와 종이에 맞는 색 프로필이 필요해요. 이 도구의 CMYK는 단순 계산으로 낸 참고값이니, 인쇄물은 인쇄소의 안내와 교정쇄로 확인하세요.

사진에서 색 뽑기

자주 묻는 질문

어떤 형식으로 넣을 수 있나요?

#2E8B57, 2e8b57, #abc, rgb(46, 139, 87), 46 139 87, hsl(146, 50%, 36%)처럼 넣으면 돼요. 색상표의 이름(바다 초록, seagreen)도 읽어요.

HSL로 바꿨다가 되돌리면 값이 조금 달라요.

HSL은 정수로 반올림해서 보여 줘요. 예를 들어 rgb(46, 139, 87)은 hsl(146, 50%, 36%)인데, 이 값을 되돌리면 rgb(46, 138, 86)이 돼요. 정확한 값은 HEX나 RGB로 저장하세요.

색상표의 이름은 공식인가요?

영어 이름은 CSS 표준 색 이름이에요. 값은 표준을 따르지만, 한글 이름은 알아보기 쉽게 붙인 것이에요.

투명도는 어떻게 되나요?

#2E8B57FF나 rgba(46, 139, 87, 0.5)를 넣으면 색만 읽고 투명도는 빼요.

같은 코드인데 화면마다 달라 보여요.

모니터의 밝기와 색 설정이 달라서 그래요. 코드는 같은 색을 가리켜도 실제 보이는 색은 기기마다 달라요.

대비를 통과하면 누구나 잘 읽나요?

기준을 넘어도 글자 크기와 글꼴에 따라 읽기 어려울 수 있어요. 실제 화면에서 함께 확인하세요.

색을 고를 때

글자색부터 재 보세요

회색 글자는 예뻐 보여도 4.5:1에 못 미치기 쉬워요.

색만으로 구분하지 마세요

빨강과 초록은 구분이 어려운 사람도 있으니 글자나 아이콘도 함께 쓰세요.

단계를 활용

같은 색의 밝고 어두운 단계를 쓰면 화면이 어수선해지지 않아요.

코드는 HEX로 저장

반올림이 없어서 다시 쓸 때 값이 달라지지 않아요.

같이 보면 좋은 것

다른 날의 문구와 카드

참고한 자료

참고용 도구예요. CMYK 값은 단순 계산이라 실제 인쇄 색과 다를 수 있어요. 발행