CSS 컬러 모듈 Level 3

개요

CSS (Cascading Style Sheets)는 화면이나 종이, 음성매체 등 다양한 매체에서 HTML이나 XML 문서의 렌더링 방법을 서술하는 언어입니다. CSS는 텍스트의 색상, 배경, 테두리를 비롯해 문서의 곳곳의 다양한 요소에서 색상 관련 속성을 사용합니다. 이 스펙 문서는 색상 관련 값과 속성, 그리고 불투명도에 대한 기능을 정의합니다. 이런 값은 CSS Level 2에 있는 것과 새로 추가된 것을 모두 포함합니다.

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.

이 문서의 상태

이 섹션은 이 문서를 공개했을 때 상태에 대해 설명합니다. 다른 문서가 이 문서를 덮어쓸 가능성이 있으니 주의하시길 바랍니다. 이 문서 및 W3C에서 공개한 다른 문서의 최신 버전은 W3C technical reports index at http://www.w3.org/TR/에서 확인 가능합니다.

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

이 스펙문서에 대한 토론은, 공개 메일링 리스트(아카이브)인 [email protected](참가안내서)에서 하는 것이 바람직합니다. 메일을 보낼 때, 제목에 "css3-color"를 포함해주시길 바랍니다. 예를 들면, “[css3-color] …코멘트 요약…” 같은 형태가 바람직 할 것입니다.

The (archived) public mailing list [email protected] (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-color” in the subject, preferably like this: “[css3-color] …summary of comment…”

이 문서는 Style Activity의 CSS Working Group에서 작성했습니다.

This document was produced by the CSS Working Group (part of the Style Activity).

별도의 구현 레포트가 테스트 스위트를 포함하고 있으며, 각 테스트가 2개의 다른 구현체에서 통과한 것을 기억하고 있습니다.

A separate implementation report contains a test suite and shows that each test in the test suite was passed by at least two independent implementations.

마지막 Last call 문서에 대한 코멘트 목록은 당시 문서 이후의 변경점을 설명합니다. 후보 권고안 기간(2013년 5월 14일 문서)동안 접수된 의견과 그 대응사항은 disposition of comments에서 읽을 수 있습니다. Last Call (2003년 2월 14일) 기간동안 접수된 의견과 그 대응사항은 disposition of comments.에서 읽을 수 있습니다.

The list of comments on the most recent Last Call draft explains the changes that were made since that draft. Comments received during the Candidate Recommendation period (for the 14 May 2003 draft) and how they were addressed in this draft can be found in the disposition of comments. Comments received during the Last Call period (for the 14 February 2003 draft) and how they were addressed can be found in the disposition of comments.

문서의 변경사항 목록도 이 문서에서 볼 수 있습니다.

A complete list of changes to this document is available.

이 문서는 W3C 멤버, 소프트웨어 개발자, 그리고 다른 W3C 그룹 및 관계자들이 평가를 진행하여, 디렉터에 의해 W3C 권고안으로 발표했습니다. 이 문서는 안정적이며, 참고자료로 사용하거나 다른 문서에서 인용해도 좋습니다. 스펙 문서의 권고를 통해 W3C가 하는 역할은 스펙 문서에 관심을 모으고 다방면으로 퍼뜨리는 일입니다. 이를 통해 웹의 기능과 상호운용성 향상을 기대할 수 있습니다.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

이 문서는 2004년 2월 6일 W3C 특허 정책을 따르는 그룹에서 작성하였습니다. W3C는 그룹의 성과물에 관련하여 모든 공개 특허 공개 리스트를 관리합니다. 여기에는 특허 공개에 대한 지시사항도 포함합니다. 특허에 대해서 충분한 지식이 있는 사람이, 스펙 문서의 Essential Claim(s)에 인정된다고 파악되는 경우, W3C 특허 정책 제 6장에 의거하여 정보를 공개해야 할 필요가 있습니다.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

목차

• 1. 들어가기
• 2. 의존도
• 3. Color 속성
  • 3.1. 전경색: the ‘color’ 속성
  • 3.2. 불투명도: the ‘opacity’ 속성
• 4. Color 단위
  • 4.1. 기본 color 키워드
  • 4.2. 숫자 color 값
    • 4.2.1. RGB color 값
    • 4.2.2. RGBA color 값
    • 4.2.3. ‘transparent’ color 값
    • 4.2.4. HSL color 값
      • 4.2.4.1. HSL 예시
    • 4.2.5. HSLA color 값
  • 4.3. 확장 color 키워드
  • 4.4. ‘currentColor’ color 키워드
  • 4.5. CSS 시스템 컬러
    • 4.5.1. CSS2 시스템 컬러
  • 4.6. color의 이용에 관해
• 5. 간단한 alpha 합성
• 6. (X)HTML의 샘플 스타일시트
• 7. 프로필
• 8. Test suite
• 9. 삭제된 기능의 미래 구현
• 10. Acknowledgments
• 11. 변경점
• 12. 참고문서
  • 12.1. 표준 문서
  • 12.2. 참고 정보
• Index
• 속성 인덱스

1. 들어가기

CSS Level 2 이후의 CSS 스펙은 구현과 함께 단계적으로 발전할 수 있도록 여러개의 모듈로 분할하여 정의합니다. 이 스펙은 그런 모듈 중 하나입니다.

CSS beyond level 2 is a set of modules, divided up to allow the specifications to develop incrementally, along with their implementations. This specification is one of those modules.

이 모듈은 요소의 전경색이나 불투명도를 지정하는 속성을 정의합니다. 또한 CSS 값 타입인 <color>에 대해서도 상세하게 정의하고 있습니다.

This module describes CSS properties which allow authors to specify the foreground color and opacity of an element. This module also describes in detail the CSS <color> value type.

이 스펙에서 정의하는 색상 관련 속성과 값은 CSS1 및 CSS2에서 이미 존재하던 것도 있으며, 새로이 추가한 것도 있습니다.

It not only defines the color-related properties and values that already exist in CSS1 and CSS2, but also defines new properties and values.

CSS Wokring Group은 모든 CSS 구현이 모든 속성이나 값을 구현하는 것이라 생각하지 않습니다. 대신 '프로필'이라 불리는 CSS3 서브셋이 구현될 것이라 생각하고 있습니다. 예를 들어, 이 사양에서 정의한 색상 관련 속성과 값을 모두 포함한 32비트 컬러를 대응하는 UA용 프로필이 나올지도 모릅니다.

The Working Group doesn't expect that all implementations of CSS3 will implement all properties or values. Instead, there will probably be a small number of variants of CSS3, so-called "profiles". For example, it may be that only the profile for 32-bit color user agents will include all of the proposed color-related properties and values.

이 스펙문서는 아래의 권고안(Recommendation) 및 초안(Working Draft)에서 색상 관련 기능을 통합하고, 새로운 기능을 덧붙인 것입니다.

The specification is the result of the merging of relevant parts of the following Recommendations and Working Drafts, and the addition of some new features.

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• User Interface for CSS3 (16 February 2000) [CSS3UI]

2. 의존도

이 스펙문서에서 정의하지 않은 용어는 [CSS21]의 Definitions 섹션에서 정의하고 있습니다. 문서의 소스코드는 XML [XML10] 혹은 [HTML401] 문법에 따라 기술하고 있습니다.

Additional terminology is defined in the Definitions section of [CSS21]. Examples of document source code and fragments are given in XML [XML10] or HTML [HTML401] syntax.

3. Color 속성

3.1. 전경색: ‘color’ 속성

이 속성은 요소의 텍스트 콘텐츠를 전경색으로 지정합니다. 색상 관련 값을 취하는 다른 속성이 간접적으로 사용하는 값(currentColor)을 제공할 때 이 속성을 사용합니다. 키워드 ‘currentColor’가 ‘color’ 속성에 의해 지정된 경우, 그는 ‘color: inherit’으로 처리합니다.

This property describes the foreground color of an element's text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color values. If the ‘currentColor’ keyword is set on the ‘color’ property itself, it is treated as ‘color: inherit’.

색상을 지정하는 방법에는 여러 가지가 있습니다. 라임 그린을 지정하는 방법은 다음과 같습니다.

There are different ways to specify lime green:

em { color: lime }               /* color 키워드 */
em { color: rgb(0,255,0) }       /* RGB 범위 0-255   */

<color>

색상 관련 값은 다음 섹션에서 정의합니다.

Color units are defined in a following section.

3.2. 불투명도: ‘opacity’ 속성

불투명도는 후처리연산이라 볼 수 있습니다. 개념적으로는 (자손을 포함한)요소의 RGBA 오프스크린 이미지로 렌더링 된 후, 불투명도가 오프스크린 렌더링과 현재 렌더링을 어떻게 합성시킬 지 결정합니다. 간단한 alpha 합성 섹션에서 자세한 내용을 볼 수 있습니다.

Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering. See simple alpha compositing for details.

<alphavalue>

문법적으로는 <number>와 동일합니다. 불투명도 설정은 객체 전체에 균등하게 적용됩니다. 0.0(투명)에서 1.0(불투명) 범위를 벗어나지 않은 값을 넣을 수 있습니다. 만약 요소가 컨테이너 요소인 경우 불투명도 효과는 각 픽셀의 값이 <alphavalue>인 것 같은 마스크를 사용하여 컨테이너의 내용과 배경이 합성된 것 처럼 보여줍니다.

Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.

불투명도가 1 미만인 요소는 단일 오프 스크린 이미지에서 합성되므로, 요소 외부에 있는 내용은 요소 내용과 Z축으로 포개집니다. 같은 이유로 불투명도가 1 미만인 요소에 대해 구현체는 새로운 스태킹 콘텍스트를 생성해야합니다. 불투명도가 1 미만인 요소가 배치되어있지 않은 경우, 그 부모 스태킹 콘텍스트 내 요소는 ‘ z-index:0’ 혹은 opacity: 1인 경우와 동일한 순서로 생성한 레이어를 그려야합니다. 불투명도가 1 미만인 요소가 배치되어있는 경우, ‘z-index’ 속성은 ‘auto’ 값을 제외하고 [CSS21]에 기록된 대로 적용됩니다. 새로운 스태킹 콘텍스트가 항상 생성되기 때문에 ‘auto’는 ‘0’으로 처리됩니다. 스태킹 컨텍스트에 대해서는 section 9.9 및 [CSS21]의 Appendix E를 참고하시길 바랍니다. 또한, SVG는 독자적인 렌더링 모델 ([SVG11], Chapter 3)을 가지기 때문에 이 단락에서 설명한 규칙은 SVG 요소에는 적용되지 않습니다.

4. Color 단위

<color>는 키워드 혹은 숫자로 이루어져 있습니다.

A <color> is either a keyword or a numerical specification.

4.1. 기본 color 키워드

기본 color 키워드는 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow 입니다. color 이름은 case-insensitive입니다.

The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

4.2. 숫자 color 값

4.2.1. RGB color 값

RGB color model은 숫자 color 표현에 사용합니다. 이 예제는 모두 같은 색상을 나타냅니다.

RGB color model is used in numerical color specifications. These examples all specify the same color:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

16진수 RGB 값 형식은 ‘#’ 직후 이어지는 3자리 혹은 6자리의 16진수 값을 적용합니다. 3자리 표기를 (#rgb)라고 할 경우 각 숫자가 반복되어서 (#rrggbb)로 변환됩니다. 0을 추가하지 않기 때문에, 예를 들어 #fb0는 #ffbb00이 됩니다. 이렇게 함으로써 흰색(#ffffff)을 단축 표기(#fff)할 수 있으며 화면의 색 농도에 대한 의존도를 줄이는 이점이 있습니다.

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

함수 표기 RGB 값 포맷은 ‘rgb(’ 바로 뒤이어 3개의 숫자(3개의 정수 혹은 백분율)를 쉼표로 구분하여 작성한 뒤 ‘)’로 끝낸 것입니다. 정수값 255는 100% 및 16진수의 F 혹은 FF와 같습니다. 즉 rgb(255,255,255) = rgb(100%,100%,100%) = #FFF입니다. 수치 전후에 공백을 넣을 수 있습니다.

The format of an RGB value in the functional notation is ‘rgb(’ followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ‘)’. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values.

모든 RGB color는 sRGB color space에서 지정합니다. ([SRGB]) 색 재현 능력이 UA에 따라 다를 수 있으나, sRGB를 이용하여 색상이 무엇인지 객관적인 측정기준을 통해 모호하지 않게 정할 수 있습니다. 또한 국제 표준과도 연관있습니다. ([COLORIMETRY])

All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards (see [COLORIMETRY]).

장치가 표현 가능한 색 범위 밖의 색이 지정된 경우, 그 색은 잘리거나 색 영역 변환을 수행합니다. 즉 red, green, blue 값은 반드시 지원 범위에 포함되어야 합니다. UA는 색 영역과 다른 색 영역 사이에서 색상을 지원하는 등 고품질의 매핑 처리를 수행할 수 있습니다. 예를 들어 장치의 색 영역이 sRGB가 동일한 일반적인 CRT 모니터에서 다음의 규칙은 동일합니다.

Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. User agents may perform higher quality mapping of colors from one gamut to another. This specification does not define precise clipping behavior. For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:

em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

프린터를 포함한 다른 장치는 sRGB와는 다른 색 영역을 가지고 있습니다. 예를 들어 일부 색상은 0..255 범위를 넘어 (그러나 장치가 표현 가능한 색 범위 내에서) 재현 가능하다면, 다른 색상은 장치의 색 영역 밖에 있기 때문에 다른 색으로 대체될 수 있습니다.

Other devices, such as printers, have different gamuts than sRGB; some colors outside the 0..255 sRGB range will be representable (inside the device gamut), while other colors inside the 0..255 sRGB range will be outside the device gamut and will thus be mapped.

4.2.2. RGBA color 값

RGB 컬러 모델이 “alpha” 값을 포함할 수 있도록 이 스펙에서 확장되었습니다. 간단한 alpha 합성에서 자세한 사항을 볼 수 있습니다. 아래는 모두 같은 색을 지정합니다

The RGB color model is extended in this specification to include “alpha” to allow specification of the opacity of a color. See simple alpha compositing for details. These examples all specify the same color:

em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

RGB 값과 달리, RGBA는 16진수로 표현하는 게 불가합니다.

Unlike RGB values, there is no hexadecimal notation for an RGBA value.

함수 표기식 RGBA 값의 포맷은 ‘rgba(’ 뒤에 콤마로 구분되는 세개의 숫자 값 (3개의 정수 혹은 퍼센테이지 값) 목록 에 이어 <alphavalue>를 입력하고, 그 뒤에 ‘)’로 닫습니다. 정수 값은 255가 100%와 같으며, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). 공백 문자는 숫자 사이에 넣어도 무관합니다.

The format of an RGBA value in the functional notation is ‘rgba(’ followed by a comma-separated list of three numerical values (either three integer values or three percentage values), followed by an <alphavalue>, followed by ‘)’. The integer value 255 corresponds to 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space characters are allowed around the numerical values.

구현 시 RGBA 컬러 값의 red, green, blue를 RGB 색상 값 섹션에서 기록한 규칙에 따라서 장치의 색 영역에 두어야 합니다.

Implementations must clip the red, green, and blue components of RGBA color values to the device gamut according to the rules for the RGB color value composed of those components.

다음 세개의 예제는 rgba() 기법으로 색을 지정한 것입니다.

These examples specify effects that are possible with the rgba() notation:

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

Note. 만약 RGBA 값을 user agent에서 지원하지 않을 경우, 그는 CSS의 전방 호환 파싱 규칙 ([CSS21], 챕터 4)에 따라 인식할 수 없는 값으로 구분해야 합니다. RGBA 값은 불투명도를 무시한 RGB 값으로 취급해서는 안됩니다.

Note. If RGBA values are not supported by a user agent, they should be treated like unrecognized values per the CSS forward compatibility parsing rules ([CSS21], Chapter 4). RGBA values must not be treated as simply an RGB value with the opacity ignored.

4.2.3. ‘transparent’ color 키워드

CSS1은 ‘transparent’를 background-color 속성을 위한 값으로 소개하고 있습니다. CSS2에서는 border-color에서도 ‘transparent’를 사용할 수 있도록 하고있습니다. Open eBook(tm) Publication Structure 1.0.1[OEB101]에서는 color’ 속성을 확장시켜 ‘transparent’ 키워드를 값으로 사용할 수 있도록 하였습니다. CSS3에서는 ‘transparent’ 값을 더욱 확장시켜, color를 값으로 사용하는 모든 속성에 사용 가능하도록 하였습니다. 이로 인해서 CSS3에서 속성정의를 더 심플하게 하였습니다.

CSS1 introduced the ‘transparent’ value for the background-color property. CSS2 allowed border-color to also accept the ‘transparent’ value. The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extended the ‘color’ property to also accept the ‘transparent’ keyword. CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

transparent

완전히 투명한 상태를 나타냅니다. 이 키워드는 투명한 black, 즉 그 계산값인 rgba(0,0,0,0)과 동일합니다.

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

4.2.4. HSL color 값

CSS3에서는 RGB 컬러에는 다음과 같은 제약사항이 있었기 때문에, RGB 값을 완전히 표현 가능하며 숫자로 이루어진 hue-saturation-lightness (HSL) 컬러 값을 추가하였습니다.

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have the following limitations:

• RGB는 CRT를 사용한다는 걸 전제로 두는 하드웨어 지향적인 것이었습니다.
  RGB is hardware-oriented: it reflects the use of CRTs.
• RGB는 직관적이지 않습니다. 사람들이 RGB를 어떻게 사용하는 지 배워도, 실제로는 색상, 채도, 명도를 RGB로 변환하는 것에 불과합니다.
  RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.

다른 여러 컬러 스킴도 사용 가능했습니다. 하지만 HSL에는 밝기와 어두움이 대칭한다는 (HSV와는 맞지 않는) 이점이 있었고, 이로 인해 HSL에서 RGB로 변환이 쉬웠습니다.

There are several other color schemes possible. Some advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example), and it is trivial to convert HSL to RGB.

HSL은 세개의 값(색상‘hue’, 채도‘saturation’, 명도‘lightness’0로 표현합니다. 색상‘hue’은 color circle(즉 무지개를 동그라미로 나타낸 것)로 표현합니다. 이 각도는 일반적으로 CSS에 암포된 단위를 나타내는 각도를 의미하기 떄문에, 문법적으로는 <number>만 작성하게 됩니다. red = 0 = 360이며, 다른 색상은 green=120, blue=240 등 원형에 따라 표기합니다. 각도이기 때문에, -120=240 이며 480=120이라는 대응관계가 있습니다. 표현하고 있는 각도를 x로 구현하며 그 각도를 (((x mod 360) + 360) mod 360)에서 계산한 다음, [0,360) (즉 0 이상 360 미만) 범위 내에서 정규화할 수 있습니다. 채도와 명도는 퍼센테이지로 표현합니다. 100%는 full saturation, 0%는 shade of gray를 의미합니다. 0% lightness는 black, 100% lightness는 white, 50% lightness는 “normal”입니다.

HSL colors are encoding as a triple (hue, saturation, lightness). Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120. One way an implementation could normalize such an angle x to the range [0,360) (i.e. zero degrees, inclusive, to 360 degrees, exclusive) is to compute (((x mod 360) + 360) mod 360). Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.

예를 들면:

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

RGB에 비해 HSL이 가지는 장점은 표현이 훨씬 직관적인 것입니다. 어떤 색상을 표현하고 싶은 것인지 추측하여 변경할 수 있습니다. 또한 같은 계열인 색상 세트도 (색상을 고정한 뒤 밝기 및 채도만 변경하여) 쉽게 작성할 수 있습니다.

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation)

만약 채도가 0% 미만일 경우, 구현체는 이를 0%에 두어야합니다. 만약 디바이스가 표현 가능한 색 밖에 있는 경우, 구현체는 그 색을 표현 가능한 색으로 두어야합니다. 이 경우 가능한 비슷한 색상을 표현해야하며, 그렇지 않은 경우는 정의하지 않습니다. (이는 아래에 기술한 HSL을 RGB로 변경하는 알고리즘을 적용한 후 RGB 색상을 추출해내는 룰을 적용하는 것과는 다릅니다)

If saturation is less than 0%, implementations must clip it to 0%. If the resulting value is outside the device gamut, implementations must clip it to the device gamut. This clipping should preserve the hue when possible, but is otherwise undefined. (In other words, the clipping is different from applying the rules for clipping of RGB colors after applying the algorithm below for converting HSL to RGB.)

HSL을 RGB로 변경하는 알고리즘은 매우 간단합니다. (테이블을 생성하는 데 사용한 ABC 기법[ABC]을 나타냅니다) 이 알고리즘에서, 3개의 값(H, S, L)은 각각 0..1 분수를 나타냅니다.

The algorithm to translate HSL to RGB is simple (here expressed in ABC [ABC] which was used to generate the tables.) In these algorithms, all three values (H, S and L) have been normalized to fractions 0..1:

    HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

4.2.4.1. HSL 예시

각 표는 하나의 색을 표시합니다. 색은 color circle을 12등분(즉 30° 마다 등분)하고 red, yellow, green, cyan, blue, magenta 및 중간색 (마지막 색상은 magenta와 red의 중간색)을 선택하고 있습니다.

Each table below represents one hue. Twelve equally spaced colors (i.e. at 30° intervals) have been chosen from the color circle: red, yellow, green, cyan, blue, magenta, with all the intermediate colors (the last is the color between magenta and red).

표의 X축은 채도(100%, 75%, 50%, 25%, 0%)를 나타냅니다.

The X axis of each table represents the saturation (100%, 75%, 50%, 25%, 0%).

표의 Y축은 밝기를 나타냅니다 50%는 “normal”을 나타냅니다.

The Y axis represents the lightness. 50% is “normal”.

4.2.5. HSLA color 값

단순히 ‘rgb()’의 함수 표현식에 ‘rgba()’로 알파값을 표현하듯, ‘hsl()’ 함수에 알파값을 지정하기 위해 ‘hsla()’ 함수가 존재합니다. 자세한 내용은 간단한 alpha 합성을 보시길 바랍니다. 다음 예제는 동일한 색을 나타냅니다:

Just as the ‘rgb()’ functional notation has the ‘rgba()’ alpha counterpart, the ‘hsl()’ functional notation has the ‘hsla()’ alpha counterpart. See simple alpha compositing for details. These examples specify the same color:

em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */

HSLA 색상 값의 함수 표기 방법은 ‘hsla(’ 뒤에 색상 각도를 표기하고, 명도와 채도를 퍼센테이지로 입력한 뒤, <alphavalue>를 입력한 뒤, ‘)’로 닫아줍니다. 각 숫자 값 사이에 공백문자를 넣어도 무관합니다.

The format of an HSLA color value in the functional notation is ‘hsla(’ followed by the hue in degrees, saturation and lightness as a percentage, and an <alphavalue>, followed by ‘)’. White space characters are allowed around the numerical values.

구현체는 반드시 HSLA 컬러 값의 색상, 채도, 명도를 HSL 컬러 값 섹션에서 기록한 규칙에 따라, 디바이스가 표현가능한 색 영역 내에 두어야합니다.

Implementations must clip the hue, saturation, and lightness components of HSLA color values to the device gamut according to the rules for the HSL color value composed of those components.

다음 예제는 hsla() 표기법을 사용해서 색을 표현하는 방법입니다.

These examples specify effects that are possible with the hsla() notation:

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

4.3. 확장 color 키워드

아래 표는 많은 브라우저에서 지원하는 X11 색상 목록 [X11COLORS]에 SVG 1.0의 gray/grey 관련 키워드를 추가한 것입니다. 표의 내용은 SVG 1.0 color keyword names와 거의 동일합니다. 이 스펙은 SVG에서 정의한 내용을 확장한 것입니다. 표 왼쪽에 있는 2열의 다른 색상 표기는 의미가 있으며, 첫번째 열은 color 이름으로, 두번째 열은 수치를 지정하여 배경색을 표현하고 있습니다.

The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the addition of gray/grey variants from SVG 1.0. The resulting list is precisely the same as the SVG 1.0 color keyword names. This specification extends their definition beyond SVG. The two color swatches on the left illustrate setting the background color of a table cell in two ways: The first column uses the named color value, and the second column uses the respective numeric color value.

4.4. ‘currentColor’ color 키워드

CSS1과 CSS2에서는 border-color’ 속성의 초기 값을 ‘color’ 속성의 값으로 정의했지만, 관련 키워드를 명확히 정의하지는 않았습니다. 이 생략 부분을 SVG에서 정의하였으며, SVG 1.0 에서 ‘currentColor’ 값을 fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, and ‘lighting-color’ 속성을 위한 값으로 정의하였습니다. CSS3는 이 ‘currentColor’ 키워드를 <color> 값을 사용하는 모든 속성에서 이용 가능하도록 하여, color 값을 확장시켰습니다. CSS3에서 해당 키워드를 확장하며, 속성 정의도 간소화되었습니다.

CSS1 and CSS2 defined the initial value of the ‘border-color’ property to be the value of the ‘color’ property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the ‘currentColor’ value for the ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, and ‘lighting-color’ properties. CSS3 extends the color value to include the ‘currentColor’ keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.

currentColor

‘color’ 속성의 값. ‘currentColor’의 계산값은, ‘color’ 값의 계산값입니다. ‘currentColor’ 키워드가 ‘color’ 속성의 값으로 사용된 경우, 이는 ‘color: inherit’과 동일합니다.

The value of the ‘color’ property. The computed value of the ‘currentColor’ keyword is the computed value of the ‘color’ property. If the ‘currentColor’ keyword is set on the ‘color’ property itself, it is treated as ‘color: inherit’.

4.5. CSS 시스템 컬러

4.5.1. CSS2 시스템 컬러

폐지됨.color 키워드를 텍스트와 배경에 사용하는 것 외에도, CSS2는 제작자가 사용자의 그래픽 환경과 통합된 형태로 색을 지정하는 기능을 정의했습니다.

Deprecated. In addition to being able to assign color keyword values to text, backgrounds, etc., CSS2 allowed authors to specify colors in a manner that integrated them into the user's graphic environment.

해당하는 값이 없는 시스템에서 해당 값은, 가장 가까운 시스템 색상값 혹은 기본 색상값으로 매핑되어야 합니다. 시스템 색상을 지원하지 않는 CSS 프로파일이 존재할 가능성에 주의하여야합니다.

For systems that do not have a corresponding value, the specified value should be mapped to the nearest system color value, or to a default color. Note that some profiles of CSS may not support System Colors at all.

다음 목록은 색에 관련된 CSS 값을 그 의미와 함께 열거한 것입니다. 모든 color 관련 속성에 이 키워드들을 지정할 수 있습니다. 키워드는 case-insensitive지만, 색 이름을 더 읽기 쉽게 하기 위해, 써져있는대로 사용하기를 권장합니다.

The following lists additional values for color-related CSS values and their general meaning. Any color property can take one of the following names. Although these are case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible.

ActiveBorder

활성화된 window의 border.

Active window border.

ActiveCaption

활성화된 window의 caption.

Active window caption.

AppWorkspace

여러 문서 인터페이스의 배경 색

Background color of multiple document interface.

Background

데스크탑 배경색

Desktop background.

ButtonFace

주위 border를 입체적으로 보이는 요소의 가장 앞쪽 면 색상

The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.

ButtonHighlight

주위 border를 입체적으로 보이는 요소에서, 빛에 접한 border의 색

The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

ButtonShadow

주위 border를 입체적으로 보이는 요소에서, 빛에 떨어져있는 border의 색

The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

ButtonText

버튼의 문자색

Text on push buttons.

CaptionText

caption, size box, scrollbar arrow box의 문자색

Text in caption, size box, and scrollbar arrow box.

GrayText

(무효화된) 회색 문자색. 디스플레이 드라이버가 회색을 지원하지 않는 경우 #000입니다.

Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

Highlight

선택한 컨트롤의 색상값

Item(s) selected in a control.

HighlightText

선택한 컨트롤의 문자색

Text of item(s) selected in a control.

InactiveBorder

액티브 윈도우의 border

Inactive window border.

InactiveCaption

액티브 윈도우의 caption

Inactive window caption.

InactiveCaptionText

액티브 캡션의 문자색

Color of text in an inactive caption.

InfoBackground

툴팁 컨트롤의 배경색

Background color for tooltip controls.

InfoText

툴팁 컨트롤의 문자색

Text color for tooltip controls.

Menu

메뉴 배경색

Menu background.

MenuText

메뉴의 문자색

Text in menus.

Scrollbar

스크롤 바의 회색영역

Scroll bar gray area.

ThreeDDarkShadow

레이어를 감싼 border가 입체적으로 보이는 요소의 border 중, 광원에서부터 멀리 떨어져있는 어두운 두 면(기본적으로 외부)의 색상

The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDFace

레이어를 감싼 border가 입체적으로 보이는 요소의 표면 배경색

The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDHighlight

레이어를 감싼 border가 입체적으로 보이는 요소의 border 중, 광원에서부터 가까이 있는 밝은 두 면(기본적으로 외부)의 색상

The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDLightShadow

레이어를 감싼 border가 입체적으로 보이는 요소의 border 중, 광원에서부터 멀리 떨어져있는 어두운 두 면(기본적으로 내부)의 색상

The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDShadow

레이어를 감싼 border가 입체적으로 보이는 요소의 border 중, 광원에서부터 가까이 있는 밝은 두 면(기본적으로 내부)의 색상

The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

Window

window의 배경

Window background.

WindowFrame

window의 프레임

Window frame.

WindowText

윈도우 내 텍스트

Text in windows.

p { color: WindowText; background-color: Window }

Note. CSS2 시스템 컬러 값은 CSS3 UI ‘appearance’ 속성의 도입으로 인해 사라졌습니다. UI 관련 요소 혹은 컨트롤의 외관을 모방하고 싶은 경우, 시스템 컬러의 조합이 아닌 ‘appearance’ 속성을 이용하길 바랍니다.

Note. The CSS2 System Color values have been deprecated in favor of the CSS3 UI ‘appearance’ property. If you want to emulate the look of a user interface related element or control, please use the ‘appearance’ property instead of attempting to mimic a user interface element through a combination of system colors.

4.6. color의 이용에 관해

color를 이용해서, 문서에 여러 정보를 부여하거나, 문서를 더 읽기 쉽게 할 수 있지만, 문서 내에서 color를 이용할 때는 W3C 웹 콘텐츠 접근성 가이드라인 [WCAG20]을 고려해주길 바랍니다.

Although colors can add significant amounts of information to document and make them more readable, please consider the W3C Web Content Accessibility Guidelines [WCAG20] when including color in your documents.

• 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element
• 1.4.1 색의 사용: 색만으로 정보를 전달하고, 행동을 지시하고, 반응을 유발하고, 시각적 요소를 식별하는 시각적인 용도로 사용되면 안된다. (레벨 A)
  역주: 위 가이드라인은 한국어 번역본입니다.

5. 간단한 alpha 합성

구현체는 그릴 때 [SVG11]의 Section 14.2 Simple alpha compositing에 정의된 규칙에 따라 알파를 정의해야합니다. (만약 해당 섹션에서 언급하는 ‘color-interpolation’나 ‘color-rendering’ 속성이 구현되지 않거나 적용되지 않을 경우, 구현체는 초기 값을 가지고 있는 것으로 간주해야합니다)

When drawing, implementations must handle alpha according to the rules in Section 14.2 Simple alpha compositing of [SVG11]. (If the ‘color-interpolation’ or ‘color-rendering’ properties mentioned in that section are not implemented or do not apply, implementations must act as though they have their initial values.)

6. (X)HTML의 샘플 스타일시트

이 부록은 참고자료이며 표준에 준하는 내용이 아닙니다. 이 스타일 시트는 구현체에서 HTML4, XHTML1, XHTML 1.1, XHTML Basic, 다른 XHMTL Family 문서의 기본 스타일 시트의 일부로 사용할 수 있을겁니다.

This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.

html { 
	color: black;
	background: white;
}


/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }   
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}

7. 프로필

CSS3 Color를 이용하는 스펙은 CSS3 color에서 정의된 기능 중 무엇을 받아들이고 무엇을 제외하고 다른 어떤 제약이 있는 지를 기록한 부분집합을 정의해야합니다.

Each specification using CSS3 Color must define the subset of CSS3 Color features it allows and excludes, and describe the local meaning of all the components of that subset.

표준에 준하지 않는 예시입니다:

Non normative examples:

8. Test suite

CSS Color Module의 Test Suite가 준비되어있습니다. 이 test suite는 UA가 스펙에 적합하는 지 확인하는 용도입니다. 이 test suite는 포괄적인 내용을 의도하지 않으며 사용가능한 모든 숫자 color 값 조합을 확인하는 게 아닙니다. 이 test suite는 http://www.w3.org/Style/CSS/Test/CSS3/Color/current/에서도 활용 가능합니다.

A CSS Color Module Test Suite has been developed, although further tests may be added. This test suite is intended to allow user agents to verify their basic conformance to the specification. This test suite does not pretend to be exhaustive and does not cover all possible numerical color values. These tests are available at http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.

9. 삭제된 기능의 미래 구현

2003년 5월 14일자 후보 권고안에 정의된 기능의 대부분을 이 스펙에서 제거하였습니다. 그러나 삭제된 기능의 구현을 계속 호소하고 있으며 충분한 구현 및 상호 운용성을 보장하기 위한 test suite가 있으면 추후에 포함할 수 있습니다. 삭제된 기능은 다음과 같습니다.

A number of features that were present in the 14 May 2003 Candidate Recommendation are no longer present in this specification. However, the call for implementations for these features remains, and they may be included in a future level of this specification given sufficient implementations and a test suite to demonstrate interoperability. These features are:

• ICC Color Profile: the ‘color-profile’ property
• The ‘rendering-intent’ property
• The ‘@color-profile’ at-rule
• ‘flavor’ system color

10. Acknowledgments

Thanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.

11. 변경점

이 문서는, 한단계 전인 2010년 10월 28일 공개된 후보 권고안에서, W3C 권고안 오픈에 맞춰 날짜, 상태, 스타일 변경, 참고 문서를 업데이트 하였습니다. 이에 따른 스펙의 변경은 크게는 없습니다.

This document differs from the previous, 28 October 2010, Proposed Recommendation document as follows: the date, status and styling are updated for W3C Recommendation, the references are updated, and this changes appendix lists no substantive changes.

12. 참고문서

12.1. 표준 문서

[COLORIMETRY]

Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

[SRGB]

Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10) ISBN: 2-8318-4989-6 - ICS codes: 33.160.60, 37.080 - TC 100 - 51 pp. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf

[SVG11]

Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/

12.2. 참고 정보

[ABC]

Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc

[CSS2]

Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411

[CSS3UI]

Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511

[HTML401]

David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[OEB101]

Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm

[SVG10]

Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904

[WCAG20]

Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211

[X11COLORS]

X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names

[XML10]

C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

Index

• ActiveBorder, 4.5.1.
• ActiveCaption, 4.5.1.
• aliceblue, 4.3.
• <alphavalue>, 3.2., 4.2.2., 4.2.5.
• antiquewhite, 4.3.
• appearance, 4.5.1.
• AppWorkspace, 4.5.1.
• aqua, 4.1., 4.3.
• aquamarine, 4.3.
• azure, 4.3.
• Background, 4.5.1.
• beige, 4.3.
• bisque, 4.3.
• black, 4.1., 4.3.
• blanchedalmond, 4.3.
• blue, 4.1., 4.3.
• blueviolet, 4.3.
• brown, 4.3.
• burlywood, 4.3.
• ButtonFace, 4.5.1.
• ButtonHighlight, 4.5.1.
• ButtonShadow, 4.5.1.
• ButtonText, 4.5.1.
• cadetblue, 4.3.
• CaptionText, 4.5.1.
• chartreuse, 4.3.
• chocolate, 4.3.
• color, 3.1.
• <color>, 3.1., 4.
• color-interpolation, 5.
• color-rendering, 5.
• compositing, 5.
• coral, 4.3.
• cornflowerblue, 4.3.
• cornsilk, 4.3.
• crimson, 4.3.
• currentColor, 4.4., 3.1., 3.1., 3.1.
• cyan, 4.3.
• darkblue, 4.3.
• darkcyan, 4.3.
• darkgoldenrod, 4.3.
• darkgray, 4.3.
• darkgreen, 4.3.
• darkgrey, 4.3.
• darkkhaki, 4.3.
• darkmagenta, 4.3.
• darkolivegreen, 4.3.
• darkorange, 4.3.
• darkorchid, 4.3.
• darkred, 4.3.
• darksalmon, 4.3.
• darkseagreen, 4.3.
• darkslateblue, 4.3.
• darkslategray, 4.3.
• darkslategrey, 4.3.
• darkturquoise, 4.3.
• darkviolet, 4.3.
• deeppink, 4.3.
• deepskyblue, 4.3.
• dimgray, 4.3.
• dimgrey, 4.3.
• dodgerblue, 4.3.
• firebrick, 4.3.
• floralwhite, 4.3.
• forestgreen, 4.3.
• fuchsia, 4.1., 4.3.
• gainsboro, 4.3.
• ghostwhite, 4.3.
• gold, 4.3.
• goldenrod, 4.3.
• gray, 4.1., 4.3.
• GrayText, 4.5.1.
• green, 4.1., 4.3.
• greenyellow, 4.3.
• grey, 4.3.
• Highlight, 4.5.1.
• HighlightText, 4.5.1.
• honeydew, 4.3.
• hotpink, 4.3.
• hsl(), 4.2.4.
• hsla(), 4.2.5.
• InactiveBorder, 4.5.1.
• InactiveCaption, 4.5.1.
• InactiveCaptionText, 4.5.1.
• indianred, 4.3.
• indigo, 4.3.
• InfoBackground, 4.5.1.
• InfoText, 4.5.1.
• ivory, 4.3.
• khaki, 4.3.
• lavender, 4.3.
• lavenderblush, 4.3.
• lawngreen, 4.3.
• lemonchiffon, 4.3.
• lightblue, 4.3.
• lightcoral, 4.3.
• lightcyan, 4.3.
• lightgoldenrodyellow, 4.3.
• lightgray, 4.3.
• lightgreen, 4.3.
• lightgrey, 4.3.
• lightpink, 4.3.
• lightsalmon, 4.3.
• lightseagreen, 4.3.
• lightskyblue, 4.3.
• lightslategray, 4.3.
• lightslategrey, 4.3.
• lightsteelblue, 4.3.
• lightyellow, 4.3.
• lime, 4.1., 4.3.
• limegreen, 4.3.
• linen, 4.3.
• magenta, 4.3.
• maroon, 4.1., 4.3.
• mediumaquamarine, 4.3.
• mediumblue, 4.3.
• mediumorchid, 4.3.
• mediumpurple, 4.3.
• mediumseagreen, 4.3.
• mediumslateblue, 4.3.
• mediumspringgreen, 4.3.
• mediumturquoise, 4.3.
• mediumvioletred, 4.3.
• Menu, 4.5.1.
• MenuText, 4.5.1.
• midnightblue, 4.3.
• mintcream, 4.3.
• mistyrose, 4.3.
• moccasin, 4.3.
• navajowhite, 4.3.
• navy, 4.1., 4.3.
• oldlace, 4.3.
• olive, 4.1., 4.3.
• olivedrab, 4.3.
• opacity, 3.2.
• orange, 4.3.
• orangered, 4.3.
• orchid, 4.3.
• palegoldenrod, 4.3.
• palegreen, 4.3.
• paleturquoise, 4.3.
• palevioletred, 4.3.
• papayawhip, 4.3.
• peachpuff, 4.3.
• peru, 4.3.
• pink, 4.3.
• plum, 4.3.
• powderblue, 4.3.
• purple, 4.1., 4.3.
• red, 4.1., 4.3.
• #rgb, 4.2.1.
• rgb(), 4.2.1.
• rgba(), 4.2.2.
• rosybrown, 4.3.
• royalblue, 4.3.
• #rrggbb, 4.2.1.
• saddlebrown, 4.3.
• salmon, 4.3.
• sandybrown, 4.3.
• Scrollbar, 4.5.1.
• seagreen, 4.3.
• seashell, 4.3.
• sienna, 4.3.
• silver, 4.1., 4.3.
• skyblue, 4.3.
• slateblue, 4.3.
• slategray, 4.3.
• slategrey, 4.3.
• snow, 4.3.
• springgreen, 4.3.
• sRGB, 4.2.1., 4.1.
• steelblue, 4.3.
• system colors, 4.5.1.
• tan, 4.3.
• teal, 4.1., 4.3.
• thistle, 4.3.
• ThreeDDarkShadow, 4.5.1.
• ThreeDFace, 4.5.1.
• ThreeDHighlight, 4.5.1.
• ThreeDLightShadow, 4.5.1.
• ThreeDShadow, 4.5.1.
• tomato, 4.3.
• transparent, 4.2.3., 3.1.
• turquoise, 4.3.
• violet, 4.3.
• wheat, 4.3.
• white, 4.1., 4.3.
• whitesmoke, 4.3.
• Window, 4.5.1.
• WindowFrame, 4.5.1.
• WindowText, 4.5.1.
• yellow, 4.1., 4.3.
• yellowgreen, 4.3.

속성 인덱스