색상 코드 변환기 (HEX·RGB·HSL)
HEX·RGB·HSL 코드를 서로 바꿉니다. 어느 형식이든 그대로 붙여넣으면 알아서 읽고, 색 위에 흰 글자와 검은 글자의 대비를 숫자로 보여줍니다.
#3B82F6흰 글자 3.7 : 1 · 검은 글자 5.7 : 1본문이라면 4.5 이상을 권합니다
RGB
HSL
광고
광고 자리
이렇게 계산돼요
HEX는 빨강·초록·파랑을 각각 16진수 두 자리로 적은 것입니다. #FF0000은 빨강이 최대(255)이고 나머지가 0이라는 뜻이라, RGB(255, 0, 0)과 완전히 같은 값을 다르게 적은 것뿐입니다. 세 자리로 줄여 쓴 #ABC는 각 자리를 두 번 반복한 #AABBCC를 뜻합니다. 뒤에 0을 붙인 #A0B0C0가 아니어서, 잘못 늘리면 색이 눈에 띄게 어두워집니다. HSL은 같은 색을 사람이 다루기 쉽게 바꿔 놓은 방식입니다. 색상(H)은 색을 고르는 0~360도의 각도, 채도(S)는 선명한 정도, 밝기(L)는 밝은 정도입니다. 버튼의 호버 색을 만들 때 HEX를 직접 만지면 세 값을 함께 바꿔야 하지만, HSL은 밝기만 몇 % 내리면 됩니다. 주의할 점은 HSL을 거쳐 돌아오면 값이 1~2 어긋날 수 있다는 것입니다. HSL의 채도와 밝기를 정수 퍼센트로 반올림하는 과정에서 정보가 조금 깎이기 때문입니다. 원본 색을 그대로 보관해야 한다면 HEX나 RGB를 기준으로 두고, HSL은 조절용으로만 쓰는 편이 안전합니다.
자주 묻는 질문
됩니다. 색상 코드 칸이 HEX·rgb()·hsl()을 모두 읽습니다. 괄호와 쉼표가 있는 그대로 붙여넣으시면 되고, rgba처럼 투명도가 붙어 있으면 색만 가져오고 투명도는 버립니다. 숫자 세 개만 쉼표로 적어도 RGB로 읽습니다.
각 자리를 두 번 반복한 여섯 자리 코드의 축약형입니다. #ABC는 #AABBCC와 같은 색입니다. 뒤에 0을 붙여 #A0B0C0로 늘리는 것으로 오해하는 경우가 많은데, 그렇게 하면 실제보다 어두운 색이 됩니다.
HSL의 채도와 밝기를 정수 퍼센트로 반올림하기 때문입니다. 100단계로 나눈 값에 담기지 않는 미세한 차이가 버려져서, 되돌리면 RGB 값이 1~2 정도 어긋날 수 있습니다. 눈으로는 구분되지 않지만 디자인 파일과 코드의 값을 정확히 맞춰야 한다면 HEX나 RGB를 기준으로 삼으세요.
이 도구가 흰 글자와 검은 글자의 명도 대비를 둘 다 숫자로 보여줍니다. 본문 글자라면 4.5 이상이면 읽기에 무리가 없습니다. 사람 눈은 초록에 가장 민감해서 밝기를 단순 평균 내면 맞지 않고 채널마다 가중치를 달리 줘야 하는데, 그래서 중간 밝기의 파란색처럼 흰 글자가 어울려 보이는 색에서도 검은 글자의 대비가 더 크게 나오는 일이 생깁니다.
맞습니다. 회색은 빨강·초록·파랑이 모두 같은 값이라 색상환에서 방향을 정할 수 없습니다. 규격상 이런 경우 색상을 0으로 둡니다. 그래서 검정·회색·흰색은 모두 H가 0으로 표시되며, 이 값에 의미를 두면 안 됩니다.
광고
광고 자리
함께 보면 좋은 도구
이미지 압축사진 용량 줄이기와 JPG·PNG·WebP 확장자 변환을 한 번에 합니다. 파일이 서버로 올라가지 않고 브라우저 안에서 처리되며, 가입이나 설치 없이 무료로 씁니다.비밀번호 생성기안전한 무작위 비밀번호(패스워드)를 만듭니다. 길이와 문자 종류를 고르면 강도를 함께 보여주며, 생성은 브라우저 안에서만 이루어집니다.UUID겹치지 않는 고유 식별자(UUID v4)를 한 번에 여러 개 만듭니다. 대문자·하이픈 없음 등 형식을 고를 수 있고, 가지고 있는 값이 올바른지도 검사합니다.QR 생성링크·와이파이·전화·문자를 QR 코드(큐알코드)로 만듭니다. PNG와 SVG로 무료로 내려받을 수 있고 만든 코드는 서버로 전송되지 않습니다.