FREE 색상 변환기 · 팔레트 · 대비율

HEX, RGB, HSL, HSV, CMYK 색상 코드를 변환하고, 팔레트를 생성하고, WCAG 대비율을 검사하세요.

#EC4899
HEX
RGB
HSL
HSV
CMYK
auto_awesome색상 팔레트
보색 (Complementary)
유사색 (Analogous)
삼색 (Triadic)
분할보색 (Split-Complementary)
gradient그라디언트 생성기
시작
visibilityWCAG 대비율 검사
21:1
가나다ABC 샘플 텍스트
이것은 일반 텍스트 크기의 샘플입니다. This is a sample of normal text size.
check_circle복사되었습니다

색상 변환기 사용법

웰컴스 색상 변환기는 HEX, RGB, HSL, HSV, CMYK 색상코드를 한 화면에서 실시간으로 변환해 주는 무료 온라인 도구입니다. 컬러 피커로 색을 고르거나 HEX 코드를 입력하면 나머지 모든 색상코드가 자동으로 계산되어 표시되므로, 디자이너와 개발자 모두 매번 계산할 필요 없이 값을 바로 복사해 사용할 수 있습니다. 불투명도(알파) 슬라이더까지 지원하여 rgba / hsla 코드도 함께 생성합니다.

이 색상코드 변환 도구는 단순 변환을 넘어, 기준 색상으로 보색·유사색·삼색·분할보색 팔레트를 자동 생성하고, 두 가지 색으로 CSS 그라디언트 코드를 만들어줍니다. 또한 WCAG 웹 접근성 대비율 검사 기능을 통해 글자색과 배경색의 명암비가 AA·AAA 기준에 합격하는지 즉시 확인할 수 있어, 접근성 색상 가이드가 필요한 웹 디자이너에게 특히 유용합니다. 모든 결과값은 원클릭으로 클립보드에 복사할 수 있습니다.

주요 기능

자주 묻는 질문 (FAQ)

HEX 코드를 RGB로 어떻게 변환하나요?
HEX #FF5733은 RGB(255, 87, 51)입니다. 16진수 값을 10진수로 변환하면 되며, 이 도구에서는 색상을 선택하면 HEX, RGB, HSL, HSV, CMYK를 모두 자동 변환해 보여줍니다. 각 값 옆의 복사 버튼을 누르면 즉시 클립보드에 복사됩니다.
웹 접근성 대비율이 왜 중요한가요?
WCAG 기준에 따라 텍스트와 배경색의 명암비가 4.5:1 이상이어야 시각장애인이나 고령자도 내용을 읽을 수 있습니다. 이 도구에서 글자색과 배경색을 넣으면 대비율과 함께 AA·AAA 합격 여부를 배지로 자동 계산해 보여줍니다.
HSL과 HEX 중 뭐가 더 편리한가요?
HSL은 색상(H), 채도(S), 명암(L)을 직관적으로 조절할 수 있어 디자이너가 선호합니다. 개발자는 CSS 코드에 바로 넣을 수 있는 HEX를 주로 사용합니다. 이 도구에서는 두 값을 동시에 보여주고 양방향 변환을 지원합니다.
색상 팔레트는 어떻게 만들어지나요?
기준 색상을 바탕으로 보색, 유사색, 삼색配色, 분할보색 등 색채학 이론에 따라 자동으로 생성됩니다. 디자인 시안이나 브랜드 색상 조합을 구성할 때 유용하며, 각 색상을 클릭하면 HEX 코드가 복사됩니다.
무료로 사용할 수 있나요?
완전 무료이며 CSS 그라디언트 코드 복사, 팔레트 상업적 이용 모두 가능합니다. 회원가입 없이 브라우저에서 바로 사용할 수 있고, PC·모바일 모든 기기에서 동일하게 작동합니다.

관련 무료 도구