CSS 색상 4는 더 많은 색상, 조작 기능, 개선된 그라데이션 등 광범위한 색상 도구와 기능을 웹에 제공합니다.
25년 넘게 sRGB(표준 빨간색 녹색 파란색)는 rgb(), hsl(), 16진수와 같은 색상 공간을 제공하는 CSS 경사 및 색상의 유일한 색상 영역이었습니다. 디스플레이에서 가장 일반적인 색 영역 기능으로, 공통 분모입니다. 이미지 안에 색상을 지정하는 데 익숙해졌습니다.
디스플레이가 더 다양한 색상을 표시할 수 있게 됨에 따라 CSS는 이러한 더 넓은 범위 내에서 색상을 지정하는 방법이 필요합니다. 현재 색상 형식에는 넓은 색상 범위를 위한 언어가 없습니다.
CSS가 업데이트되지 않으면 90년대 색상 범위에서 영원히 멈춰 이미지 및 동영상에서 볼 수 있는 넓은 색 영역과 일치하지 않을 수 밖에 없습니다. 트랩됨: 사람의 눈으로 볼 수 있는 색상의 30%만 표시됩니다. 탈출에 도움을 준 CSS Color Level 4에게 감사를 전합니다. 주로 레아 베루와 크리스 릴리가 작성했습니다.
Chrome은 CSS 색상 4 영역 및 색상 공간을 지원합니다. CSS에서 이제 HD (고화질) 디스플레이를 지원하여 HD 영역의 색상을 지정하는 동시에 전문화된 색상 공간도 제공할 수 있습니다.
직접 사용해 보기
이 가이드는 세 부분으로 구성되어 있습니다. 색상을 기억해 보려면 계속 읽어 보세요. 그런 다음 색상이 나아가는 방향과 HD 색상으로 이전하여 향후 색상을 관리하는 방법을 읽어보세요.
개요
지원되는 브라우저에서는 50% 더 많은 색상을 선택할 수 있습니다. 1, 600만 가지의 색상이 지나치게 많이 들린다고 생각한다면 새로운 공간에서 얼마나 많은 색상을 보여줄 수 있는지 확인할 때까지 기다리세요. 또한 비트 심도가 충분하지 않아 리졸브되었기 때문에 밴딩된 모든 경사도 생각해 보세요.
더 많은 색상, 즉 디스플레이가 지원하는 가장 선명한 색상 외에도 새로운 색상 공간은 색상 시스템을 관리하고 만드는 고유한 도구와 메서드를 제공합니다. 예를 들어 지금까지는 HSL과 HSL의 'lightness' 채널이 있었는데, 이 채널은 최고의 웹 개발자였습니다. 이제 CSS에는 LCH의 '인지 밝기'가 있습니다.
또한 그라데이션과 혼합은 색상 공간 지원, 색조 보간 옵션, 적은 밴딩과 같은 일부 업그레이드를 제공합니다.
다음 이미지는 몇 가지 혼합 업그레이드를 보여줍니다.
https://codepen.io/web-dot-dev/pen/poZgXQb
색상과 웹의 문제는 CSS가 고화질 준비가 되지 않는 반면, 대부분의 사용자가 주머니에 있거나 더 꺼내거나 벽에 붙어 있는 디스플레이는 넓은 색 영역, 고화질 컬러를 사용할 수 있다는 점입니다. 디스플레이의 색상 기능이 CSS보다 빠르게 성장했으며 이제 CSS가 이에 대응합니다.
'더 많은 색상' 외에도 이 문서를 마치면 더 많은 색상을 지정하고, 그라데이션을 강화하고, 각 작업에 가장 적합한 색상 공간과 색 영역을 선택할 수 있습니다.
색 공간이란 무엇인가요?
gamut은 무언가의 크기를 나타냅니다. '수백만 가지 색상'이라는 문구는 디스플레이 영역 또는 선택해야 하는 색상 범위에 관한 주석입니다. 다음 이미지에서는 3가지 색 영역이 비교되며, 크기가 클수록 더 많은 색상이 제공됩니다.
색 영역에도 이름이 있을 수 있습니다. 농구 대 야구, 벤트 커피 컵, 그란데 비교처럼 크기의 이름은 사람들이 소통하는 데 도움이 될 수 있습니다. 이러한 색 영역 이름을 학습하면 다양한 색을 소통하고 빠르게 이해하는 데 도움이 됩니다.
이 도움말에서는 이전 색 영역을 검토합니다. 7가지 새로운 영역에 관한 내용은 더 많은 색상과 새로운 공간에 액세스를 참고하세요.
인간의 가시 영역
색 영역은 종종 사람의 눈으로 볼 수 있다고 믿는 전체 색 영역인 인간의 시각적 영역과 비교됩니다. HVS는 보통 다음과 같은 색도 다이어그램으로 표현됩니다.
가장 바깥쪽 모양은 인간으로 볼 수 있는 모양이고 안쪽 삼각형은 rgb() 함수 범위(sRGB 색공간이라고도 함)입니다.
위에서 삼각형을 살펴봤듯이 색 영역 크기를 비교하면 아래에서 삼각형을 찾을 수 있습니다. 이는 업계에서 색 영역에 관해 소통하고 비교하는 방법입니다.
색 공간이란 무엇인가요?
색 공간은 색 영역의 배열로, 도형과 색상 액세스 방법을 설정합니다. 대부분은 큐브나 원통 같은 단순한 3D 도형입니다. 이 색상 배열은 어떤 색상이 서로 인접해 있는지, 색상에 액세스하고 보간하는 방식이 어떻게 작동하는지를 결정합니다.
RGB는 3축의 좌표를 지정하여 색상에 액세스하는 직사각형 색상 공간과도 같습니다. HSL은 원통형 색상 공간으로, 색상에 색조 각도와 두 축의 좌표로 액세스됩니다.
수준 4 사양에서는 색상 검색을 위한 12가지 새로운 색상 공간을 도입합니다. 이 색상은 이전에 사용 가능했던 4가지 색상 공간 외에 추가로 제공되는 것입니다.
색 영역 및 색 공간 요약
색 공간은 색 영역이 색상 범위인 색상의 매핑입니다. 색 영역은 총 입자의 총합으로, 색 공간은 이 범위의 입자를 담기 위해 만들어진 병이라고 간주하세요.
다음은 알렉세이 아르도프의 대화형 시각 자료로서 색공간을 보여줍니다. 이 데모에서 가리키고 드래그하고 확대/축소해 보세요. 다른 공간을 시각적으로 표시하려면 색상 공간을 변경합니다.
- 색 영역을 사용하여 낮은 범위 또는 좁은 색 영역 대 높은 범위 또는 넓어진 색 영역과 같은 색 범위에 관해 이야기합니다.
- 색상 공간을 사용하여 색상 정렬, 색상 지정에 사용되는 문법, 색상을 조작하고 색상을 통해 보간하는 방법을 설명합니다.
클래식한 색상 공간{#classic-color-spaces}에 대한 리뷰
CSS 색상 4에서는 CSS 및 색상을 위한 여러 가지 새로운 기능과 도구를 간략하게 설명합니다. 먼저 새로운 기능 이전의 색상에 관한 요약입니다
2000년대부터 색상을 값으로 허용하는 모든 CSS 속성에 16진수 (16진수), rgb(), rgba(), hotpink와 같은 이름 또는 currentColor와 같은 키워드와 함께 사용할 수 있었습니다.
2010년경, 브라우저에 따라 CSS는 hsl() 색상을 사용할 수 있었습니다. 그런 다음 2017년에는
알파가 있는 16진수가 등장했습니다. 마지막으로, 최근에 hwb()가 브라우저에서 지원되기 시작했습니다.
이러한 고전적인 색상 공간은 모두 동일한 gamut, sRGB 내의 색상을 참조합니다.
HEX
16진수 색상 공간은 R, G, B, A를 16진수 숫자로 지정합니다. 다음 코드 예는 이 구문으로 빨간색, 녹색, 파란색과 불투명도를 지정할 수 있는 모든 방법을 보여줍니다.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB 색상 공간은 빨간색, 녹색 및 파란색 채널에 직접 액세스할 수 있습니다. 0~255 사이의 값 또는 0~100의 백분율로 지정할 수 있습니다. 이 구문은 사양에 일부 구문 정규화가 적용되기 전에 존재했으므로, 실제로 쉼표 및 쉼표 구문이 표시되지 않습니다. 앞으로 쉼표는 더 이상 필요하지 않습니다.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
인간의 언어와 소통을 지향하는 최초의 색상 공간 중 하나인 HSL (색채 채도 및 밝기)은 sRGB 영역의 모든 색상을 제공하는 동시에 뇌가 빨간색, 녹색, 파란색이 어떻게 상호작용하는지 알 필요가 없습니다. RGB와 마찬가지로 원래 구문에 쉼표도 있었지만 앞으로 이동하면 쉼표가 더 이상 필요하지 않습니다.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
하드웨어 하드웨어 공급업체
인간이 색상을 설명하는 방식에 중점을 둔 또 다른 sRGB 색 공간은 HWB(색조, 흰색, 흑백)입니다. 작성자는 색조를 선택하고 흰색 또는 검은색으로 혼합하여 원하는 색상을 찾을 수 있습니다.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
다음 단계
새로운 색 공간, 구문, 도구에 관해 알아본 다음 HD 색상으로 이전하는 방법을 알아보세요.
웹의 sRGB 이외의 색상 공간은 초기 단계에 있지만 시간이 지남에 따라 디자이너와 개발자의 사용량이 증가할 것으로 예상됩니다. 예를 들어 디자인 시스템을 구축할 때 기초가 되는 색상 공간을 아는 것은 제작자 도구 벨트의 역할을 할 수 있는 강력한 도구입니다. 각 색 공간은 고유한 기능과 CSS 사양에 추가된 이유를 제공합니다. 작은 크기로 시작하여 필요에 따라 추가해도 됩니다.
자료
색상 수준 5 도움말을 더 읽어 보세요.
또한 웹에서 다음과 같은 추가 읽기 자료를 찾을 수 있습니다.
- W3C의 CSS 색상 모듈 레벨 4
W3C의 CSS 색상 모듈 레벨 5
추가 도구: