웹 색상 기초 — 디자이너가 알아야 할 색상 코드 완전 가이드

웹과 앱을 만들 때 색상을 체계적으로 관리하면 유지보수가 훨씬 쉬워집니다. 이 가이드에서는 색상 코드의 기본부터 실무에서 바로 쓸 수 있는 CSS 활용법까지 정리합니다.

웹에서 사용하는 색상 표현 형식

CSS는 다양한 색상 표현 형식을 지원합니다. 가장 많이 쓰이는 것은 HEX, RGB/RGBA, HSL/HSLA이며, 최신 브라우저에서는 oklch같은 차세대 색 공간도 지원합니다.

어떤 형식을 선택하느냐는 사용 목적에 따라 달라집니다. 색상을 단순히 지정할 때는 HEX가 편하고, 투명도가 필요하면 RGBA, 프로그래밍적으로 색을 조작할 때는 HSL이 유리합니다.

CSS 변수로 색상 시스템 만들기

규모 있는 프로젝트에서는 색상을 하드코딩하지 않고 CSS 변수(Custom Properties)로 관리하는 것이 좋습니다. 나중에 브랜드 컬러가 바뀌어도 한 곳만 수정하면 됩니다.

:root {
  --color-primary: #5b5bd6;
  --color-primary-light: #ededfc;
  --color-text: #111110;
  --color-bg: #ffffff;
}

.button {
  background: var(--color-primary);
}

팁: HSL 값을 변수로 분리하면 더욱 유연하게 색상을 조작할 수 있습니다. --primary-h: 240; --primary-s: 62%;를 정의하고 hsl(var(--primary-h), var(--primary-s), 60%)처럼 사용하면 명도만 바꿔도 다양한 변형을 만들 수 있습니다.

다크모드 색상 대응

다크모드는 이제 선택이 아닌 필수입니다. CSS 미디어 쿼리 prefers-color-scheme: dark를 활용하거나 CSS 변수를 재정의하는 방식으로 대응합니다.

:root { --bg: #ffffff; --text: #111110; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #111110; --text: #f0f0ec; }
}

다크모드에서는 단순히 색을 반전시키는 것이 아니라, 배경은 순수 검정보다 약간 밝은 진회색(#111~#1a1a)을, 텍스트는 순수 흰색보다 약간 어두운 색(#e0~#f5)을 쓰는 것이 눈에 덜 피로합니다.

색상 접근성 (Accessibility)

WCAG(웹 접근성 지침)에서는 텍스트와 배경 사이의 명암 대비 비율을 최소 4.5:1 이상으로 권장합니다. 이를 AA 기준이라 하며, AAA 기준은 7:1 이상입니다.

예를 들어 흰 배경(#ffffff)에 연한 회색 텍스트(#999999)를 사용하면 대비 비율이 약 2.8:1로 기준 미달입니다. 최소 #767676 이상의 어두운 색이 필요합니다.

실무 팁: 색상 변환기의 "텍스트 가독성 미리보기" 기능을 사용하면 현재 선택한 색이 WCAG 기준을 통과하는지 즉시 확인할 수 있습니다.

색상 도구로 직접 확인해보기

명암 대비 확인, HSL 조작, CSS 코드 생성을 한 번에 할 수 있습니다

색상 변환기 →