HEX RGB 변환

HEX 색상 코드를 두 자리씩 세 쌍으로 나눠 16진수로 읽으면 RGB가 됩니다. #1E88E5는 rgb(30, 136, 229)이고, #0AF 같은 짧은 코드는 #00AAFF, 즉 rgb(0, 170, 255)로 풀립니다. 코드를 붙여 넣으면 모든 형식을 한 번에 보여 줍니다.

사용법

1. 큰 색상 견본을 눌러 컬러 피커를 열거나, 스포이트로 화면의 색을 추출하거나, 각 입력란에 직접 입력합니다.
2. #hex, rgb(), hsl(), hwb(), oklch(), lab(), 색 이름 등 CSS 색상을 입력란이나 페이지 아무 곳에 붙여 넣을 수 있습니다.
3. 각 형식 옆의 복사 버튼으로 코드를 복사합니다. 불투명도 슬라이더로 투명도를 더할 수 있습니다.
4. 팔레트에서 견본을 누르면 현재 색이 되고, 길게 누르면(오른쪽 클릭) HEX가 복사됩니다. 명도 대비 탭에서 글자색과 배경색을 정하고, 기준에 못 미치면 제안 색을 눌러 고칩니다.

• WCAG 2.1은 일반 글자에 4.5:1(AA), AAA에 7:1을 요구합니다. 큰 글자(24 px 또는 굵은 18.66 px)는 AA 3:1, AAA 4.5:1이며 UI 요소와 그래픽은 3:1이 필요합니다.
• 제안 색은 색상과 채도를 유지하고 명도(OKLCH)만 바꿔 기준을 통과하는 가장 가까운 값을 찾습니다.
• 반투명 색은 배경과 합성한 뒤 대비율을 계산합니다.
• CMYK 값은 단순 변환입니다. 인쇄용이라면 인쇄소의 색상 프로파일을 사용하세요.
• 최근 사용한 색은 이 브라우저에만 저장됩니다.

색상 코드 형식

HEX는 CSS와 디자인 툴에서 쓰는 여섯 자리 코드로, #1E88E5는 빨강 1E(30), 초록 88(136), 파랑 E5(229)를 뜻합니다. RGB는 같은 값을 0~255 십진수로 적은 것입니다. HSL은 색상(0~360°), 채도, 명도로 나타내 색을 어둡게 하거나 부드럽게 바꾸기 쉽습니다. HSV는 대부분의 색상 선택 사각형이 쓰는 모델입니다.

OKLCH는 지각적으로 균일한 Oklab 색 공간을 바탕으로 한 새로운 CSS 형식으로, 명도를 같은 폭으로 바꾸면 눈에도 같은 차이로 보입니다. 단계별 색 만들기나 접근성 좋은 팔레트에 잘 맞습니다. CMYK는 인쇄 잉크 양을 나타내는데, 여기 값은 프로파일 없는 단순 변환이므로 정확한 인쇄 색은 인쇄소 프로파일을 쓰세요.

직접 변환하는 방법

HEX를 RGB로 바꾸려면 코드를 두 자리씩 세 쌍으로 나눠 16진수에서 변환합니다. #FF6347은 255, 99, 71입니다. RGB에서 CMYK는 K = 1 − max(R, G, B) / 255, C = (1 − R/255 − K) / (1 − K)이고 M과 Y도 같은 방식입니다. 순수한 주황 rgb(255, 165, 0)은 cmyk(0%, 35%, 100%, 0%)입니다. 이 도구는 이 모든 계산을 즉시 하고, 색 이름과 rgb(), hsl(), hwb(), lab(), oklch() 입력도 받습니다.

팔레트 만들기

흰색을 섞은 밝은 톤과 검은색을 섞은 어두운 톤으로 배경, 테두리, 마우스 오버 색에 쓸 단계를 만들 수 있습니다. 배색 팔레트는 색상을 돌려 만듭니다. 보색(180°), 유사색(±30°), 3색 배색(120°), 4색 배색(90°씩)이 있습니다. 최근 색은 이 브라우저에만 저장됩니다.

자주 묻는 질문