CSS 컬러 모듈 레벨 4는 아마도 4 자리 및 8 자리 16 진수 RGBA 표기법을 지원할 것 입니다 !

3 주 전 (2014 년 12 월 18 일) CSS 색상 모듈 레벨 4 편집자 초안 이 CSS W3C 실무 그룹에 제출되었습니다. 문서의 현재 버전은 변경하기가 매우 쉬운 상태이지만 다소 가까운 장래에 CSS가 4 자리 및 8 자리 16 진수 RGBA 표기법을 모두 지원할 것임을 암시합니다 .

참고 : 다음 인용문은 관련없는 청크가 잘리지 않았으며이 내용을 읽을 때 소스가 크게 수정되었을 수 있습니다 (위에서 언급 한 것처럼 최종 문서가 아니라 편집자의 초안 임).
상황이 크게 변경된 경우이 답변을 업데이트 할 수 있도록 알려주십시오.

§ 4.2. RGB 16 진 표기법 : #RRGGBB

(A)의 문법 <hex-color>A는 <hash-token>토큰 값이 3, 4, 6, 8 또는 16 진수로 구성 . 즉, 16 진 색상은 해시 문자 “#”로 기록되고 그 뒤에 몇 자릿수 0-9또는 문자 a-f가옵니다 (문자의 경우 중요하지 않음- #00ff00와 동일 함 #00FF00).

8 자리

처음 6 자리 숫자는 6 자리 표기법과 동일하게 해석됩니다. 16 진수로 해석되는 마지막 숫자 쌍은 색상의 알파 채널을 지정합니다. 여기서 00완전히 투명한 색상을 ff나타내고 완전히 불투명 한 색상을 나타냅니다.

예 3
즉, (약간 투명한 파란색) #0000ffcc과 동일한 색상을 나타냅니다 rgba(0, 0, 100%, 80%).

4 자리

이는 3 자리 표기법과 같은 방식으로 “확장”된 8 자리 표기법의 짧은 변형입니다. 16 진수로 해석되는 첫 번째 숫자는 색상의 빨간색 채널을 지정합니다. 여기서 0최소값을 f나타내고 최대 값을 나타냅니다. 다음 3 자리 숫자는 각각 녹색, 파란색 및 알파 채널을 나타냅니다.

CSS 색상의 미래에 이것이 무엇을 의미합니까?

이것은 이것이 레벨 4 문서에서 완전히 제거되지 않았다고 가정하면 색상 을 지원하는 브라우저에서 RGBA 색상 (또는 그 중 하나 인 경우 HSLA 색상 )을 16 진수 형식 으로 정의 할 수 있음을 의미합니다 모듈 레벨 4의 구문.

예

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

클라이언트 쪽 제품에서 언제 사용할 수 있습니까?

모든 농담은 제쳐두고 : 현재 2015 년 시작일 뿐이므로 제품이 최신 브라우저에서만 작동하도록 설계되어 있어도 브라우저에서 아직 지원되지 않습니다. 조만간 프로덕션 브라우저에서이 기능이 작동하지 않습니다.

#RRGGBBAA 색상 표기법에 대한 현재 브라우저 지원보기

그러나 CSS가 작동하는 방식은 실제로 이것을 사용할 수 있다는 것을 의미합니다! 지원하지 않는 브라우저가 폴백을 추가하는 한 실제로 사용하기 시작하려면 유효한 것으로 간주 될 때까지 새 속성을 무시합니다.

figure {
  margin: 0;
  padding: 4px;

  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;

  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);

  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

<figure>Hello, world!</figure>

CSS 에서 background및 color속성 을 지원하는 브라우저에서이 답변을 보는 <figure>한 위의 스 니펫 결과 요소는 다음과 매우 유사합니다.

Windows에서 최신 버전의 Chrome (v39.0.2171)을 사용하여 <figure>요소 를 검사 하면 다음이 표시됩니다.

6 자리 16 진수 폴백은 rgba()값으로 대체되며, 8 자리 16 진수 값은 현재 Chrome의 CSS 파서에서 유효하지 않은 것으로 간주되므로 무시됩니다. 브라우저가이 8 자리 값을 지원하자마자이 값을 덮어 씁니다 rgba().

업데이트 2018-07-04 : Firefox, Chrome 및 Safari는 현재이 표기법을 지원하지만 Edge가 여전히 누락되었지만 아마도 https://caniuse.com/#feat=css-rrggbbaa를 따릅니다 .

답변

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

background: #56ff0077;

background-color: rgba(red($color), green($color), blue($color), 0.2);