색상 코드 변환기

이미지/미디어
바코드생성기QR코드 생성기이미지 압축기이미지 리사이즈이미지 포맷 변환파비콘 생성기유튜브 썸네일 추출기
텍스트/변환
이모지 모음글자수 세기단위 변환기파일 크기 변환기색상 코드 변환기텍스트 비교기PDF 합치기/분리영업일 계산기
생활/재미
로또 번호 생성기사다리 타기궁합 테스트랜덤 생성기비밀번호 생성기내 IP 주소 확인
개발 도구
Base64 인코더JSON 포맷터URL 인코더SQL 포맷터Cron 표현식 생성기정규식 테스터UUID 생성기해시 생성기타임스탬프 변환기JWT 디코더HTML 엔티티 변환기Markdown 미리보기CSS Minifier

색상 코드 변환기

클릭해서 색상 선택

프리셋 색상

가장 가까운 CSS 색상 이름:

HSV(Hue, Saturation, Value) — 포토샵, 피그마 등 디자인 툴에서 주로 사용하는 색상 형식입니다.

217°
76%
96%

RGBA

0%100%

CMYK

RGB에서 CMYK로의 근사 변환입니다. 정확한 인쇄 색상은 ICC 프로파일 기반 변환이 필요합니다.

76%
47%
0%
4%

🎨 가장 가까운 Tailwind 색상

입력한 색상과 가장 유사한 Tailwind CSS 색상 클래스를 찾아드립니다.

blue-500
#3B82F6

WCAG 명암비 체커

전경색과 배경색의 명암비를 계산하여 WCAG 2.1 접근성 기준 충족 여부를 확인합니다.

큰 텍스트 미리보기 (18pt+)

일반 텍스트 미리보기 (16px 이하)

명암비 (Contrast Ratio)

21.00:1

AA 일반 텍스트(4.5:1)
통과
AA 큰 텍스트(3:1)
통과
AAA 일반 텍스트(7:1)
통과
AAA 큰 텍스트(4.5:1)
통과

색상 조화 추천

색상환을 기반으로 현재 색상과 어울리는 조합을 추천합니다. 스와치를 클릭하면 해당 색상으로 변경됩니다.

보색 (Complementary)

색상환에서 정반대(180도) 위치의 색상

유사색 (Analogous)

색상환에서 인접한(±30도) 색상

삼각배색 (Triadic)

색상환에서 120도 간격의 세 가지 색상

분열보색 (Split-Complementary)

보색 양쪽의 인접색(150도, 210도)

틴트 & 셰이드 팔레트

현재 색상을 기준으로 밝게(틴트) 또는 어둡게(셰이드) 변형한 팔레트입니다. 클릭하면 해당 색상이 선택됩니다.

#3B82F6

🌄 CSS 그라디언트 생성기

두 색상 사이의 그라디언트 CSS 코드를 자동 생성합니다.

background: linear-gradient(to right, #3B82F6, #EC4899);

색상 코드 형식 안내

#️⃣ HEX 코드

16진수로 표현하는 방식입니다. #RRGGBB 형태로, 웹에서 가장 많이 사용됩니다.

🔴🟢🔵 RGB

빨강, 초록, 파랑의 조합(0-255)으로 색상을 표현합니다. 투명도(alpha)와 함께 사용할 수 있습니다.

🎨 HSL

색조(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다. 직관적인 색상 조절이 가능합니다.

💡 색상 선택 팁

웹 접근성을 위해 텍스트와 배경의 명암비(contrast ratio)를 4.5:1 이상으로 유지하세요. HSL을 사용하면 채도와 명도만 조절하여 같은 톤의 색상을 쉽게 만들 수 있습니다.

색상 변환기란?

색상 변환기는 HEX, RGB, HSL, RGBA, CMYK 등 다양한 색상 코드 형식을 실시간으로 상호 변환하는 무료 온라인 도구입니다. 웹 디자인, 앱 개발, 그래픽 작업에서 필요한 색상 코드를 빠르게 변환하고 복사할 수 있습니다.

컬러 피커로 원하는 색상을 직관적으로 선택하고, WCAG 명암비 체커로 웹 접근성을 점검하며, 색상 조화 추천과 틴트/셰이드 팔레트 생성까지 디자이너에게 필요한 모든 기능을 한 곳에서 제공합니다.

주요 기능

5가지 색상 형식 변환

HEX, RGB, HSL, RGBA(투명도), CMYK 등 5가지 색상 형식을 실시간으로 상호 변환합니다. 원클릭 복사로 바로 사용할 수 있습니다.

WCAG 명암비 체커

전경색과 배경색의 명암비를 계산하여 WCAG 2.1 접근성 기준(AA/AAA) 충족 여부를 자동으로 판정합니다.

색상 조화 추천

색상환 기반으로 보색, 유사색, 삼각배색, 분열보색 등 어울리는 색상 조합을 자동으로 추천합니다.

틴트 & 셰이드 팔레트

선택한 색상을 기준으로 밝게(틴트), 어둡게(셰이드) 변형한 팔레트를 생성합니다. 클릭하면 바로 적용됩니다.

사용 방법

  1. 색상 선택 — 컬러 피커를 클릭하여 원하는 색상을 선택하거나, 프리셋 색상 중 하나를 클릭합니다.
  2. 값 입력 — HEX, RGB, HSL 중 원하는 형식에 직접 값을 입력할 수도 있습니다. 다른 형식은 자동으로 변환됩니다.
  3. 코드 복사 — 변환된 색상 코드 옆의 복사 버튼을 클릭하여 클립보드에 복사합니다.
  4. 접근성 & 조화 확인 — WCAG 명암비 체커로 접근성을 점검하고, 색상 조화 추천에서 어울리는 색상을 찾아보세요.

활용 예시

웹 디자인 & CSS 개발

CSS에서 사용할 HEX/RGB/HSL 코드를 빠르게 변환하고, WCAG 접근성 기준에 맞는 색상 조합을 선택할 수 있습니다.

앱 & UI 디자인

iOS/Android 앱 개발에 필요한 RGBA 코드를 얻고, 일관된 색상 팔레트를 설계할 수 있습니다.

그래픽 디자인 & 인쇄

디지털 색상(RGB)을 인쇄용 CMYK로 변환하여 인쇄물 제작 시 참고할 수 있습니다.

접근성 테스트

웹사이트의 텍스트와 배경색 명암비를 점검하여 시각 장애인도 읽기 쉬운 색상 조합을 찾을 수 있습니다.

자주 묻는 질문

Q. HEX 색상 코드란 무엇인가요?

HEX(헥사데시멀)는 16진수로 색상을 표현하는 방식입니다. #RRGGBB 형태로, 각각 빨강(R), 초록(G), 파랑(B)을 00~FF(0~255)로 나타냅니다. 예: #FF0000은 순수한 빨간색입니다.

Q. RGB와 HSL의 차이점은 무엇인가요?

RGB는 빨강, 초록, 파랑의 조합으로 색상을 표현합니다. HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)로 표현하여 직관적으로 색상을 조절하기 쉽습니다.

Q. 웹에서 어떤 색상 형식을 사용해야 하나요?

CSS에서는 HEX, RGB, HSL 모두 사용 가능합니다. HEX는 간결하여 자주 쓰이고, RGB는 투명도(alpha)와 함께 사용할 때, HSL은 색상 조절이 필요할 때 유용합니다.

Q. 색상 코드를 어떻게 복사하나요?

원하는 색상 형식(HEX, RGB, HSL) 옆의 복사 버튼을 클릭하면 클립보드에 복사됩니다. 바로 CSS나 디자인 툴에 붙여넣기 할 수 있습니다.

개인정보 안내

색상 데이터는 브라우저에서만 처리됩니다. 입력한 색상 정보는 외부 서버로 전송되지 않으며, 모든 변환과 계산은 사용자의 브라우저에서 직접 수행됩니다.