CSS / Reference / color

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

문법과 주요 값

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

값의 적용 범위와 문법은 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로 지정하면 각 요소의 전경색을 재사용해 테마 색을 연결하기 쉽습니다.

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

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

적용되지 않거나 예상과 다를 때

• 특정 글자만 다른 색이면 자식 요소나 링크의 color 규칙을 확인합니다.
• 전경색 변경이 배경색 변경으로 보이면 currentColor가 배경 속성에 연결되어 있는지 확인합니다.

관련 설정을 함께 조정할 때는 배경색과 전경색 구분을 참고하세요.