색상 변환 — HEX·RGB·HSL·HSV 실시간 상호 변환, 원클릭 복사

사용 방법

• 색 입력 방법은 세 가지: HEX나 CSS 색상 이름 입력, 컬러 피커로 선택, 색상/채도/명도/투명도 슬라이더로 조절.
• 어느 값이든 하나만 바꾸면 HEX·RGB·HSL·HSV·RGBA가 한 번에 갱신됩니다. 변환 버튼이 필요 없고 모든 방향을 지원합니다.
• 원하는 표기 옆 복사 버튼을 누르면 클립보드에 복사되고 “복사했습니다!”가 표시됩니다.
• 투명도(알파) 슬라이더를 내리면 투명한 색이 되고, 미리보기는 체커보드로 투명도를 보여줍니다.
• 대비 영역에서 WCAG 명도 대비와 AA/AAA 통과 여부를 확인하세요. 설치·가입 없이 색은 로컬에서 계산되며 업로드되지 않습니다.

지원하는 색상 표기

HEX(16진수 색상 코드)

HEX는 웹에서 가장 흔한 색 표기로 #RRGGBB(축약형 #RGB) 형태입니다. 여기서는 16진수 색상 rgb 변환이나 HEX→HSL도 순식간입니다. 투명도가 있는 경우 HEX8(#RRGGBBAA)을 쓰며 마지막 두 자리가 알파 값입니다.

RGB / RGBA(빨강·초록·파랑 + 알파)

RGB는 빨강·초록·파랑을 0~255로 표현합니다(예: rgb(124, 58, 237)). RGBA는 네 번째로 투명도(0~1)를 더합니다(예: rgba(124, 58, 237, 0.5)). RGB 값을 직접 입력하면 HEX와 HSL이 즉시 갱신됩니다(rgb to hex, rgb hsl 변환).

HSL / HSLA(색상·채도·명도)

HSL은 색상(0~360°)·채도(0~100%)·명도(0~100%)를 사용해 색의 밝기와 선명함을 직관적으로 조절하기 좋습니다. CSS에서 많이 쓰이고 HSLA는 알파를 더합니다. 명도만 살짝 바꾸고 싶을 때 hex hsl 변환이 편리합니다.

HSV(색상·채도·명도〔value〕)

HSV(HSB라고도 함)는 색상·채도·명도(value)를 사용합니다. 디자인과 컬러 피커 도구에서 흔하지만 CSS 공식 표기는 아니므로 참고값으로 보여 줍니다. CSS에서는 HEX·RGB·HSL을 쓰세요.

기능

동시 표시·양방향 변환

모든 표기를 한 화면에 동시에 보여 주고, 어느 것을 바꿔도 나머지가 즉시 따라옵니다. HEX→RGB뿐 아니라 RGB→HEX, HEX→HSL, HSL→HEX 등 모든 방향을 지원하며 변환 버튼을 누를 필요가 없습니다.

원클릭 복사

각 표기에 복사 버튼이 있습니다. 누르면 클립보드에 복사되고 “복사했습니다!”가 분명히 표시되어 성공 여부를 알 수 있습니다.

컬러 피커와 슬라이더

기본 컬러 피커와 색상·채도·명도(또는 value)·투명도 슬라이더로 색을 시각적으로 고르고 모든 표기가 함께 갱신되는 것을 확인하세요.

투명도(알파) 지원

반투명 색을 만들어 RGBA·HSLA·HEX8(#RRGGBBAA)을 얻을 수 있습니다. 알파 슬라이더는 0~100%이며 미리보기는 체커보드로 투명도를 보여 줍니다.

명도 대비와 WCAG 검사

선택한 색과 배경(흰색·검은색·사용자 지정)의 대비를 계산해 WCAG AA/AAA(일반 텍스트 4.5:1, 큰 글자 3:1) 통과 여부를 보여 줍니다. 결과는 색뿐 아니라 텍스트로도 표시되어 색에만 의존하지 않습니다.

활용 사례

HEX를 CSS의 RGB / HSL로

디자인에서 받은 HEX를 rgb()나 hsl()로 변환해 CSS에 복사하세요. HSL이라면 호버·활성 상태용으로 명도만 살짝 조절하기 쉽습니다.

투명한 색(RGBA / HSLA) 만들기

알파 슬라이더로 rgba(0, 0, 0, 0.5) 같은 반투명 색을 만들어 복사하세요. 오버레이·그림자·은은한 배경에 딱 좋습니다.

접근 가능한 색 조합 확인

텍스트와 배경 색이 WCAG AA 대비를 만족하는지 확인해 누구에게나 읽기 쉬운 색을 쓰세요.

참고와 팁

• HEX·RGB·HSL·HSV는 같은 색을 다르게 적은 것이라 서로 변환됩니다(반올림으로 미세한 차이가 생길 수 있습니다).
• HSV는 CSS 공식 표기가 아니며 참고용입니다. 스타일시트에서는 HEX·RGB·HSL을 쓰세요.
• CMYK는 일부러 출력하지 않습니다. 화면색에서 인쇄색으로의 정확한 변환은 컬러 프로파일·용지·인쇄기에 따라 달라져 단순 공식으로는 잘못된 값이 나옵니다. 인쇄용은 전용 색 관리 도구를 쓰세요.
• 대비는 참고치입니다. WCAG 공식은 정확하지만 실제 가독성은 글꼴·크기·주변 색에도 좌우됩니다.
• 색상 데이터는 어디에도 전송되지 않습니다. 모든 변환은 브라우저 안에서 처리됩니다.

자주 묻는 질문

HEX를 RGB로 변환할 수 있나요?(반대도)

네. 값 하나만 입력하면 모든 방향으로 동시에 변환됩니다. hex to rgb, rgb to hex, hex hsl 변환, hsl→hex와 HSV·RGBA까지. 변환 버튼 없이 다른 표기가 즉시 갱신됩니다.

투명도가 있는 RGBA·HSLA를 지원하나요?

네. 알파 슬라이더로 투명도를 설정해 RGBA·HSLA·HEX8(#RRGGBBAA)을 얻을 수 있습니다. 미리보기는 체커보드로 투명한 정도를 보여 줍니다.

값은 어떻게 복사하나요?

어느 표기든 옆의 복사 버튼을 누르면 됩니다. 값이 클립보드에 복사되고 “복사했습니다!” 메시지로 확인됩니다.

red, rebeccapurple 같은 색 이름도 쓸 수 있나요?

네. 표준 CSS 색상 이름을 입력으로 받아 HEX·RGB·HSL·HSV로 변환합니다. 예를 들어 rebeccapurple은 #663399가 됩니다.

CMYK로 변환할 수 있나요?

일부러 지원하지 않습니다. 정확한 CMYK는 컬러 프로파일·용지·인쇄기에 따라 달라져 단순 공식으로는 잘못된 값이 나옵니다. 인쇄용은 전용 색 관리 도구를 쓰세요.

명도 대비는 어떻게 쓰나요?

텍스트 색과 배경을 비교해 WCAG AA/AAA 통과 여부를 보여 줍니다. 색 조합이 읽기 쉽고 접근 가능한지 확인하는 데 쓰세요.

제 색상이 서버로 전송되나요?

아니요. 모든 변환은 브라우저 안에서 실행됩니다. 색상은 업로드되거나 저장되지 않습니다.