웹 색상 코드 표 정리 - HEX RGB HSL 변환과 디자인 활용법 완벽 가이드
디자이너와 개발자가 자주 쓰는 웹 색상 코드를 한눈에 정리했습니다. HEX, RGB, HSL 변환 방법부터 실무 컬러 팔레트까지 한번에 확인하세요.
웹사이트를 만들거나 디자인 작업을 할 때 색상 코드를 매번 검색하는 게 번거로우셨던 적 있으실 겁니다. HEX 코드와 RGB 값이 헷갈리고, 어떤 색이 어떤 코드인지 외우기도 쉽지 않습니다. 웹 색상 코드 표 정리는 디자이너와 개발자가 작업 속도를 높이는 가장 기본적인 자료입니다.
이번 글에 정리한 색상 표는 실제 웹 개발과 디자인 현장에서 자주 쓰이는 색상 위주로 구성했습니다. HEX, RGB, HSL 변환 공식부터 실무에 바로 쓸 수 있는 컬러 팔레트까지 한번에 확인하실 수 있습니다.
웹 색상 코드 체계 이해하기
웹에서 색상을 표현하는 방식은 크게 4가지입니다. 각 방식은 같은 색을 다른 형태로 표현하는 것이라 상황에 맞게 골라 쓰면 됩니다.
- HEX 코드: #RRGGBB 형식. 6자리 16진수로 가장 널리 쓰입니다.
- RGB: rgb(255, 0, 0) 형식. 빨강, 초록, 파랑 각 0~255 값으로 표현합니다.
- HSL: hsl(0, 100%, 50%) 형식. 색상, 채도, 명도로 표현합니다.
- 색상 이름: red, blue, tomato 등 미리 정의된 140여 개의 이름이 있습니다.
HEX 코드는 6자리지만 같은 두 글자가 반복될 경우 3자리로 줄여 쓸 수도 있습니다. 예를 들어 #FF0000은 #F00으로, #FFFFFF는 #FFF로 표기 가능합니다. 코드 길이를 줄여 가독성을 높일 때 유용합니다.
자주 사용하는 HEX 색상 코드 표
아래는 웹 개발과 디자인 작업에서 가장 자주 쓰이는 기본 색상 코드입니다. 북마크해두고 필요할 때 바로 복사해서 쓰면 작업이 훨씬 빨라집니다.
| 색상 이름 | HEX 코드 | RGB 값 | 활용 예시 |
|---|---|---|---|
| 검정 | #000000 | 0, 0, 0 | 본문 텍스트 |
| 흰색 | #FFFFFF | 255, 255, 255 | 배경, 카드 |
| 진한 회색 | #333333 | 51, 51, 51 | 본문 텍스트 대체 |
| 중간 회색 | #666666 | 102, 102, 102 | 보조 텍스트 |
| 연한 회색 | #CCCCCC | 204, 204, 204 | 구분선, 비활성 요소 |
| 배경 그레이 | #F8F9FA | 248, 249, 250 | 섹션 배경 |
| 파랑 (링크) | #1E90FF | 30, 144, 255 | 링크, 강조 |
| 경고 빨강 | #DC3545 | 220, 53, 69 | 에러 메시지 |
| 성공 초록 | #28A745 | 40, 167, 69 | 완료 알림 |
| 경고 노랑 | #FFC107 | 255, 193, 7 | 주의 표시 |
이 색상들은 Bootstrap, Tailwind CSS 등 인기 있는 CSS 프레임워크에서도 기본 색상으로 채택할 만큼 검증된 조합입니다. 처음 디자인 시스템을 만들 때 이 색상을 베이스로 시작하면 큰 실수 없이 안정적인 결과를 얻을 수 있습니다.
RGB와 HSL 변환 방법
HEX와 RGB는 같은 원리로 표현됩니다. HEX 코드를 두 자리씩 끊어서 16진수를 10진수로 변환하면 RGB 값이 됩니다.
HEX에서 RGB로 변환하는 공식
예를 들어 #1E90FF의 경우, 1E는 30, 90은 144, FF는 255가 되므로 rgb(30, 144, 255)입니다. 반대로 RGB에서 HEX로 변환할 때는 10진수를 16진수로 바꾸면 됩니다.
색상 작업에서 가장 중요한 건 정확한 코드보다 일관성입니다. 같은 프로젝트 안에서는 한 가지 표기 방식만 통일해서 쓰는 것이 유지보수에 훨씬 유리합니다.
HSL의 장점
HSL은 직관적인 조작이 가능해서 디자인 시스템 구축에 유리합니다. 채도(Saturation)만 낮추면 자연스럽게 회색조로 바뀌고, 명도(Lightness)만 조절해서 같은 색상의 다양한 톤을 만들 수 있습니다.
디자인에 어울리는 컬러 조합
색상 코드를 외우는 것보다 중요한 게 잘 어울리는 조합을 아는 것입니다. 아래는 웹 디자인에서 자주 사용되는 검증된 컬러 팔레트입니다.
| 분위기 | 주조색 | 보조색 | 강조색 |
|---|---|---|---|
| 모던 미니멀 | #FFFFFF | #F5F5F5 | #000000 |
| 비즈니스 신뢰 | #0D6EFD | #E7F1FF | #FF6B35 |
| 따뜻한 감성 | #FFF8E7 | #FFE4B5 | #D2691E |
| 다크 테크 | #0D1117 | #161B22 | #58A6FF |
| 친환경 자연 | #2D6A4F | #B7E4C7 | #F4A261 |
색상을 고를 때는 60-30-10 법칙을 따르면 안정적인 결과를 얻을 수 있습니다. 주조색 60%, 보조색 30%, 강조색 10% 비율로 사용하는 방식이며, 시선이 자연스럽게 흐르도록 도와줍니다.
실무에서 자주 쓰는 컬러 도구
색상 코드를 직접 외우거나 변환하는 대신 도구를 활용하면 작업 속도가 크게 빨라집니다.
- 크롬 개발자 도구: F12를 눌러 요소 검사로 어떤 색상이 쓰였는지 즉시 확인 가능합니다.
- ColorPicker 확장 프로그램: 화면 위 어떤 색이든 클릭만 하면 HEX 코드를 복사할 수 있습니다.
- Coolors, Adobe Color: 자동으로 어울리는 색상 조합을 추천해주는 팔레트 생성 도구입니다.
색상 코드 표 외에도 개발 작업에 자주 쓰는 유틸리티가 있다면 미리 북마크해두는 것이 좋습니다. 예를 들어 데이터베이스나 API 작업에서 고유값이 필요할 때 사용하는 UUID 생성기처럼 자주 쓰이는 도구는 빠르게 접근할 수 있도록 정리해두면 작업 효율이 높아집니다.
마지막으로 색상 작업 시 반드시 확인할 것은 접근성입니다. 텍스트와 배경의 명도 대비가 부족하면 시각 약자들이 콘텐츠를 읽기 어렵습니다. WCAG 기준에 따르면 일반 텍스트는 4.5대 1, 큰 텍스트는 3대 1 이상의 명도 대비가 필요합니다.
지금 작업 중인 프로젝트의 색상 표를 한 번 정리해보세요. 사용 중인 색상 코드를 모두 적어두고 비슷한 색은 통합하는 작업만으로도 디자인 일관성이 크게 좋아집니다.
