핵심 정리
- 보색은 색상환에서 정반대(180도)에 있는 색이에요. 서로를 가장 또렷하게 돋보이게 해요.
- 유사색은 양옆으로 30도씩 떨어진 색이에요. 비슷한 느낌이라 차분하게 어울려요.
- 삼각 배색은 120도씩 떨어진 세 가지 색이에요. 화사하지만 한 색을 주인공으로 두면 덜 어수선해요.
- 이 색상환은 화면 색(HSL) 기준이에요. 미술 시간에 배우는 먼셀 색상환과는 짝이 조금 다를 수 있어요.
기본 색으로 본 색조합
색상(H)만 돌리고 채도와 밝기는 그대로 두고 구했어요.
| 기준 색 | 보색 | 유사색 | 삼각 배색 |
|---|---|---|---|
| 빨강 #FF0000 | #00FFFF | #FF0080, #FF8000 | #00FF00, #0000FF |
| 금색 #FFD700 | #0028FF | #FF5700, #A8FF00 | #00FFD7, #D700FF |
| 바다 초록 #2E8B57 | #8B2E62 | #338B2E, #2E8B86 | #572E8B, #8B572E |
| 다저 블루 #1E90FF | #FF8D1E | #1EFFFE, #1E1FFF | #FF1E90, #90FF1E |
같은 색의 밝기만 바꾼 단계도 함께 보여 줘요. 배경은 밝게, 글자는 어둡게 쓰는 식이에요.
출처
- W3C CSS Color Module Level 4(2026-09-30 판), 6.1 Named Colors: 색 이름과 HEX 값. 7.1 Converting HSL Colors to sRGB: HSL과 RGB 변환식
- W3C WCAG 2.2(2024-12-12 권고), 용어 relative luminance와 contrast ratio, 성공 기준 1.4.3 최소 대비(4.5 : 1, 큰 글자 3 : 1), 1.4.6 향상된 대비(7 : 1)
- 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022), 5.4.3 텍스트 콘텐츠의 명도 대비: 4.5 대 1 이상
2026년 10월 5일에 다시 확인했어요.