RGB/HSL/CMYK 변환기

HEX나 슬라이더를 바꾸면 나머지 값이 바로 따라옵니다

이 도구는 계산 버튼을 따로 누르지 않습니다. HEX 입력칸, 컬러 피커, RGB/HSL/CMYK 숫자칸과 슬라이더 중 하나를 바꾸면 미리보기와 복사 가능한 결과가 같은 색으로 갱신됩니다.

1. 색을 먼저 정합니다. HEX 입력칸에 #3498DB처럼 넣거나 컬러 피커로 색을 고릅니다. 세 자리 단축 HEX도 여섯 자리로 풀어서 처리합니다.
2. 필요한 색상 모델을 조정합니다. RGB는 0~255, HSL은 Hue 0~360°와 채도·명도 0~100%, CMYK는 각 잉크 비율 0~100% 범위로 움직입니다.
3. 미리보기와 대비를 같이 봅니다. 현재 색 위에서 흰색과 검정 글자의 대비가 어떻게 달라지는지 확인하고, 추천 글자색을 참고합니다.
4. 작업에 맞는 표기만 복사합니다. 웹 CSS에는 HEX·RGB·HSL을, 인쇄 전달용 메모에는 CMYK 근사값을 분리해서 가져가면 됩니다.

RGB, HSL, CMYK는 같은 색을 보는 목적이 다릅니다

같은 파란색이라도 화면에서 조정할 때, CSS에 붙여 넣을 때, 인쇄 쪽에 설명할 때 필요한 표기가 다릅니다. 화면에 있는 입력값은 색 자체를 바꾸는 값과 그 색을 읽는 방식으로 나눠서 보면 됩니다.

HEX 두 자리는 RGB 한 채널의 0~255 값으로 바뀝니다

변환의 출발점은 RGB입니다. HEX의 두 자리 16진수는 10진수 0~255로 바뀌고, HSL은 RGB를 색조·채도·명도로 다시 계산합니다. CMYK는 RGB 색을 인쇄 잉크 비율로 근사해 보여 주므로, 전문 인쇄 프로파일을 적용한 최종 교정값은 아닙니다.

#FF8800을 넣으면 주황색 RGB, HSL, CMYK가 함께 나옵니다

예를 들어 HEX 입력칸에 #FF8800을 넣으면 RGB는 빨강 255, 초록 136, 파랑 0으로 읽힙니다. 같은 색을 HSL로 보면 색조 32°, 채도 100%, 명도 50%이고, CMYK 근사값은 자홍 46.7%와 노랑 100%가 중심입니다.

화면 색과 인쇄 색은 같은 숫자처럼 보여도 결과가 달라질 수 있습니다

RGB와 HSL은 화면의 sRGB 색을 다루는 데 가깝고, CMYK는 인쇄 색을 설명하기 위한 근사값입니다. 실제 인쇄물은 종이, 잉크, 프린터 프로파일에 따라 달라지므로 최종 출력 전에는 별도 교정이 필요할 수 있습니다.

• HEX는 여섯 자리 결과를 기준으로 복사합니다. 세 자리 HEX를 넣어도 결과는 여섯 자리 대문자 코드로 정리됩니다.
• HSL은 조정용으로 읽습니다. Hue, Saturation, Lightness 값은 색을 설명하기 좋지만, 실제 CSS에 넣을 표기는 프로젝트 규칙에 맞춰 고르세요.
• CMYK는 인쇄소 확정값이 아닙니다. 이 도구의 CMYK는 RGB에서 계산한 근사 비율입니다. 브랜드 인쇄물은 인쇄소 프로파일과 교정본을 따르는 편이 안전합니다.
• 대비 숫자는 색 하나만으로 끝나지 않습니다. 글자 크기, 굵기, 주변 배경까지 같이 보아야 실제 화면에서 읽히는지 판단할 수 있습니다.

자주 묻는 질문