알파 채널이있는 색상의 16 진수 표현?


117

16 진수 형식으로 색상 (알파 채널 포함)을 표현하는 방법에 대한 W3 또는 기타 주목할만한 표준이 있습니까?

#RGBA 또는 #ARGB입니까?


8
CSS Color Level 4 소스에서 제공됩니다 (4 번째 글 머리 기호 참조)
Šime Vidas 2013 년

@ ŠimeVidas 당신이 대답에 넣었다면, 나는 당신을 찬성했을 것입니다.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@cirosantilli 제가 담당자가 필요한 것 같나요? :-P
Šime Vidas 2014

1
@ ŠimeVidas LOL, 당신이 ... =) 다음 몇 가지를 공유하는 신경 경우
치로 틸리郝海东冠状病六四事件法轮功

여기에 비슷한 CSS 관련 질문이 있습니다. CSS hexidecimal RGBA?
James Donnelly

답변:


82

CSS 3에서 사양을 인용하기 위해 "RGBA 값에 대한 16 진수 표기법이 없습니다"( CSS 레벨 3 사양 참조 ). 대신 소수 또는 백분율로 rgba () 기능 표기법을 사용할 수 있습니다. 예를 들어 rgba (255, 0, 0, 0.5)는 50 % 투명한 빨간색입니다. RGB 채널은 0-255 또는 0 % -100 %이고 알파는 0-1입니다.

CSS 4 *에서는 8 자리 16 진수 색상의 7 번째 및 8 번째 문자 또는 4 자리 16 진수 색상의 4 번째 문자를 사용하여 알파 채널을 지정할 수 있습니다 ( CSS 레벨 4 사양 * 참조).

2019 년 5 월부터 80 % 이상의 사용자가 #RGBA 형식을 이해할 것으로 예상됩니다.

  • Firefox는 Firefox 49 ( Mozilla 버그 567283 ) 부터이 구문을 지원했습니다 .
  • Safari는 Safari 10부터이 구문을 지원했습니다.
  • Chrome은 Chrome 62부터이 구문을 지원했습니다. 이전 버전의 경우 실험용 웹 기능을 사용하여이 구문을 사용할 수 있습니다. Chromium 문제 618472Webkit 버그 150853을 참조하세요 .
  • Android P 이상을 대상으로하는 Android 앱은이 구문을 사용할 수 있습니다.
  • Opera는 Opera 52 (또는 실험적 웹 기능이 활성화 된 경우 Opera 39)에서이 구문을 지원합니다.
  • IE 11 및 EdgeHTML 18 (Edge 44)은이 구문을 지원하지 않습니다. Chromium 기반 버전의 Edge는이 구문을 지원합니다.

CanIUse.com 에서 최신 브라우저 지원 정보를 확인할 수 있습니다.

* 기술적으로 아직 초안이지만 브라우저 지원을 고려할 때 변경 될 가능성은 거의 없습니다.


2
현재로서는, 모질라 (파이어 폭스 49) #RRGGBBAA 및 #RGBA 지원하기 위해 나타납니다
Shiyaz

92

16 진수 알파 형식이없는 것 같습니다. http://www.w3.org/TR/css3-color/

어쨌든 SASS와 같은 CSS 전처리기를 사용하면 16 진수를 rgba다음으로 전달할 수 있습니다 .

rgba(#000, 0.5);

그리고 전처리 기는 16 진 코드를 rgb로 자동 변환합니다.


15

공식 표준이 있는지 잘 모르겠습니다.

RGBA는 Web Macromedia에 대해 본 표현이며 다른 사용자는 ARGB를 사용합니다.

RGBA가 더 일반적인 표현이라고 생각합니다.

도움이된다면 W3 for CSS3
http://www.w3.org/TR/css3-color/#rgba-color

편집 (패트릭) : 위의 W3 링크에서 인용

RGB 값과 달리 RGBA 값에는 16 진수 표기법이 없습니다.


2
또한, 알파와 색상을 지정하는 CSS 기능은 RGBA ()입니다
황색

8
게시 한 W3 링크에서 : RGB 값과 달리 RGBA 값에 대한 16 진수 표기법이 없습니다.
Patrick Klug

2
전에 # RGB, A를 본 적이 있습니다. 기묘한.
여호수아

안드로이드 드로어 블의 경우, ARGB로 나타납니다 developer.android.com/reference/android/graphics/drawable/...
데릭 커스

10

Chrome 52+ alpha hex를 지원합니다 .

background: #56ff0077;

이전 브라우저의 경우 다음을 사용해야합니다.

background-color: rgba(255, 220, 0, 0.3);

3
Android에서 문제를 일으켰 기 때문에 실험용 웹 기능을 활성화하지 않는 한 그렇지 않습니다. 브라우저 지원 세부 정보는 위의 답변을 참조하십시오.
thelem

3

16 진수 색상을 김프 또는 사진관의 색상 선택기에 넣어 RGB 값을 얻은 다음 알파 값을 사용할 수 있습니다. 예. red는 #FF0000또는 rgb(255,0,0) 알파 값이 .5 인 빨강을 원한다면 rgba(255,0,0,.5).

당신이 원했던 것이 정확히는 아니지만 도움이되기를 바랍니다.


1
이것은 투표로 인해 약간 가혹 해 보입니다. 질문에 대한 답은 아니지만 질문은 그들이 왜 알고 싶어하는지 말하지 않습니다. CSS에서 RGBA 색상을 사용하려는 경우이 답변이 맞습니다.
thelem
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.