CSS에서 텍스트(폰트)에 특정한 색, 원하는 색을 사용할 경우 프로퍼티 color를 사용할 수 있습니다. color 프로퍼티의 값이 해당 엘리먼트에 적용되게됩니다. 아래는 사용 문법입니다.

color { color | inherit | initial }



@ CSS color property
- CSS1

CSS의 color 프로퍼티는 사용할 색을 값으로 선택합니다. 이때 HEX, RGB, RGBA, HSL, HSLA 값을 사용할 수 있습니다. 즉 아래와 같이 사용됩니다.
color: #f00;
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(100, 50%, 30%);


! color 값으로 투명도 설정하기색에 투명도를 설정할 수 있으며 이때는 아래와 같이 적용할 수 있습니다.
color: rgba(255, 0, 0, 0.5);
color: hsla(30, 50%, 20%, 0.5);




# color 프로퍼티 사용 팁 및 정보color 프로퍼티는 일반적으로 HEX값이 많이 사용됩니다. 이 경우 0부터 F까지의 값을 사용해 색의 정도를 rgb 순서대로 사용하게됩니다. 만약 그린색이라면 아래와 같이 사용됩니다.
color: #0f0;
color: #00ff00;



! 참고. css에 클래스명 미리 정의하여 사용하기웹 사이트에 사용되는 텍스트의 색이 반복사용되는 경우... 예를들어 기본색, 강조색, 중요색, 비활성화색 4가지가 많이 사용된다면 그때마다 color 프로퍼티값을 추가하는 것보다 미리 css 클래스명에 정의하여 사용하는 방법이 일반적입니다. 예를들어 아래와 같은 구문이 있는 경우...
<p>필요한 정보를 찾을때 유용한 웹사이트 webisfree.com (기타...)</p>

아래처럼 미리 css에 색을 지정하고 태그에 적용하여 사용할 수 있을 것입니다. 실제로 이런 방법이 많이 쓰입니다.
.default { color: #666; }
.strong { color: #000; }
.important { color: #f00; }
.disabled { color: #aaa; }

아래처럼 클래스에 정의된 스타일을 span태그를 사용하여 지정할 수 있습니다.
<p class="default"><span class="important">필요한 정보</span>를 찾을때 유용한 웹사이트 <span class="strong">webisfree.com</span> <span class="disabled">(기타 ...)</span></p>

위 태그를 적용한 결과는 아래와 같이 나타나게됩니다.

필요한 정보를 찾을때 유용한 웹사이트 webisfree.com(기타 ...)





# color 프로퍼티 예제보기아래는 다양한 값들이 적용된 예제들입니다.
.red {
  color: #f00;
}

.blue {
  color: #00f;
}

@ color.html
<span class="red">중요</span>
<span class="blue">파랑색</span>

<span style="color: rgba(255, 0, 0, 0.2)">불투명 레드</span>

아래에서 어떻게 나타나는지 확인해보세요.

중요 파랑색 불투명 레드