나는 당신이 쓸 수 있다는 것을 알고 있습니다 ...

background-color: #ff0000;

... 빨간색의 것을 원한다면.

그리고 당신은 쓸 수 있습니다 ...

background-color: rgba(255, 0, 0, 0.5);

... 붉고 반투명 한 것을 원한다면.

16 진수로 부분적으로 투명한 색상을 작성하는 간결한 방법이 있습니까? 나는 다음과 같은 것을 원한다 :

background-color: #ff000088; <--- the 88 is the alpha

... 또는 ...

background-color: #ff0000 50%;

나는 16 진수로 모든 색상을 얻고 있으며 모두 0-255 스케일로 변환해야한다는 것은 성가신 일입니다.

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를 따릅니다 .

개선 사항을 질문에 게시 한 후 답변을 찾았습니다. 죄송합니다!

MS Excel이 도와주었습니다!

16 진수 색상 값에 16 진수 접두사를 추가하기 만하면 % 값과 동일한 불투명도를 가진 알파를 추가 할 수 있습니다.

(rbga에서 불투명도 백분율은 위에서 언급 한 것처럼 10 진수로 표시됩니다)

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+')';

여기를 참조하십시오 http://www.w3.org/TR/css3-color/#rgba-color

0xFFFFFFFF가 32 비트 정수의 최대 값보다 크기 때문에 가능하지 않습니다.

Chrome 52 이상 은 알파 16 진수를 지원합니다 .

background: #56ff0077;

사용 red, green, blueRGBA로 변환 :

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

나는 그것이 불가능하다는 것을 두려워합니다. rgba알고 있는 형식은 유일한 형식입니다.

LESS를 사용할 수 있으면 페이드 기능이 있습니다.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

멋진 왕자:

인터넷 익스플로러 만이 ARGB 형식의 4 바이트 16 진수 색상을 허용합니다. 여기서 A는 알파 채널입니다. 예를 들어 그라디언트 필터에 사용할 수 있습니다.

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

dir은 1 (수평) 또는 0 (세로) 일 수 있으며 색상 문자열은 16 진 색상 (# FFAAD3) 또는 argb 16 진 색상 (# 88FFAAD3) 일 수 있습니다.

글쎄, 다른 색 표기법을 배워야 할 것입니다.
Kuler 는 색상과 여러 표기법을 찾을 수있는 더 나은 기회를 제공합니다.
16 진수는 RGB, FF = 255 및 00 = 0과 다르지 않습니다. 그러나 그것은 당신이 알고있는 것입니다. 어떤 식 으로든 시각화해야합니다.
16 진수, RGBA 및 RGB를 사용합니다. 대량 변환이 필요하지 않은 경우 수동으로이 작업을 수행하면 100 개의 이상한 색상과 해당 코드를 기억하는 데 도움이됩니다.
대량 변환의 경우 Alarie에서 제공 한 것과 같은 스크립트를 작성하십시오. 색상으로 폭발하십시오.

Sass에서는 다음과 같이 쓸 수 있습니다.

background-color: rgba(#ff0000, 0.5);

알파 채널을 사용한 색상의 16 진 표현 에서 제안 된 것처럼 ?

왜 사용하지 background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

텍스트 또는 요소의 색상을 대상으로하는 경우 훨씬 쉽게 수행 할 수 있습니다.