CSS 16진수 RGBA?

CSS 16진수 RGBA?

나는 당신이 쓸 수 있다는 것을 압니다...

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자리 RGBA 표기법을 모두 지원할 것임을 암시합니다.

참고: 다음 인용문에는 관련 없는 청크가 삭제되어 있으며, 이 인용문을 읽을 때 소스가 심하게 수정되었을 수 있습니다(위에서 언급했듯이, 이 인용문은 편집자의 초안이며 최종 문서가 아닙니다).
상황이 많이 바뀌었으면 댓글로 알려주시면 이 답변을 업데이트 할 수 있습니다!

4.2. RGB 16진수 표기법: #RRGGB

의 <hex-color>입니다.<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%)(약간 투명한 파란색).

네 자리

이것은 8자리 표기법의 더 짧은 변형으로, 3자리 표기법과 같은 방식으로 "확장"됩니다.합니다. 서 16진수 수진해석첫번숫색상빨채다지정니합널간을색의자는째로는되▁the▁16다,▁of진니,정▁channel▁color합▁the지▁where.0 최값을나니다냅타소다▁the를 나타냅니다.f최대값을 나타냅니다.다음 세 자리는 각각 녹색, 파란색 및 알파 채널을 나타냅니다.

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

즉, 이것이 레벨 4 문서에서 완전히 제거되지 않았다고 가정하면, 곧 컬러 모듈 레벨 4의 구문을 지원하는 브라우저에서 RGBA 색상(또는 HSLA 색상)을 16진수 형식으로 정의할 수 있습니다.

예

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년의 시작일 뿐이므로 이러한 기능은 당분간 어떤 브라우저에서도 지원되지 않을 것입니다. 제품이 최신 브라우저에서만 작동하도록 설계되었다고 해도 조만간 프로덕션 브라우저에서 이 기능을 볼 수 없을 것입니다.

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

하지만, 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>

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

on 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/ #filename=filename-dscgbaa).

저는 질문에 대한 개선 사항을 게시한 후 답을 찾았습니다.미안!

MS Excel이 도와줬습니다!

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

(rbga 단위로 백분율 불투명도는 위에서 언급한 대로 소수로 표시됩니다.)

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

#rrggbbaa표기법은 Chrome 62+ 및 기타 모든 상록 브라우저에서 완전히 지원됩니다.

background: #56ff0077;

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

새스는red,green,blue16진수 색상에서 채널로 추출하기

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

Sass 또한 가지고 있습니다.rgba($hex_color, $alpha)

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

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

알파 채널이 있는 색상의 16진수 표현에서 제안된 것처럼?

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

불가능합니다. 0xFFFFFF가 32비트 정수의 최대값보다 크기 때문일 수 있습니다.

유감스럽게도 그건 불가능해요.rgba당신이 아는 유일한 형식입니다.

HEX 변수에 모든 색상이 있는 경우 다음 SCSS 코드를 사용할 수 있습니다.

먼저, 이 매핑을 rgba - 불투명도 값에서 16진수 코드로 복사합니다.

    $opacity-to-hex: (
    0: '00',
    0.05: '0C',
    0.1: '19',
    0.15: '26',
    0.2: '33',
    0.25: '3F',
    0.3: '4C',
    0.35: '59',
    0.4: '66',
    0.45: '72',
    0.5: '7F',
    0.55: '8C',
    0.6: '99',
    0.65: 'A5',
    0.7: 'B2',
    0.75: 'BF',
    0.8: 'CC',
    0.85: 'D8',
    0.9: 'E5',
    0.95: 'F2',
    1: 'FF'
)

그런 다음 매핑을 사용하는 에서 다음 혼합을 복사합니다.

@mixin color-opacity($property, $color, $opacity) {
    #{$property}: unquote($color + map-get($opacity-to-hex, $opacity));
}

마지막으로, 모든 색상 속성에서 매핑된 불투명도와 함께 이 혼합을 사용할 수 있습니다. 예를 들어 다음과 같습니다.

@include color-opacity('background-color', $your_hex_color, 0.8);
@include color-opacity('color', $your_hex_color, 0.5);

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) 또는 16진수 색상(#88)일 수 있습니다.FFAAD3).

scss에서는 다음을 사용할 수 있습니다.

background-color: rgba($color: #000088, $alpha: 0.5);

음, 다른 색 표기법은 여러분이 배워야 할 것입니다.
Kuler는 색상과 여러 표기법을 찾을 수 있는 더 나은 기회를 제공합니다.
16진수는 RGB, FF = 255 및 00 = 0과 다르지 않지만, 여러분은 그렇게 알고 있습니다.그래서 어떤 면에서, 여러분은 그것을 시각화해야 합니다.
저는 Hex, RGBA, RGB를 사용합니다.질량 변환이 필요하지 않은 경우 수동으로 변환하면 100가지 색과 코드를 기억하는 데 도움이 됩니다.
대량 변환을 위해 Alarie가 준 것과 같은 스크립트를 작성합니다.컬러와 함께 즐거운 시간 보내세요.

의사 접미사 뒤에 :를 사용하는 것은 어떻습니까?

#myDiv{
  position: relative;
  width: 128px;
  height: 128px;
  background-color: #ccc;
}

#myDiv:after{
  content: '';
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  pointer-events: none;
  
  /* here you go */
  margin: -8px;
  border: solid 8px #00f;
  opacity: 0.2;
}

<div id="myDiv">hello world!</div>

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

텍스트나 요소의 색을 대상으로 지정하는 경우 이 작업이 훨씬 쉬워집니다.

언급URL : https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba