← TopTools365 홈으로
색상 코드 변환기
HEX, RGB, HSL 색상 코드를 즉시 변환합니다. 보색·유사색 팔레트 자동 생성.
자동 생성 팔레트
보색
유사색 (Analogous)
명암 단계
색상 코드 변환기 사용 방법
컬러 피커로 색상을 선택하거나 HEX, RGB, HSL 코드를 직접 입력하면 나머지 형식으로 즉시 변환됩니다. RGB 슬라이더로 색상을 미세 조정할 수 있으며, 보색·유사색·명암 팔레트가 자동으로 생성됩니다.
주요 색상 HEX 참고표
| 색상 | HEX | RGB | HSL |
|---|
| ⬛ 검정 | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| ⬜ 흰색 | #FFFFFF | rgb(255,255,255) | hsl(0,0%,100%) |
| 🟥 빨강 | #FF0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| 🟩 초록 | #00FF00 | rgb(0,255,0) | hsl(120,100%,50%) |
| 🟦 파랑 | #0000FF | rgb(0,0,255) | hsl(240,100%,50%) |
| 🟨 노랑 | #FFFF00 | rgb(255,255,0) | hsl(60,100%,50%) |
HEX, RGB, HSL 비교
HEX: #RRGGBB 형식, 웹 개발에서 가장 많이 사용
예) #FF5733 = 주황빛 빨강
RGB: rgb(R, G, B), 각 0~255 숫자로 표현
예) rgb(255, 87, 51)
HSL: hsl(색조, 채도%, 명도%), 직관적 색상 조절
예) hsl(11, 100%, 60%)
자주 묻는 질문
HEX 색상 코드란 무엇인가요?
#RRGGBB 형식으로 빨강·초록·파랑을 16진수로 표현한 색상 코드입니다. 웹 개발·디자인에서 가장 많이 사용됩니다.
RGB와 HEX의 차이는?
같은 색상을 다른 방식으로 표현합니다. RGB는 0~255 숫자로, HEX는 16진수로 표현합니다. rgb(255, 0, 0) = #FF0000 (빨강)입니다.
HSL이란 무엇인가요?
색조(0~360°), 채도(0~100%), 명도(0~100%)로 색상을 표현합니다. 직관적으로 색상을 조절하기 쉬워 CSS 디자인에서 많이 사용됩니다.
보색이란 무엇인가요?
색상환에서 정반대에 있는 색상입니다. HSL의 색조(H) 값에 180을 더하면 보색이 됩니다. 강한 대비 효과를 원할 때 사용합니다.
흰색과 검정의 HEX 코드는?
흰색은 #FFFFFF (rgb(255,255,255)), 검정은 #000000 (rgb(0,0,0))입니다.
#FF5733을 RGB로 변환하면?
#FF5733 = rgb(255, 87, 51)입니다. FF=255(빨강), 57=87(초록), 33=51(파랑)으로 변환됩니다.
유사색이란?
색상환에서 인접한 색상들입니다. 자연스럽고 조화로운 배색을 만들 때 사용합니다. 이 도구에서는 색조(H) ±20~40도 범위의 색상을 자동으로 생성합니다.
CSS에서 색상 코드 어떻게 사용하나요?
color: #FF5733; 또는 color: rgb(255, 87, 51); 또는 color: hsl(11, 100%, 60%); 형식으로 사용합니다. 세 가지 모두 동일한 색상을 나타냅니다.