color

CSS Reference

작성일 2024-09-24 최근 수정일 2026-10-25

color는 글자와 텍스트 장식 등에 사용할 전경색을 지정합니다. 배경색은 background-color로 따로 정하며, currentColor를 사용하는 테두리나 그림자 등은 요소의 color 값을 따라갑니다.

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`color`	canvastext	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.notice { color: #006c9c; }
.notice { border: 2px solid currentColor; }

값 또는 구분	동작과 선택 기준
`이름 / 16진수`	rebeccapurple, #006c9c 같은 색 지정
`rgb(0 108 156)`	빨강·초록·파랑 성분으로 색 지정
`rgb(0 108 156 / 50%)`	전경색의 알파 값 지정
`currentColor`	이 요소의 color를 다른 색 속성에서 재사용

값과 적용 조건은 MDN color에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 color-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>color 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; border: 2px solid currentColor; padding: 12px; }
.target { color: #006c9c; }
.reference { color: #a03c00; }
</style>
</head>
<body>
<main id="demo">
<h1>color 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">파란 전경색</p><div class="target">글자와 테두리가 같은 색</div></div><div class="b"><p class="label">주황 전경색</p><div class="reference">글자와 테두리가 같은 색</div></div></section>
</main>
</body>
</html>

글자 색과 currentColor 테두리가 함께 바뀝니다. 배경에는 별도 색을 지정하지 않았으므로 color 변경만으로 배경이 채워지지 않습니다.

상속과 currentColor

color는 보통 자식에게 상속됩니다. color: inherit는 부모의 계산된 값을 명시적으로 받습니다. 테두리 색을 생략하거나 currentColor로 지정하면 각 요소의 전경색을 재사용해 테마 색을 연결하기 쉽습니다.

색만으로 의미를 전달하지 않기

오류나 선택 상태는 색뿐 아니라 텍스트, 아이콘의 의미나 다른 식별 표시와 함께 전달하세요. 밝은 배경과 어두운 배경, 고대비 모드에서 읽기 대비를 확인합니다. 알파가 낮은 글자는 뒤의 색과 합성되어 실제 대비가 바뀝니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 .target의 color만 바꾸면 currentColor 테두리도 따라 바뀝니다. 배경색은 별도 속성으로 지정한 뒤 원래 색으로 복구합니다.
색상만으로 오류를 표시하지 말고 오류 문구 등 다른 표시를 함께 제공합니다. 최종 배경에서 대비를 검사하고 밝은·어두운·강제 색상 환경에서도 읽히는지 확인합니다.

색상 표기와 상대 단위의 실제 선택은 색상 값과 px·em·rem·% 단위 이해하기에서 확인할 수 있습니다.

일반 텍스트는 4.5:1, 큰 텍스트는 3:1의 최소 대비 기준을 비교합니다. 큰 텍스트의 크기 조건과 비활성 요소·로고 같은 예외는 공식 기준에서 확인하세요. 사진이나 알파 배경 위에서는 원래 색 두 개만 입력하지 말고 실제 합성된 배경을 검사합니다.

관련 조건은 WCAG 텍스트 대비 기준에서 확인할 수 있습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 background-color입니다.