색상 변환기

HEX, RGB, HSL, CMYK 등 다양한 형식 간에 색상을 변환합니다. EyeDropper API를 통한 색상 선택, 팔레트 생성, 색상 구성표 분석을 지원합니다.

색상 선택기

색상 선택기를 사용하여 색상을 선택하세요

색상 도구

고급 색상 선택 및 관리 도구

색상 형식

현재 색상의 다양한 표현 형식

#
rgb(,,)
rgba(,,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

Tailwind CSS 팔레트

공식 Tailwind CSS 기본 색상입니다. 형식을 선택한 뒤 클릭하면 복사하고, 더블 클릭하면 색상 선택기에 적용합니다.

50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

색상 형식 설명

다양한 색상 형식의 특징과 사용 사례에 대해 알아보세요

HEX 16진수

6자리 16진수를 사용하여 색상을 표현합니다(예: #FF5733). 이는 웹 개발에서 가장 일반적으로 사용되는 색상 형식으로, 최고의 호환성을 가지며 CSS와 HTML에서 사용하기에 적합합니다.

형식:#RRGGBB
범위:00-FF (0-255)
장점:간결함, 좋은 호환성
단점:직관적이지 않음

RGB 빨강 초록 파랑

빨강, 초록, 파랑 색상 채널의 수치를 사용하여 색상을 표현합니다(예: rgb(255, 87, 51)). 이 형식은 직관적이고 이해하기 쉬우며, 디자이너와 개발자가 색상 구성을 이해하는 데 적합합니다.

형식:rgb(R, G, B)
범위:0-255
장점:직관적, 이해하기 쉬움
단점:명도를 직관적으로 표현하지 않음

RGBA 빨강 초록 파랑 투명도

RGB에 알파 채널을 더해 투명도를 표현합니다(예: rgba(255, 87, 51, 0.8)). 오버레이, 그림자 등 반투명 효과에 적합합니다.

형식:rgba(R, G, B, A)
범위:R,G,B: 0-255, A: 0-1
장점:투명도를 지원하며 시각 효과가 풍부함
단점:RGB보다 호환성이 약간 낮음

HSL 색조 채도 명도

색조, 채도, 명도의 세 가지 속성을 사용하여 색상을 표현합니다(예: hsl(12, 100%, 60%)). 이 형식은 인간이 색상을 인식하는 방식에 더 가깝고, 색상의 명암과 선명도를 조정하기 쉽습니다.

형식:hsl(H, S%, L%)
범위:H: 0-360°, S/L: 0-100%
장점:직관적, 조정하기 쉬움
단점:명도를 직관적으로 표현하지 않음

HSV 색조 채도 값

색조, 채도, 값의 세 가지 속성을 사용하여 색상을 표현합니다(예: hsv(12, 100%, 100%)). 이 형식은 그래픽 소프트웨어에서 자주 사용되며, 값 매개변수가 색상의 명도를 더 직관적으로 표현합니다.

형식:hsv(H, S%, V%)
범위:H: 0-360°, S/V: 0-100%
장점:값이 직관적, 조정하기 쉬움
단점:웹 브라우저에서 지원이 제한적

CMYK 시안 마젠타 노랑 검정

시안, 마젠타, 노랑, 검정의 네 가지 색상 채널을 사용하여 색상을 표현합니다(예: cmyk(0%, 66%, 80%, 0%)). 이는 인쇄 업계의 표준 형식으로, 인쇄가 필요한 디자인 작품에 적합합니다.

형식:cmyk(C%, M%, Y%, K%)
범위:0-100%
장점:인쇄 표준, 전문적
단점:웹에서 표시가 부정확함

OKLCH 지각 색 공간

지각 명도, 색도, 색조의 세 가지 속성을 사용하여 색상을 표현합니다(예: oklch(60% 50% 12)). 이는 현대적인 색 공간으로, 인간의 눈 인식에 더 잘 맞고, 더 넓은 색 영역을 지원하며, 현대적인 디스플레이 장치에 적합합니다.

형식:oklch(L% C% H)
범위:L: 0-100%, C: 0-150, H: 0-360°
장점:지각적으로 정확함, 넓은 색 영역
단점:호환성이 제한적

사용 제안

  • 웹 개발: 최고의 호환성을 위해 HEX와 RGB 형식을 우선하세요
  • 디자인 조정: 색조와 채도를 쉽게 조정하기 위해 HSL 형식을 사용하세요
  • 전문 인쇄: 인쇄 품질을 보장하기 위해 CMYK 형식을 사용하세요
  • 현대적 애플리케이션: 더 나은 색상 성능을 위해 OKLCH 형식 사용을 고려하세요
  • 색상 선택: 직관적인 색상 선택을 위해 HSV 슬라이더를 사용하세요
  • 투명 효과: RGBA 형식으로 반투명 및 오버레이 효과를 만드세요