색상 코드 변환기 — HEX·RGB·HSL 실시간 변환

색상 코드란? HEX vs RGB vs HSL 차이점

웹과 앱 개발, UI 디자인에서 색상을 표현하는 방식은 크게 세 가지입니다. 각 방식은 용도와 가독성이 달라 상황에 맞게 선택해야 합니다.

형식	표기 예	특징	주요 용도
HEX	#2563EB	16진수 6자리. 가장 짧고 범용적	CSS, HTML, 디자인 툴
RGB	rgb(37, 99, 235)	빨강·초록·파랑 0~255. 직관적	CSS, Canvas, 이미지 처리
RGBA	rgba(37,99,235,.5)	RGB + 알파(투명도) 0~1	CSS 반투명 처리
HSL	hsl(221,83%,53%)	색조·채도·밝기. 사람 직관과 일치	CSS, 색상 팔레트 생성
HSLA	hsla(221,83%,53%,.8)	HSL + 알파	CSS 반투명 처리

HEX는 코드가 짧아서 디자인 시안 전달이나 CSS 작성에 가장 많이 쓰입니다. RGB는 JavaScript Canvas API나 이미지 프로세싱에서 숫자 계산이 쉬워 선호됩니다. HSL은 밝기만 조절하거나 색조만 돌리는 식으로 색상 팔레트를 체계적으로 만들 때 강력합니다. 예를 들어 hsl(221, 83%, 30%)처럼 세 번째 값만 낮추면 어두운 버전, 높이면 밝은 버전을 쉽게 만들 수 있습니다.

디자인에서 색상 코드 쓰는 법

CSS에서 활용

CSS는 HEX, RGB, HSL 모두 지원합니다. 최신 CSS에서는 공백 구문(hsl(221 83% 53%))도 지원하며, color-mix() 함수로 두 색을 섞을 수도 있습니다.

/* 배경색 지정 */
.button {
  background-color: #2563EB;          /* HEX */
  color: rgb(255, 255, 255);          /* RGB */
  border: 1px solid hsl(221, 83%, 40%); /* HSL - 더 어두운 테두리 */
  box-shadow: 0 4px 14px rgba(37,99,235,0.4); /* 반투명 그림자 */
}
/* CSS 변수로 관리 (권장) */
:root {
  --primary: #2563EB;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
}

Figma에서 색상 코드 사용하기

오른쪽 패널의 Fill 영역 클릭 → 색상 피커 열기
HEX 입력란에 6자리 코드를 바로 붙여넣기 가능 (# 없이 입력)
Styles 기능으로 브랜드 컬러를 팀 전체와 공유 권장
플러그인 Contrast로 텍스트 대비율(WCAG) 즉시 확인 가능

Photoshop / Illustrator

색상 피커 대화상자 우측 하단 HEX 입력란에 코드 붙여넣기
Window → Swatches에서 브랜드 색상 팔레트 저장·관리
RGB 슬라이더에서 직접 0~255 값 입력도 가능

한국 주요 브랜드 컬러 HEX 모음

국내 서비스·기업의 공식 브랜드 컬러입니다. 디자인 참고용으로 활용하세요. 위 변환기에서 클릭하면 바로 RGB/HSL로 변환됩니다.

브랜드	컬러명	HEX	RGB	사용 위치
카카오	카카오 옐로우	`#FEE500`	rgb(254, 229, 0)	로고, 버튼 배경
카카오톡	카카오톡 브라운	`#3A1D1D`	rgb(58, 29, 29)	카카오톡 로고 텍스트
네이버	네이버 그린	`#03C75A`	rgb(3, 199, 90)	로고, 검색 버튼
삼성	삼성 블루	`#1428A0`	rgb(20, 40, 160)	로고, 공식 자료
쿠팡	쿠팡 옐로우	`#FACD00`	rgb(250, 205, 0)	로고, 주요 CTA
LG	LG 레드	`#E8003D`	rgb(232, 0, 61)	로고, 브랜드 자료
현대자동차	현대 블루	`#0068B7`	rgb(0, 104, 183)	로고, 공식 마케팅
SKT	SK 텔레콤 레드	`#C8002A`	rgb(200, 0, 42)	로고, 유니폼
KT	KT 레드	`#E4002B`	rgb(228, 0, 43)	로고, 마케팅
배달의민족	배민 블루	`#00ADE6`	rgb(0, 173, 230)	앱 UI, 로고
당근마켓	당근 오렌지	`#FF6000`	rgb(255, 96, 0)	로고, 버튼
토스	토스 블루	`#3182F6`	rgb(49, 130, 246)	앱 UI, CTA 버튼

색상 조화의 기본 원칙

좋은 색 조합은 우연이 아닙니다. 색상 이론에 기반한 몇 가지 원칙을 알면 전문적인 디자인이 가능합니다.

1. 보색 배색 (Complementary)

색상환에서 180도 반대편에 있는 색을 함께 쓰는 방식입니다. 예: 파란색(#2563EB)과 주황색(#EA580C). 강한 대비가 생겨 CTA 버튼이나 포인트 색상에 효과적입니다.

2. 유사색 배색 (Analogous)

색상환에서 이웃한 색 2~3개를 조합합니다. 예: 파랑 계열(#2563EB, #7C3AED, #0EA5E9). 자연스럽고 조화롭게 보여 그라디언트 UI에 많이 쓰입니다.

3. 삼각형 배색 (Triadic)

색상환을 삼등분(120도 간격)한 세 색을 사용합니다. 생동감이 넘치지만 채도를 낮추어 써야 정제되어 보입니다.

4. 60-30-10 법칙

인테리어와 UI 디자인 모두에 통하는 황금 비율입니다. 메인 컬러 60%(배경 등), 보조 컬러 30%(텍스트, 카드), 포인트 컬러 10%(버튼, 링크). 이 비율을 지키면 시각적 균형이 잡힙니다.

5. WCAG 접근성 대비율

웹 콘텐츠 접근성 지침(WCAG 2.1)에 따르면, 일반 텍스트는 배경과 4.5:1 이상, 큰 텍스트(18px 이상 볼드 또는 24px 이상)는 3:1 이상의 명도 대비를 권장합니다. 흰 배경(#FFFFFF)에 #767676 회색은 4.54:1로 기준을 간신히 통과합니다.

FAQ

HEX 색상에서 3자리 코드(#FFF)는 뭔가요? ▼

3자리 HEX는 6자리의 축약형입니다. 각 자리가 두 번 반복될 때만 사용할 수 있습니다. #FFF = #FFFFFF (흰색), #000 = #000000 (검정), #F0C = #FF00CC. CSS에서 두 형식 모두 동일하게 인식됩니다.

입력한 색상 데이터가 서버로 전송되나요? ▼

아니요. 모든 변환 계산은 브라우저(JavaScript)에서만 이루어집니다. 색상 코드를 포함한 어떤 데이터도 외부 서버로 전송되지 않습니다.

HSL에서 H(색조)는 어떻게 이해하나요? ▼

H(Hue, 색조)는 색상환에서의 각도(0~360°)입니다. 0°=빨강, 60°=노랑, 120°=초록, 180°=청록, 240°=파랑, 300°=마젠타, 360°=다시 빨강. S(Saturation, 채도)는 색의 선명함(0%=회색, 100%=순색), L(Lightness, 밝기)은 0%=검정, 50%=순색, 100%=흰색입니다.

🎨 색상 코드 변환기