color 속성의 이해

color 속성은 글자(폰트)의 색상, 즉 전경색을 지정합니다.

다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다.

CSS 데모: color 데모 버튼을 클릭해 보세요!

color 속성의 형식은 다음과 같습니다.

값

color 속성 값
<color> 색상 값

color 속성은 단일 <color>(색상) 값을 사용해 지정합니다.
여러 색상으로 구성된 그라디언트(예: linear-gradient(#f69d3c, #3f87a6))를 사용할 수 없다는 의미입니다.

구문

CSS color 속성 값 예시 
/* 키워드 값 */
color: currentcolor;

/* 컬러 이름 값 */
color: green;
color: orange;
color: darkslateblue;
color: transparent;

/* 16진수(hex) 값 */
color: #f00; /* 빨강 */
color: #ff6347; /* 토마토색 */
color: #ff6347aa; /* 토마토색, 반투명 */

/* rgb() 값 */
color: rgb(255, 99, 71, 0.8); /* 토마토 */
color: rgba(255, 99, 71, 0.8); /* 토마토, 투명도 */
color: rgb(255 99 71 / 0.5); /* 토마토, 50% 투명도 */
color: rgba(255 99 71 / 0.3); /* 토마토, 30% 투명도 */
color: rgb(255 99 71 / 60%); /* 토마토, 60% 투명도 */
color: rgba(255.6 99 71 / 40%); /* 토마토, 40% 투명도 */

/* hsl() 값 */
color: hsl(120, 100%, 25%, 0.5); /* 녹색 */
color: hsla(120, 100%, 25%, 0.5); /* 녹색, 투명도 */
color: hsl(120 100% 25% / 0.5); /* 녹색, 투명도 */
color: hsla(120 100% 25% / 50%); /* 녹색, 50% 투명도 */
color: hsl(120 100% 25% / 70%); /* 녹색, 70% 투명도 */
color: hsla(120.2 100% 25% / 80%); /* 녹색, 80% 투명도 */

/* 글로벌 값 */
color: inherit;
color: initial;
color: unset;

형식 구문

CSS 
selector {
    color: /* value */
}

형식 정의

color 속성의 형식 정의
초깃값 canvastext
적용 요소 모든 요소
상속 예
애니메이션 예

초깃값 - canvastext

color 속성의 초깃값이 canvastext라는 것은 흥미로운 점입니다.

canvastext는 <canvas> 요소에서 텍스트를 그릴 때 사용하는 기본 색상 값으로, 이는 브라우저의 기본 스타일을 의미합니다. 즉, color 속성에 명시적으로 값을 지정하지 않으면, 텍스트 색상은 기본적으로 canvastext 값(일반적으로 검정색)이 사용됩니다.

상속과 컨트롤 요소들

이 초깃값은 사실 대부분의 웹 페이지에서 직접적인 영향을 주지 않습니다. 그 이유는 대부분의 HTML 요소들이 color 속성 값을 inherit(상속)으로 설정하고 있기 때문입니다. 즉, 부모 요소에서 지정한 텍스트 색상이 자식 요소에 적용됩니다.

다만, 컨트롤 요소들(예: <input>, <textarea>, <select>, <button> 등)에서는 기본적으로 canvastext 값(일반적으로 검정색)이 사용됩니다. 이들 요소는 부모의 텍스트 색상과 관계없이 기본적으로 canvastext 값으로 설정되어 있어, 별도로 텍스트 색상을 지정하지 않으면 검정색이 적용됩니다.

또한, <a> 요소(하이퍼링크)의 경우, 기본적으로 브라우저 스타일 시트에서 푸른색 계열(대개 파란색)로 설정됩니다. 이는 사용자가 하이퍼링크를 쉽게 구분할 수 있도록 돕는 시각적 효과입니다. 이 색상은 color 속성으로 변경할 수 있습니다.

예제

다음의 각 예제들은 글자색을 모두 파랗게 만듭니다.

CSS 
p {
    color: blue;
}
p {
    color: #00f;
}
p {
    color: #0000ff;
}
p {
    color: rgb(0, 0, 255);
}
p {
    color: rgb(0%, 0%, 100%);
}
p {
    color: hsl(240, 100%, 50%);
}

/* 50% 투명 */
p {
    color: rgba(0, 0, 255, 0.5);
}
p {
    color: hsla(240, 100%, 50%, 0.5);
}

주의할 점

color 속성은 다양한 방식으로 색상을 지정할 수 있지만, 몇 가지 중요한 제한 사항과 주의할 점이 있습니다.

그라디언트 값 사용 불가

color 속성은 단일 색상만 지정할 수 있으며, 그라디언트 값(예: linear-gradient(), radial-gradient())을 사용할 수 없습니다.

CSS 
/* 그라디언트 값은 사용할 수 없습니다. */
color: linear-gradient(#f69d3c, #3f87a6);

텍스트 색상에 그라디언트를 적용하려면, 대신 background-clip 속성 등을 사용하여 배경색에 그라디언트를 설정하고 텍스트 색상을 투명하게 만드는 방식으로 처리해야 합니다. color 속성은 글자의 전경색을 지정합니다.

HTML 
<p>텍스트 색상에 그라디언트를 적용</p>
CSS 
p {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(red, blue);
}
실제 적용된 모습

이모지 글리프에 적용 안 됨

color 속성은 글자에 적용되지만, 이모지 글리프에는 적용되지 않습니다.
이모지 색상은 시스템에 의해 관리되므로, color 속성으로 이모지 색상을 바꿀 수 없습니다.

HTML 
<p>환영합니다. 반갑습니다!😃</p>
CSS 
p {
    color: red;
}

'실제 적용된 모습'에서 일반 텍스트는 빨간색으로 지정되었지만, 이모지(😃)는 빨간색으로 적용되지 않습니다.

실제 적용된 모습

color: currentcolor;는 부모 색상 상속처럼 동작함

CSS의 currentcolor 키워드 값은 현재 요소의 글자색을 나타냅니다.
currentcolor를 color 속성에 지정하면, 부모 요소의 색상을 상속받는 것처럼 동작합니다.

HTML 
<div>
    <p>currentcolor</p>
</div>
CSS 
/* 부모 요소 */
div {
  color: blue;
}

/* 자식 요소 */
p {
  color: currentcolor; /* 부모 요소의 색상 값인 blue를 참조 */
}

위 예제에서 <p> 요소는 부모 요소인 <div>에서 상속된 blue 색상을 사용합니다. currentcolor는 현재 요소의 color의 계산된 값을 참조하는 키워드로, 상속된 색상 값을 가져옵니다.

실제 적용된 모습

접근성 고려사항

텍스트와 배경 사이에 충분한 대비를 제공해야 합니다. 대개 텍스트가 배경과 충분히 구별되도록 대비 비율이 4.5:1 이상이어야 합니다. 이는 WCAG(웹 콘텐츠 접근성 지침)에서 권장하는 기준입니다.

WCAG(Web Content Accessibility Guidelines)

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.

브라우저 호환성

color 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
color 1 12 1 1

명세서

color 속성의 명세서 사양
명세서 사양
color CSS Color Module Level 4
#the-color-property

참고문헌

같이 보기