웹 디자인 색상 도구 3종 — HEX 변환·대비 검사·그라데이션
2026-07-04
웹사이트나 앱을 만들 때 색상은 생각보다 손이 많이 가는 작업입니다. 디자인 툴에서 고른 색을 코드로 옮기고, 가독성을 확인하고, 그라데이션을 만들고… 자주 쓰는 색상 도구 세 가지를 소개합니다.
1. 색상 코드 변환 (HEX ↔ RGB ↔ HSL)
디자이너는 #3498db 같은 HEX 코드를, 개발자는 상황에 따라 RGB나 HSL을 씁니다. 서로 변환할 일이 잦죠.
색상 코드 변환 도구 에 HEX 값을 넣으면 RGB·HSL 값과 색상 미리보기를 한 번에 보여줍니다.
2. 색상 대비 검사 (접근성)
글자색과 배경색의 대비가 부족하면 눈이 나쁜 사용자는 글을 읽기 어렵습니다. 웹 접근성 지침(WCAG)은 최소 대비율을 정해두고 있어요.
- 일반 텍스트: 4.5 : 1 이상 (AA 기준)
- 큰 텍스트: 3 : 1 이상
색상 대비 검사 도구 에 두 색을 넣으면 대비율과 AA/AAA 통과 여부를 알려줍니다. 광고 승인이나 접근성 평가에도 도움이 됩니다.
3. CSS 그라데이션 생성
배경에 자연스러운 그라데이션을 넣고 싶을 때, 색 두 개와 각도만 정하면 바로 CSS 코드가 나옵니다.
CSS 그라데이션 도구 에서 미리보기를 보며 조절하고, background: linear-gradient(...) 코드를 복사해 붙여넣기만 하면 됩니다.
정리
| 필요할 때 | 도구 |
|---|---|
| 색상 코드 바꿀 때 | 색상 코드 변환 |
| 가독성 확인할 때 | 색상 대비 검사 |
| 배경 그라데이션 만들 때 | CSS 그라데이션 |
세 도구 모두 설치 없이 브라우저에서 바로 쓸 수 있습니다.