웹 색상 이해하기 🎨
웹사이트를 만들다 보면 #FF5733, rgb(255, 87, 51) 같은 이상한 코드들을 보게 됩니다. 이것들은 모두 색상 코드예요! 초보자도 쉽게 이해할 수 있도록 설명해드릴게요.
왜 색상 코드를 사용할까요?
우리는 "빨강", "파랑"이라고 말하지만, 컴퓨터는 정확한 숫자가 필요해요.
예를 들어:
- "빨강"이라고 하면: 어떤 빨강? 밝은 빨강? 어두운 빨강? 🤔
#FF0000이라고 하면: 정확한 빨강색! ✅
웹에서 사용하는 3가지 색상 표현
1. HEX (헥사) 색상 🔢
가장 많이 보는 형식이에요!
color: #FF5733;
background: #3498db;
형식:
#기호로 시작- 6자리 숫자/영문 (0-9, A-F)
- 2자리씩 끊어서:
#RRGGBB- RR = 빨강 (Red)
- GG = 초록 (Green)
- BB = 파랑 (Blue)
예시:
#FF0000 → 빨강 (Red 최대)
#00FF00 → 초록 (Green 최대)
#0000FF → 파랑 (Blue 최대)
#FFFFFF → 흰색 (모든 색 최대)
#000000 → 검정 (모든 색 0)
2. RGB 색상 🎨
빨강(Red), 초록(Green), 파랑(Blue)의 양으로 표현해요!
color: rgb(255, 87, 51);
background: rgb(52, 152, 219);
형식:
rgb(빨강, 초록, 파랑)- 각 숫자는 0~255 사이
예시:
rgb(255, 0, 0) → 빨강
rgb(0, 255, 0) → 초록
rgb(0, 0, 255) → 파랑
rgb(255, 255, 255) → 흰색
rgb(0, 0, 0) → 검정
rgb(128, 128, 128) → 회색
투명도 추가 (RGBA):
rgba(255, 0, 0, 0.5) → 반투명 빨강
↑
0.0 ~ 1.0 (투명 ~ 불투명)
3. HSL 색상 🌈
사람이 이해하기 가장 쉬운 방식!
color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);
형식:
hsl(색상, 채도, 밝기)- H (Hue): 색상 (0~360도)
- S (Saturation): 채도 (0~100%)
- L (Lightness): 밝기 (0~100%)
색상 환 (Hue):
0° / 360° → 빨강
60° → 노랑
120° → 초록
180° → 청록
240° → 파랑
300° → 자주
예시:
hsl(0, 100%, 50%) → 순수 빨강
hsl(120, 100%, 50%) → 순수 초록
hsl(240, 100%, 50%) → 순수 파랑
hsl(0, 0%, 50%) → 회색
hsl(0, 100%, 100%) → 흰색
hsl(0, 0%, 0%) → 검정
색상 형식 비교
같은 색을 세 가지 방법으로 표현하면:
🔴 밝은 빨강
HEX: #FF5733
RGB: rgb(255, 87, 51)
HSL: hsl(9, 100%, 60%)
🔵 파랑
HEX: #3498db
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)
🟢 초록
HEX: #2ecc71
RGB: rgb(46, 204, 113)
HSL: hsl(145, 63%, 49%)
언제 어떤 형식을 사용할까?
HEX를 사용하는 경우 📝
- 디자이너가 색상 코드를 줄 때 (가장 흔함)
- 간단하게 색상 지정할 때
- CSS 파일에서 많이 사용
.button {
background-color: #3498db;
color: #ffffff;
}
RGB를 사용하는 경우 🎨
- 투명도(알파)가 필요할 때
- 자바스크립트로 색상을 계산할 때
- 색상을 동적으로 변경할 때
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */
}
HSL을 사용하는 경우 🌈
- 색상만 바꾸고 싶을 때
- 밝기만 조절하고 싶을 때
- 비슷한 톤의 색상을 만들 때
.primary {
background: hsl(200, 70%, 50%);
}
.primary-light {
background: hsl(200, 70%, 70%); /* 밝기만 변경 */
}
.primary-dark {
background: hsl(200, 70%, 30%); /* 어둡게 */
}
실전 예시
예시 1: 버튼 색상 🔘
/* 파란 버튼 */
.button {
background-color: #3498db;
color: #ffffff;
}
/* 마우스 올렸을 때 */
.button:hover {
background-color: #2980b9; /* 조금 더 어두운 파랑 */
}
예시 2: 그라데이션 배경 🌅
.gradient-bg {
background: linear-gradient(
to right,
#667eea, /* 보라 */
#764ba2 /* 자주 */
);
}
예시 3: 반투명 오버레이 👻
.modal-overlay {
background-color: rgba(0, 0, 0, 0.7); /* 70% 불투명 검정 */
}
색상 도구 사용하기
색상 변환하기
- HEX → RGB → HSL 변환
- 색상 피커로 색 선택
- 다양한 형식으로 복사
사용 방법:
- Color Converter 열기
- 색상 피커로 원하는 색 선택
- HEX, RGB, HSL 코드 자동 생성!
- 필요한 형식 복사해서 사용
CSS 그라데이션 만들기
- 2개 이상의 색상으로 그라데이션
- 방향 설정
- CSS 코드 자동 생성
색상 선택 팁 💡
1. 색상 조화
보색 (반대편 색):
빨강(0°) ↔ 청록(180°)
파랑(240°) ↔ 노랑(60°)
유사색 (비슷한 색):
hsl(200, 70%, 50%) 파랑
hsl(210, 70%, 50%) 조금 더 보라빛 파랑
hsl(190, 70%, 50%) 조금 더 청록빛 파랑
2. 명도 대비
텍스트가 잘 보이려면:
/* 좋은 대비 ✅ */
.good-contrast {
background: #000000; /* 검정 */
color: #ffffff; /* 흰색 */
}
/* 나쁜 대비 ❌ */
.bad-contrast {
background: #cccccc; /* 밝은 회색 */
color: #ffffff; /* 흰색 - 잘 안 보임! */
}
3. 일관성 유지
비슷한 요소는 비슷한 색을 사용하세요:
/* Primary 색상 계열 */
.primary { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark { background: hsl(200, 70%, 30%); }
/* Success 색상 계열 */
.success { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark { background: hsl(120, 60%, 30%); }
자주 사용하는 색상 코드
기본 색상
빨강: #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%)
자주: #FF00FF rgb(255, 0, 255) hsl(300, 100%, 50%)
청록: #00FFFF rgb(0, 255, 255) hsl(180, 100%, 50%)
무채색
흰색: #FFFFFF rgb(255, 255, 255)
밝은 회색: #CCCCCC rgb(204, 204, 204)
회색: #808080 rgb(128, 128, 128)
어두운 회색: #333333 rgb(51, 51, 51)
검정: #000000 rgb(0, 0, 0)
인기 있는 색상
하늘색: #87CEEB rgb(135, 206, 235)
분홍: #FFC0CB rgb(255, 192, 203)
주황: #FFA500 rgb(255, 165, 0)
보라: #800080 rgb(128, 0, 128)
황금색: #FFD700 rgb(255, 215, 0)
단축 HEX 코드
같은 숫자가 반복되면 줄여 쓸 수 있어요:
#FF0000 → #F00 (빨강)
#00FF00 → #0F0 (초록)
#0000FF → #00F (파랑)
#FFFFFF → #FFF (흰색)
#000000 → #000 (검정)
#CCCCCC → #CCC (회색)
색상 이름 사용하기
CSS에서는 색상 이름도 사용할 수 있어요:
color: red;
color: blue;
color: green;
color: white;
color: black;
하지만 정확한 색상 코드를 사용하는 게 좋아요!
접근성 고려하기 ♿
대비율 체크
- 일반 텍스트: 최소 4.5:1
- 큰 텍스트: 최소 3:1
좋은 예:
background: #000000; /* 검정 */
color: #FFFFFF; /* 흰색 - 대비 21:1 */
나쁜 예:
background: #777777; /* 회색 */
color: #888888; /* 약간 밝은 회색 - 대비 너무 낮음 */
실습: 색상 실험하기
실습 1: 같은 색, 다른 밝기
.color-1 { background: hsl(200, 70%, 20%); } /* 아주 어두움 */
.color-2 { background: hsl(200, 70%, 40%); } /* 어두움 */
.color-3 { background: hsl(200, 70%, 60%); } /* 보통 */
.color-4 { background: hsl(200, 70%, 80%); } /* 밝음 */
실습 2: 같은 밝기, 다른 색
.color-1 { background: hsl(0, 70%, 50%); } /* 빨강 */
.color-2 { background: hsl(120, 70%, 50%); } /* 초록 */
.color-3 { background: hsl(240, 70%, 50%); } /* 파랑 */
팁
Color Converter에서 직접 색상을 바꿔가며 실험해보세요!
자주 묻는 질문 (FAQ)
Q1: HEX에서 숫자와 문자는 뭔가요?
A: 16진수를 사용해요.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
↑
A=10, B=11 ... F=15
Q2: RGB는 왜 255까지인가요?
A: 컴퓨터는 8비트(0~255)로 각 색을 표현해요.
0 = 최소 (색 없음)
255 = 최대 (색 가득)
Q3: 투명한 색은 어떻게 만드나요?
A: RGBA나 HSLA를 사용하세요:
rgba(255, 0, 0, 0.5) /* 반투명 빨강 */
hsla(0, 100%, 50%, 0.5) /* 반투명 빨강 */
Q4: 그라데이션은 어떻게 만드나요?
A: Gradient Generator를 사용하거나:
background: linear-gradient(to right, #667eea, #764ba2);
다음 단계 🚀
색상을 이해했다면:
- ✅ Color Converter - 색상 변환 연습
- ✅ Gradient Generator - 그라데이션 만들기
- ✅ Shadow Generator - 색상 섀도우 만들기
- ✅ Border Radius Generator - 둥근 모서리 만들기
마무리
웹 색상은 어렵지 않아요!
기억할 포인트:
- HEX:
#RRGGBB- 가장 흔함 - RGB:
rgb(빨강, 초록, 파랑)- 투명도 추가 가능 - HSL:
hsl(색상, 채도, 밝기)- 사람이 이해하기 쉬움
Color Converter 도구로 자주 실험하다 보면 금방 익숙해질 거예요! 🎨
색상은 웹사이트의 분위기를 결정하는 중요한 요소예요. 다양한 색상을 시도해보세요!