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/.

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

The (archived) public mailing list www-style@w3.org (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”.

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

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

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

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 */
}