4 개의 새로운 CSS 색상 기능 미리보기

이 기사는 놀라운 양의 콘텐츠로 CSS 색상 필드의 최신 변경 사항과 향후 변경 사항을 탐구합니다. 색상을 정의하는 새롭고 다가오는 방법은 기존의 방법보다 훨씬 큰 방법입니다. 간단히 살펴 보겠습니다.

우선, 이러한 내용이 매우 복잡하다는 것을 강조하는 것이 중요합니다. 나는 개인적으로 완전히 이해하기가 어렵다는 것을 알게됩니다. 그러나 다음은 몇 가지 핵심 요점이 있습니다.

• 다가오는 모든 변화가있을 때까지, 우리는 컬러 모델로 RGB 만 가지고 있으며 모든 것이 그에 기초합니다.
• RGB (RGB) 함수는 선형 좌표가있는 큐브에 RGB 색상 모델을 맵핑하고 HSL () 함수는 RGB 색상 모델을 실린더에 맵핑 할 수있는 다른 "컬러 공간"을 가지고 있지만 모두 SRGB 색상에 속합니다.
• 다가오는 변경으로 새로운 색상 모델을 얻을 수 있으며 (!) 다른 방식으로 해당 색상 모델을 매핑하는 새로운 기능을 얻을 수 있습니다. 그래서 나는 그것이 두 배나 트리플 타격이라고 생각합니다.

나는 모든 세부 사항을 당신에게 자세히 설명 할 수 없습니다 - 나는 나와 같은 많은 사람들이 왜 우리가 이것에 관심을 가져야하는지 알고 싶어하기 때문에 이것을 쓰고 있습니다. 그리고 그것이 내가 왜 이것에 관심을 가져야하는지 이해하려고 노력하는 것입니다.

Display-P3는 이전에 표현할 수 없었던 더 밝은 색상을 켭니다.

 몸 {
  배경 : 색상 (display-p3 1 0.08 0); */
}

최신 모니터는 더 많은 색상, 특히 여분의 밝은 색상을 표시 할 수 있지만 HEX, RGB 및 HSL과 같은 클래식 CSS 색상 구문을 사용하여 이러한 색상을 정의하는 방법은 없습니다. 아주 이상합니까? ! 그러나 Display-P3을 사용하는 경우 이러한 밝은 색상에 더 널리 액세스 할 수 있습니다.

Development Company Panic은 초기 에이 색상을 발견하고 이러한 색상을 "비밀 무기"로 사용하기 시작했습니다.

WebGL 외에도 P3 색상은 이제 Panic 웹 사이트의 비밀 무기 스택의 중요한 부분입니다. Shh, 아무에게도 말하지 마십시오. IMAC Pro 화면 에서이 페이지를 봐야합니다! https://www.php.cn/link/f08c64512c2c2ce6b9642b58563e9c029b

- 공황 (@panic) 2019 년 5 월 24 일

Jen Simmons는 지원되지 않는 브라우저의 폴백 옵션을 포함하여 사용 방법을 설명합니다.

P3 색상을 표시합니다. 브라우저에서 설계되었습니다. 기이.

P3으로 전환하고 색상을 찾은 다음 이전 브라우저에 대한 폴백 색상을 찾는 방법을 보여 드리겠습니다. 모든 작업은 Safari Web Inspector에서 수행됩니다. (소리를 열고 내 설명을 들어보세요!) pic.twitter.com/aakhrn2s3e

- Jen Simmons (@jensimmons) 2022 년 1 월 5 일

의지

• Display-P3 (WebKit 블로그)을 사용한 CSS 와이드 색상 색상
• 인터넷에서 끊임없이 확장되는 색 영역 (Ollie Williams)

HWB는 더 "인간"이지만 약간 논쟁의 여지가 있으며 여전히 SRGB를 기반으로합니다.

Stefan Judis의 블로그 게시물 덕분에 HWB ()가 무엇인지 몰랐습니다.

나는 보통 HSL을 "인간화 된"CSS 색상 형식 (및 프로그램 제어에 적합한)으로 생각합니다. 360 ° 색조와 0-100% 포화 및 밝기를 작동하기 때문입니다.

그러나 hwb ()에는 색조가 있습니다 (HSL과 동일하다), 백인 과 흑암이 있습니다. 스테판 :

색상에 흰색과 검은 색을 추가하면 채도에 영향을 미칩니다. 색상에 같은 양의 흰색과 검은 색을 추가한다고 가정하면 색조는 동일하게 유지되지만 색상은 채도를 잃습니다. 이는 최대 50% 흰색 및 50% 블랙 (HWB (0DEG 50% 50%))에서 작동하여 색상이 아닌 색상을 초래합니다.

Stefan은 이것이 HSL보다 이해하기 쉬운 지 여부를 의심하며 동의하는 경향이 있습니다. 나는 그것에 더 익숙해 져야 할 수도 있지만, 단순히 밝기 나 채도를 바꾸는 것보다 더 추상적 인 것 같습니다.

HWB는 모든 오래된 색상 형식과 동일한 색 영역 (SRGB)으로 제한됩니다. 여기에는 새로운 색상이 잠금 해제되지 않습니다.

의지

• HWB 색상 선택기
• hwb () - 인간화 된 색상 표기법? (스테판 주디스)

실험실은 색 영역이 더 넓은 rgb ()과 같습니다.

 div {
  배경 : 실험실 (150% -400 400);
}

주변에 물었을 때, 나는 Eric Portis의 실험실에 대한 설명을 좋아합니다.

실험실은 RGB와 같으며 세 가지 선형 구성 요소가 있습니다. 숫자가 낮을수록 물건이 적을수록 숫자가 클수록 더 많을수록 숫자가 커집니다. 따라서 실험실을 사용하여 가장 밝고 녹색 녹색을 지정할 수 있습니다.이 녹색은 모두에게 매우 밝고 녹색이지만 넓은 색 영역으로 모니터에서는 더 밝고 녹색입니다.

따라서 우리는 모든 추가 색상을 얻습니다.이 색상은 훌륭하지만 SRGB (제한된 색상 표현 외에)에 또 다른 문제가 있습니다. 즉, 지각 적으로 통일되지 는 않습니다. Brian Kardell :

SRGB 공간은 지각 적으로 통일되지 않습니다. 동일한 수학적 움직임은 색상 공간의 다른 위치에서 다른 정도의 지각 효과를 갖습니다. 이에 대한 디자이너의 경험에 대해 읽으려면 여기에 열심히 노력하는 과정을 보여주는 흥미로운 예가 있습니다.

여기서 전형적인 예는 HSL에서 정확히 같은 "밝기"를 가진 색상이 실제로 완전히 다른 느낌입니다.

HSL 및 실험실 :: 밝기?

까다로운 색상 투표에서 같은 색이지만 이번에는 같은 색상의 실험실 버전을 보여주었습니다. 실험실의 밝기 값이 우리가 투표 한 결과에 얼마나 가까운 지에 주목하십시오!

모든 색상 공간이 동일하지는 않습니다! https://www.php.cn/link/ff15242553d31723dcd88a087382 pic.twitter.com/xkeguq3kzg

- Adam Argyle (@argyleink) 2019 년 12 월 3 일

그러나 실험실에서는 분명히 지각 적으로 통일되어 있으며, 이는 프로그래밍 방식으로 색상을 조작하는 것이 더 합리적인 작업임을 의미합니다. 또 다른 이점은 실험실 색상이 장치 독립적으로 지정된다는 것입니다. Michelle Barker :

실험실과 LCH는 사양에서 장치 독립적 인 색상 으로 정의됩니다. 실험실은 Photoshop과 같은 소프트웨어에서 액세스 할 수있는 색상 공간이며, 예를 들어 화면의 색상이 티셔츠에 인쇄 된 것과 동일하게 원하는 경우 권장됩니다.

의지

• 실험실 () (MDN)
• RGB, HSL, HWB, Lab 및 LCH (Michelle Barker) 용 현대식 CSS 색상 사용 안내서

LCH는 색 영역이 더 넓은 hsl ()과 같습니다

HSL이 RGB보다 이해하기 쉽기 때문에 "인간"이라고 말했을 때 기억하십니까? 색조, 채도 및 밝기를 바꾸는 것은 의미가 있습니다. LCH () 이와 유사하게 밝기 , 색도 및 색조가 있습니다. Eric Portis와의 대화로 돌아 가기 :

LCH는 HSL과 비슷합니다 : 극지 좌표 공간. h = hue = 원입니다. 따라서 보완적인 색상 (또는 당신이 이후의 변환)을 선택하기 위해 수학을하는 것은 사소한 것입니다 (180 또는 다른 가치 만 추가하십시오!)

나는 당신이 구문을 좋아하기 때문에 LCH를 선택하거나, 복잡한 프로그래밍 방식의 일부를 더 쉽게 수행하려고 노력하고 있기 때문에, 당신은 그것이 50% 이상을 무료로 표현한다는 것을 알고 있습니다.

우리는 또한 여기서 인식 된 통일성을 얻습니다. Lea Verou는 밝기가 실제로 의미가 있다는 것이 흥분됩니다.

HSL에서는 밝기가 의미가 없습니다. 색상의 밝기 값이 동일 할 수 있지만 인식 된 밝기는 매우 다릅니다. […] LCH의 경우, 같은 밝기를 가진 모든 색상은 동일하게 지각 적으로 밝고, 반음도가 동일한 색상은 동일하게 포화되어 있습니다.

새로운 모델의 또 다른 장점은 CSS 색상 구배에서 "회색 죽은 영역"을 제거 할 수 있다는 것입니다. 나는이 지각적인 통일성으로 인해 두 개의 풍부한 색상이 이상하지 않고 점차 부족한 지역에서 자신을 변화 시킨다고 생각하지 않습니다.

다음은 작은 개인 예측입니다. LCH ()가 디자이너가 좋아하는 사람이 될 수 있다고 말합니다. 곧 많은 새로운 색상 옵션이있을 것이며, 다른 색상을 선택하는 것은 항상 너무 어렵고 이상합니다. LCH는 가장 심리적으로 효과적인 것 같습니다.

의지

• LCH () (MDN)
• CSS의 LCH 색상 : 무엇, 왜, 어떻게? (Lea Verou)

"확신하는"

실험실과 친구들은 CSS에 익숙하지 않기 때문에 너무나 새로운 것처럼 보이지만 랩은 1940 년대에 발명되었습니다. Adam Argyle과의 대화에서 그는 기억에 남는 문구를 사용합니다. 모든 컬러 공간에는 Achilles Heel이 있습니다 . 즉, 그들은 사물에 약간 나쁩니다. SRGB의 경우 회색 데드 존 문제와 제한된 색 영역입니다. 실험실은 좋지만 확실히 고유 한 약점이 있습니다. 예를 들어, 실험실의 파란색에서 흰색 그라디언트는 보라색 영역을 거칠게 통과합니다.

2020 년 12 월, Björn Ottosson은“이봐, 새로운 색상 공간이 나타났습니다.”라고 말했고 이제는 Oklab이오고 있습니다. 분명히 CSS 의사 결정자들은이 색상 공간의 값이 Oklab () 및 Oklch ()가 정규화 될 정도로 충분히 높다고 생각합니다. 나는 그들이 보통 더 좋기 때문에 우리가 돌봐야한다고 생각하지만, 내가 말한 것을 인용하지 마십시오.

Display P3가 다른 함수를 사용하지 않고 색상 () 함수를 사용하는 이유는 무엇입니까?

나는 정말로 모른다. CSS Color () 함수가 비교적 새롭다고 생각합니다. 이것이 바로 Safari가 처음에 그것을 넣는 방식입니다. Display P3이 전용 기능을 얻을 수 있는지 또는 모두 CSS Color ()를 사용하여 시작 해야하는지 또는 무엇을 사용해야하는지 모르겠습니다.

 /* 디스플레이 P3*/사용 방법입니다.
색상 (display-p3 1 0.08 0);

/* 그러나 이것은 작동하지 않습니다*/
색상 (Oklch 42.1% 0.192 328.6);

/ * 이렇게해야하나요? ‍♀️ */
Oklch (42.1% 0.192 328.6);

/ * 그러나 그라디언트에서 색상 공간을 사용할 수 있습니다 ... */
백그라운드 이미지 : 선형 그레이드 (
    오른쪽으로
    Oklch에서
    LCH (50% 100 100),
    LCH (50% 100 250)
  );

상대 색상 구문은 매우 유용합니다.

CSS 색상을 기본적으로 해체하면서 다른 형식으로 이동할 수있는 "상대 색상 구문"이라는 매우 멋진 기능이 있습니다. 가장 유명한 CSS 육각형 인 Fog Dog를 가지고 있다고 가정하고 HSL로 변환하고 싶다고 가정합니다.

 몸 {
  배경 : HSL ( #f06d06 HSL에서);
}

어쩌면 이것은 즉시 작동하지 않지만 이제 알파를 추가 할 수 있습니다! 실제로 알파를 기존 16 진수에 적용하는 다른 방법은 없으므로 매우 중요합니다.

 몸 {
  배경 : HSL ( #f06d06 HSL / 0.5);
}

그러나 나도 수정할 수 있습니다. 불투명도를 추가하기 전에 안개 개를 조금 포화시키고 싶다고 가정 해 봅시다. 낮은 불투명도가 자연스럽게 어두워 지므로 그것을 상쇄하고 싶습니다. 나는 거기에 암시적인 변수에서 calc ()를 사용할 수 있습니다.

 몸 {
  배경 : HSL ( #f06d06 h calc (s 20%) l / 0.5);
}

이것은 너무 멋지다. 나는 우리가 그것으로부터 놀라운 것을 볼 것이라고 확신합니다. 확실히 HSL에만 국한되지 않습니다. 지금은 편안하기 때문에 HSL을 사용합니다. 원한다면 이름이 지정된 색상 빨간색으로 시작하여 LCH에서 수정할 수 있습니다.

 몸 {
  배경 : LCH (red l calc (c 15) H / 0.25);
}

이들은 사용자 정의 속성과 자유롭게 결합 할 때 유용합니다.

Alpha에 대한 특별한 기능은 더 이상 없습니다.

CSS 색상 기능에는 알파 값에 쉼표가 없지만 전진 슬래시가 없음이 분명해야합니다.

 /* 오래된! */
RGB (255, 0, 0);
RGBA (255, 0, 0, 0.5);

/* 새로운! */
RGB (255 0 0);
RGB (255 0 / 0.5);
HSL (0DEG 40% 40%)
HSL (0DEG 40% 40% / 90%) /*는 0.9 또는 기타 값 대신 백분율이 될 수 있습니다* /

/* 새 색상 컨텐츠에는 단일 기본 기능 만 있으며 알파 마이너 함수 없음*/
실험실 (49% 39 80)
실험실 (49% 39 80 / 0.25)

/* 기본적으로 전방 슬래시와 같은 방식으로 색상 함수를 사용하여 p3 표시 p3를 표시합니다*/
색상 (디스플레이 -P3 1 0.08 0 / 0.25);

자신의 CSS 색상 공간을 정의 할 수도 있습니다.

그러나 나는 이것에 대해 정말로 생각할 수 없습니다. 이게 충격을 받았어, 미안 해요.

위 내용은 4 개의 새로운 CSS 색상 기능 미리보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!