길버트 색 혼합 모드의 역방향 공사

나는 이번 주Talk.CSS에 관한 강연을 줄곧 준비하고 있다.또한 우연히 싱가포르 CSS라는 귀여운 커뮤니티, 심지어 우리 페이스북 그룹에서 플래카드가 2018년 1월까지 거슬러 올라갈 수 있지만 재미있는 글씨체를 사용했다는 것을 알게 될 것이다.

이 글씨체는 무지개 깃발을 디자인한 사람Gilbert Baker을 기념하기 위한 것이다.

컬러 버전과 일반 버전을 color font 에서 다운로드할 수 있는 Type With Pride website 입니다.

믿을 수 없는 아름다움을 제외하고는 획이 교차하는 곳의 혼합 효과를 놓쳐서는 안 된다.어이, 내 강연 주제 기억나?이 CSS 속성mix-blend-mode은 색상이 어떻게 혼합되는지에 관한 것입니다.지금 그것은 나의 슬라이드 글꼴이 되었다.

블렌드 모드 확인

mix-blend-mode에서 강연을 준비하는 부작용 중 하나는 멈추지 말고 당신이 보는 교차점에서 어떤 혼합 모드를 사용했는지 알고 싶다는 것이다.슬라이드를 준비하는 과정에서 나는 내가 선택한 글꼴이 무엇인지 점점 더 알고 싶었다.그러니까 누가 이 질문을 하면 어떡하지?
나는 색깔을 보는 데 있어서 좋은 훈련을 받은 적이 없다.나는 육안만으로 어떻게 색깔을 혼합하는지 모른다.나는 내가 혼합 모델을 배우고 있는 이상 왜 나의 운을 시험해 보지 않고 똑똑히 알 수 있겠는가?
현재 역방향 공정은 CSS Colors 및 Blending에 대한 이해가 필요합니다. 이 과정을 총괄하겠습니다.

16개의 혼합 모드 중 12개는 sRGB 색 공간에서 계산된 분리 가능한 혼합 모드이다.분리 가능은 합성 색상을 각각 계산하는 R, G 및 B 채널입니다.나머지 4개는 분리할 수 없으며 HSL 표현에서 계산됩니다.

0xFF 또는 255는 1, 0x80 또는 128은 0.5를 나타내는 각 색상의 분수를 계산합니다.

CSS에서 지정한 혼합 모드의 전체 목록을 보려면 the specs 을 볼 수 있습니다.
분리 가능한 혼합 모드에서 일치하는 항목을 찾을 수 있을 뿐만 아니라 CSS가 지정한 혼합 모드가 없을 수도 있습니다.글꼴 디자이너는 획의 교차점에 대해 모든 색을 선택할 수 있습니다.누가 알겠는가🤷🏻‍♀️
그럼에도 불구하고 나는 인쇄사가 가장 좋아하는 한마디를 흰색 배경에 쏟아 붓고 이렇게 하기 시작했다.

이거 색깔이에요.

--orange: rgb(255, 107, 0); /* #ff6b00 */
--red: rgb(255, 67, 56); /* #ff4338 */
--green: rgb(5, 206, 124); /* #05ce7c */
--blue: rgb(0, 179, 227); /* #00b3e3 */
--magenta: rgb(218, 58, 179); /* #da3ab3 */
--yellow: rgb(255, 200, 67); /* #ffc843 */

기본적으로 나는 모든 혼합 함수를 시험해 보고 어느 것이 일치하는지 보기로 결정했다.나는 우선 어떤 간단한 해소 방법이 있는지 검사하고 싶다.
예를 들어, Normal은 혼합되지 않음을 나타냅니다.
어둡거나 밝아지면 각각 어둡거나 밝은 채널 값을 선택합니다.따라서 결과는 색을 구성하는 모든 채널과 일치하는 숫자가 있어야 하지만 0 외에는 다른 숫자가 없다.
첫 번째로 비평범한 혼합 계산을 가진 것은 곱셈인데, 본질적으로 색깔을 통로로 곱하는 것이다.초등학교 수학은 우리에게 어떤 숫자의 0번이라도 0과 같다고 알려주었다.그래서 저는 두 가지 제로 컬러의 조합을 시도했습니다.
색상 선택기에서 읽기:

녹색 x 주황색: mix-blend-mode 또는 #055600

파란색 x 빨간색: rgb(5, 86, 0) 또는 #002f32

파란색 x 자홍색: rgb(0, 47, 50) 또는 #00299f

그리고 나는 수학 연산을 해서 가장 가까운 정수로 반올림했다.

녹색x주황색

R: (5/255)*(255/255)=5/255
G: (206/255)*(107/255)=86/255
B: (227/255)*(0/255)=0/255
나 얻었어...rgb(0, 41, 159), 이게 바로 사거리야!나는 몇 개의 조합을 시도했는데, 그것들이 모두 일치한다.😱　내가 운이 안 좋은 거 아니야?
지금 중국의 말에 따르면胆大心细 이것은 네가 대담하지만 신중해야 한다는 것을 의미한다. 이것은 수학자의 미덕이다.나는 그것이 확실히 곱셈인지 다른 어떤 것도 아니라는 것을 확인해야 한다.
육안으로 제거할 수도 있고 간단한 수학으로 쉽게 검증할 수도 있다.관심이 있으시다면 CodePen에도 이 팔레트가 있습니다.
0을 사용하여 모든 색상을 차단하면 색상이 반환되므로 화면이 아닙니다.
그것은 컬러 도치가 아니다. 왜냐하면 B?(x, 1)이 생성되지 않습니다.
색깔 화상이 아니에요. B 때문에요?(1,x) 없음 1.
...결국 나는 사거리가 많지 않다는 것을 깨달았다.실제로 그것들은 모두 배로 증가했다.QED.비록 이것은 장래에 어떤 참고가 있을 것이라고 보장할 수는 없지만...디자이너가 생각을 바꿀 수도 있어요.🤷🏻‍♀️
배가되고 어두워지다
짙은 색은 논리적으로 쉽게 제거되지만, 나는 이런 상황에서 곱셈과 짙은 색이 매우 비슷해 보인다는 것을 알아차렸다.이 코드 펜의 나란히 비교는 화면 캡처를 다시 붙여넣을 수 있는 아이디어를 줄 수 있습니다.

단색에 대해서는 어두워지고 배가되기 때문에 각 색 채널에서 비교적 약한 값을 생성하기 때문에 매우 비슷한 합성 색을 생성할 수 있다.사진이나 더 복잡한 윤곽과 무늬를 가진 도형에 사용할 때 그것들 사이의 차이는 매우 크다.곱셈은 선형 작업이므로 두 도면의 텍스쳐를 유지합니다.그러나darken은 모든 채널에서 비교적 작은 값을 선택하기 때문에 어느 쪽의 무늬도 보존할 수 없습니다.

길을 돌아서 가다
이 과정에서 우회가 하나 있다.내가 처음에 놀았던 것은 Chrome인데, 숫자가 나의 계산 결과와 일치하지 않는다.그것들은 매우 가깝지만, 결과값은 항상 몇 개의 정수와 차이가 난다.놀 때 rgb(5, 86, 0) 그들은 항상 두 자릿수 차이를 낸다😲
나는 거의 내가 믹스 모드를 전혀 모른다고 생각했다.그 결과 크롬 중 하나bug가 이와 관련이 있을 수 있다는 것이 밝혀졌다.영원히 자신을 너무 확신하지 마라, 잘못을 너무 확신하지 마라, 바로 너의 곁에 있다😬. 다른 한편, Firefox는 소수의 예외 상황을 제외하고 단위 숫자를 반올림하면 가장 많이 틀리는 결과를 기쁘게 말했다.보아하니 Firefox가 정정하고 있는 것 같다. 나는 전통적인 수학 정정을 하고 있다.

블록 따옴표 테두리 블렌드

나는 슬라이드의 주제와 글꼴 디자인이 일치하도록 해야 한다고 생각한다.기왕 내가 이미 그들의 색깔의 비밀을 알았으니 왜 이런 지식을 자유인에게 쓰지 않겠는가.
블록 따옴표 요소에 혼합 테두리를 만들고 싶습니다. 여기에서 색을 사용하여 테두리를 덮어쓰고 서로 교차하게 하고 일치하는 혼합 모드를 사용합니다.
여러 배경 이미지를 사용하고 사용하기로 결정했습니다mix-blend-mode: screen.
처음에 나는 일련의 배경 선형 사다리 이미지를 중첩하는 노선을 따라 중첩하고 싶었다.

blockquote {
  background-image: linear-gradient(
      to bottom,
      var(--magenta) 0,
      var(--magenta) 100%
    ), linear-gradient(to bottom, var(--blue) 0, var(--blue) 100%),
    linear-gradient(to bottom, var(--yellow) 0, var(--yellow) 100%),
    linear-gradient(to bottom, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to bottom, var(--green) 0, var(--green) 100%),
    linear-gradient(to bottom, var(--red) 0, var(--red) 100%);
  background-size: 8px calc(100% / 4.5); /* to create the overlap */
  background-repeat: no-repeat;
  background-position-y: 0, calc(100% / 5), calc(200% / 5), calc(300% / 5), calc(
      400% / 5
    ), calc(500% / 5);
  background-blend-mode: multiply;
}

그들은 일했다.그러나 결과는 그것들이 상당히 무미건조해 보인다는 것을 증명했다.

이것은 개인을 겨냥한 것이지만, 나는 점차적인 방향에 조정을 추가해서 매우 기쁘다.최종 결과는 다음과 같습니다.

이 코드 펜에서 실행을 볼 수 있습니다.색상 섹션은 browsers that support color font 에만 적용됩니다.

다음까지🤞

만약 당신이 이번 달에 공교롭게도 싱가포르에 있고 디자이너나 전단 개발자가 서로에게 흥미를 느낀다면, 아마도 Talk.CSS #38 혼합 혼합 모델이라고 불리는 CSS 속성에 대해 내 이야기를 들어볼 수 있을 것이다.아니면, 만약 당신이 이 작은 작품의 계발을 받고 재미있는 것을 창조했다면, show and tell 우리👀
CodePen이 원상태로 돌아오기를 기도합니다.

공구서류

CSS Compositing and Blending Module Level 1

CSS Font Module Level 4

Talk.CSS

Type With Pride

Color Font