색상 변환기 & 팔레트
HEX, RGB, HSL, HSV, CMYK를 즉시 변환합니다.
팔레트 생성기 및 대비 확인 기능 포함.
색상 선택기
색상 코드
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
색상 팔레트
대비 비율
흰색 텍스트 Aa
비율: -
검정 텍스트 Aa
비율: -
저장된 색상
⭐를 사용하여 색상 저장 (최대 20개)
변환기 소개
색상 코드 변환기 & 팔레트 생성기는 HEX, RGB, HSL, HSV, CMYK 등 5가지 주요 색상 포맷을 즉시 변환하는 무료 온라인 도구입니다. 직관적인 색상 선택기를 제공하며 선택한 색상을 기반으로 보색 및 유사색과 같은 색상 팔레트를 자동으로 생성합니다.
또한 웹 접근성의 필수 표준인 내장 WCAG 대비 비율 확인 기능이 있어 선택한 배경색에 흰색 또는 검은색 텍스트가 적합한지 즉시 판단할 수 있습니다. 생성된 코드는 한 번의 클릭으로 복사할 수 있으며 CSS 변수로도 내보낼 수 있어 웹 디자이너 및 프론트엔드 엔지니어의 개발 효율성을 크게 향상시킵니다.
사용 방법
색상 선택 또는 입력
색상 선택기의 그라데이션 영역을 클릭하여 색상을 선택하거나 색조 및 알파 슬라이더를 조정합니다. 또는 HEX 또는 RGB 필드에 색상 코드를 직접 입력할 수도 있습니다.
변환 코드 복사
어떤 방법으로든 색상을 변경하면 모든 색상 포맷(HEX, RGB, HSL, HSV, CMYK)이 실시간으로 업데이트됩니다. 각 항목 옆에 있는 "복사" 버튼을 클릭하여 클립보드에 저장합니다. CSS 변수를 한 번에 모두 복사할 수도 있습니다.
팔레트 및 대비 확인
하단의 "색상 팔레트" 탭을 전환하여 보색 및 단색과 같은 색상 변형을 봅니다. "대비 비율" 섹션에서는 선택한 배경색에서 흰색/검은색 텍스트의 가독성이 자동으로 확인됩니다.
색상 용어 사전
- HEX (16진수 색상 코드)
- 웹 디자인에서 가장 일반적으로 사용되는 색상 지정 형식입니다. "#RRGGBB" (또는 3자리 "#RGB")와 같이 6자리로 표시되며 16진수(00-FF)로 빨강(R), 초록(G), 파랑(B)의 강도를 지정합니다. 투명도를 포함하는 경우 "#RRGGBBAA"와 같이 8자리로 작성되며 CSS 및 HTML에서 널리 지원됩니다.
- RGB / RGBA
- 빛의 3원색(빨강, 초록, 파랑)을 기반으로 하는 가산 혼합 모델입니다. 디스플레이의 색상 생성 원리를 기반으로 각 색상은 0에서 255까지의 값으로 표시됩니다. CSS에서는 "rgb(255, 0, 0)"과 같이 작성되며 "rgba"를 사용하면 끝에 0.0에서 1.0까지의 알파 값(투명도)을 추가할 수 있습니다.
- HSL
- 색조(Hue), 채도(Saturation), 명도(Lightness)의 세 가지 속성으로 색상을 나타내는 모델입니다. "색조 변경" 또는 "어둡게 만들기"와 같이 직관적으로 조정하기 쉽기 때문에 CSS(hsl 함수)를 사용하여 디자인 시스템을 구축하고 동적 테마를 변경하는 데 매우 적합합니다.
- CMYK
- 시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 검정(Key)의 4가지 색상을 사용하는 감산 혼합 모델입니다. 인쇄 업계에서 주로 사용되는 잉크 형식이며, 브라우저의 CMYK 값은 근사 이론값이므로 실제 인쇄를 위해서는 프로파일을 통한 조정이 필요합니다.
- 대비 비율 (WCAG)
- 웹 접근성 가이드라인(WCAG)에 정의된 배경색과 텍스트 색상 사이의 상대적 휘도 비율입니다. 모든 사용자가 텍스트를 읽을 수 있도록 하려면 일반 텍스트의 경우 "4.5:1 (AA 레벨)" 이상, 큰 텍스트의 경우 "3:1" 이상이 권장됩니다.
자주 묻는 질문
- Q.CMYK 변환 결과는 인쇄용으로 정확한가요?
- 브라우저에서 계산된 CMYK 값은 근사적인 이론값입니다. 실제 인쇄 색상은 프린터의 ICC 프로파일 및 잉크 특성에 따라 달라질 수 있습니다. 인쇄용 정확한 CMYK 데이터의 경우 Adobe Illustrator 또는 Photoshop과 같은 색상 관리 소프트웨어를 사용하여 변환하고 확인하십시오.
- Q.이 도구는 알파(투명도) 변환을 지원하나요?
- 네, 지원합니다. 색상 선택기에서 "알파" 슬라이더를 조정하거나 코드에 알파 값을 직접 입력하면 HEX (#RRGGBBAA), RGBA 및 HSLA 코드가 올바르게 출력됩니다. 투명도가 필요한 최신 웹 UI 구현에 이상적입니다.
- Q."CSS 변수 복사" 기능은 무엇인가요?
- 이 기능은 선택한 색상을 CSS 사용자 지정 속성(CSS 변수)으로 출력합니다. RGB 및 HSL에 대한 쉼표로 구분된 값과 함께 --color-primary: #3b82f6;과 같은 형식을 생성하여 Tailwind CSS 구성 또는 동적 테마를 매우 쉽게 설정할 수 있습니다.
- Q.입력한 색상 데이터가 서버에 저장되나요?
- 아니요. 이 도구는 전적으로 클라이언트 측(브라우저 내)에서 작동합니다. 색상 코드나 생성된 팔레트의 어떤 부분도 외부 서버로 전송되거나 저장되지 않습니다. "즐겨찾기" 기능도 브라우저의 로컬 스토리지에 색상을 엄격하게 저장하여 개인정보를 보호합니다.
활용 사례
웹 디자인 및 코딩
Figma 또는 XD와 같은 디자인 도구에 지정된 HEX 코드를 개발을 위해 RGB 또는 HSL 형식으로 일괄 변환합니다. CSS 변수를 사용하여 최신 테마 구성을 간소화합니다.
접근성 개선
코딩하는 동안 사이트의 배경색과 텍스트 색상 조합이 WCAG 대비 비율 기준(AA/AAA)을 충족하는지 즉시 확인하여 읽기 쉬운 UI를 달성합니다.
색 구성표 검토
기업 브랜드 색상을 기반으로 보색 또는 유사색과 같은 관련 팔레트를 자동으로 생성합니다. 응집력 있는 프레젠테이션 및 그래픽 디자인 색 구성표를 고려하는 데 유용합니다.
인쇄용 변환 가이드
웹에서 사용되는 색상을 CMYK 값으로 변환하여 전단지 및 명함과 같은 인쇄물을 배포할 때 근사치 참고용으로 사용합니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.