CSS Types

CSS Types

Editing

<hex-color>

값이 3, 4, 6 또는 8개의 16진수로 구성된 <hash-token> 토큰이다. 즉 16진수 색상은 해시 문자 '#' 다음에 숫자[0-9],  대소문자 구분이 없는 알파벳 문자[a-f]의 조합으로 작성된다.

헥스(hex)로 RGB 색상을 설정하는 몇 개의 자리수(digits)는 다음과 같다.

6 digits

6개의 자리로 표현되는 값은 각 2개씩의 코드 조각이 16진수로 표현되는 RGB 10진수 색상값이다.

다음 색상은 모두 동일하게 빨간색을 표현한다. FF는 10진수로 255이고 00은 최소값인 0을 나타낸다.
color: #FF0000;
color: rgb(255, 0, 0);

8 digits

8개의 자리로 표현되는 값은 6개의 자리로 표현되는 RGB 색상과 동일하고 나머지 2개의 코드는 투명도(알파채널)를 16진수 표현한 것이다.

다음 색상은 모두 동일하게 0.8의 투명도를 갖는 빨간색을 표현한다.
color: #FF0000CC;
color: rgb(255 0 0 / 80%);

3 digits

6개의 자리로 표현되는 색상값을 약식으로 표현한다. 3개의 각 코드는 각 RGB 채널의 값을 나타낸다. F는 최대값을 나타내고 0은 최소값을 나타낸다. 모든 6개의 자리로 표현되는 색을 약식으로 표현할 수 없다는 점을 알아둬야 한다.

다음 색상은 모두 동일하게 흰색을 표현한다.
color: #FFFFFF;
color: #FFF;

4 digits

8개의 자리로 표현되는 색상값을 약식으로 표현한다. 기본적으로 3 자리로 표현하는 방식과 동일하며 4번째 값은 투명도(알파 채널)를 지정한다.

다음 색상은 모두 동일하게 80%의 투명도를 갖는 흰색을 표현한다.
color: #FFFFFFCC;
color: #FFFC;

버전 명세

Modules
Module NameStatusSummary
CSS Color Module Level 4

Last review date: 2022-11-12