웹 색상 코드 표 정리 - HEX RGB HSL 자주 쓰는 컬러 한눈에 보는 완벽 가이드
HEX RGB HSL 표기법 차이부터 실무에서 자주 쓰는 색상 코드 일람표까지, 디자이너와 개발자가 작업 시 바로 꺼내 쓸 수 있게 한 페이지에 정리했습니다.
웹페이지를 만들거나 디자인 작업을 하다 보면 색상 코드 때문에 한 번씩 막히는 순간이 옵니다. "#3498db가 정확히 어떤 파란색이지?", "RGB와 HEX는 뭐가 다르지?", "투명도는 어떻게 적용하지?" 이런 질문들이 작업 흐름을 끊어버립니다. 매번 검색하기는 번거롭고, 정리된 표 하나만 있으면 좋겠다는 생각이 드는 게 당연합니다.
그래서 자주 쓰는 색상 표기법과 코드, 변환 방법, CSS 적용 팁까지 한 번에 정리했습니다. 디자이너든 개발자든 즐겨찾기 해두고 필요할 때마다 꺼내 보면 됩니다. 한 번 봐두면 검색 시간이 확 줄어듭니다.
웹에서 쓰는 색상 코드 표기법 4가지
웹에서 색을 표현하는 방식은 크게 네 가지로 나뉩니다. 같은 색이라도 표기 방법에 따라 활용도가 달라지기 때문에 차이를 알아두면 좋습니다.
| 표기법 | 예시 | 특징 | 주 용도 |
|---|---|---|---|
| HEX | #FF5733 | 16진수 6자리 | 웹디자인 표준 |
| RGB | rgb(255, 87, 51) | 빨강/초록/파랑 0~255 | JS 색 조작 |
| RGBA | rgba(255, 87, 51, 0.5) | RGB + 투명도 | 오버레이 표현 |
| HSL | hsl(11, 100%, 60%) | 색조/채도/명도 | 색상 변형 작업 |
HEX는 가장 짧고 직관적이라 대부분의 디자인 도구에서 기본값으로 씁니다. RGB는 자바스크립트로 색을 동적으로 바꿀 때 편하고, HSL은 같은 색조에서 명도만 살짝 조절하고 싶을 때 강력합니다.
색상 표기법은 도구일 뿐입니다. 어떤 작업을 하느냐에 따라 가장 편한 표기법이 달라집니다. 디자인 시안은 HEX, 동적 색 변환은 HSL을 쓰는 식으로 상황에 맞게 골라 쓰세요.
자주 쓰는 기본 색상 코드 표
실무에서 가장 많이 쓰는 색상들의 코드를 정리했습니다. 디자인할 때 색상 선택의 기준점으로 활용하면 작업 시간을 크게 절약할 수 있습니다.
기본 색상 (Primary Colors)
| 색상명 | HEX | RGB | 주 용도 |
|---|---|---|---|
| 흰색 | #FFFFFF | 255, 255, 255 | 배경, 카드 |
| 검정 | #000000 | 0, 0, 0 | 본문 텍스트 |
| 빨강 | #FF0000 | 255, 0, 0 | 경고, 강조 |
| 초록 | #00FF00 | 0, 255, 0 | 성공 표시 |
| 파랑 | #0000FF | 0, 0, 255 | 링크, 정보 |
| 회색 | #808080 | 128, 128, 128 | 비활성, 보조 |
실무에서 자주 쓰는 색상
| 색상명 | HEX | 설명 |
|---|---|---|
| 네이비 | #1A1F2E | 다크모드 배경에 적합 |
| 슬레이트 그레이 | #64748B | 보조 텍스트, 캡션 |
| 에메랄드 | #10B981 | 성공 메시지, 확인 버튼 |
| 앰버 | #F59E0B | 경고, 포인트 강조 |
| 로즈 | #F43F5E | 오류, 삭제 버튼 |
| 인디고 | #6366F1 | 기본 액션 버튼 |
HEX 코드 변환과 단축 표기법
HEX 코드는 #RRGGBB 형식으로 빨강, 초록, 파랑을 각각 16진수 두 자리로 표현합니다. 16진수는 0부터 9까지 쓴 다음 A부터 F까지 사용해서 한 자리로 16가지 값을 표현하는 방식입니다. 두 자리면 0부터 255까지 표현할 수 있습니다.
- #FF0000: 빨강 최대값(255), 초록 0, 파랑 0 - 순수 빨강
- #00FF00: 빨강 0, 초록 최대값(255), 파랑 0 - 순수 초록
- #FFFFFF: 모든 값 최대 - 흰색
- #000000: 모든 값 0 - 검정
3자리 단축 표기
같은 숫자가 두 번 반복되는 경우 3자리로 줄일 수 있습니다. #FFFFFF는 #FFF로, #112233은 #123으로 쓸 수 있습니다. 다만 #FF55AA처럼 각 쌍이 같은 숫자가 아니면 단축할 수 없습니다.
CSS에서 색상 적용하는 5가지 방법
같은 색이라도 CSS에서는 여러 방식으로 적을 수 있습니다. 표현은 달라도 결과는 동일하니 상황에 맞게 골라 쓰면 됩니다.
| 방법 | 예시 코드 | 장점 |
|---|---|---|
| 색상 이름 | color: red; | 읽기 쉽고 직관적 |
| HEX | color: #FF0000; | 가장 짧고 표준 |
| RGB | color: rgb(255, 0, 0); | JS 친화적 |
| RGBA | color: rgba(255, 0, 0, 0.5); | 투명도 지원 |
| HSL | color: hsl(0, 100%, 50%); | 색 변형 작업 쉬움 |
최근 CSS는 #FF0000FF처럼 HEX에 투명도를 8자리로 표현하는 것도 지원합니다. 마지막 두 자리가 알파값(투명도)으로, 00은 완전 투명, FF는 완전 불투명입니다. #000000B3은 검정에 약 70% 불투명도를 적용한 색이 됩니다.
색상 선택할 때 알아두면 좋은 팁
코드를 안다고 좋은 디자인이 나오는 건 아닙니다. 실무에서 색을 다룰 때 도움이 되는 원칙들을 정리했습니다.
- 대비 비율 4.5:1 이상 유지: 텍스트와 배경의 대비가 너무 낮으면 가독성이 떨어지고 웹 접근성 표준(WCAG 2.1)에도 어긋납니다
- 색상 3개 이내로 제한: 메인, 서브, 강조색 정도가 적당하고 그 이상은 산만해 보입니다
- 모니터별 색 차이 확인: 같은 #3498db도 모니터에 따라 다르게 보이므로 여러 환경에서 점검이 필요합니다
- 색맹 사용자 고려: 빨강과 초록만으로 정보를 전달하면 약 8%의 사용자가 구분하기 어렵습니다
색상 코드는 외울 필요가 없습니다. 자주 쓰는 색만 즐겨찾기 해두고 나머지는 필요할 때마다 찾아 쓰면 됩니다. 위의 표를 북마크 해두고 작업할 때마다 꺼내 보세요. 디자인 시안을 만들 때는 HEX 코드를 기준으로 잡고, 코드에서 동적으로 색을 다룰 때는 HSL을 활용하는 식으로 표기법을 상황에 맞게 골라 쓰면 작업 속도가 눈에 띄게 빨라집니다.
