이 페이지는 Cloud Translation API를 통해 번역되었습니다.

고화질 CSS 색상 가이드

CSS 색상 4는 폭넓은 색 영역 도구와 기능을 웹에 제공합니다. 색상, 조작 함수, 더 나은 그라데이션 등이 있습니다.

Adam Argyle

25년 이상, sRGB (표준 빨간색 녹색 파란색)이 유일한 색상이었습니다. 색상 공간이 포함된 CSS 그라데이션 및 색상의 gamut rgb(), hsl(), 16진수 등의 서비스를 제공합니다 가장 일반적인 색상입니다. 색 영역 기능 공통분모입니다. 우리는 성장하고 있습니다. 내부에서 색상을 지정하는 데 익숙합니다.

발생 횟수별로 가장 많이 사용되는 색상 형식입니다. — </ph> <ph type="x-smartling-placeholder"></ph> https://almanac.httparchive.org/en/2022/css#colors

디스플레이에서 다양한 색상을 표시할 수 있게 됨에 따라 CSS에는 더 넓은 범위 내에서 색상을 지정하는 방법입니다. 현재 색상 형식 에는 다양한 색상 범위를 위한 언어가 없습니다.

CSS를 업데이트하지 않으면 90년대 색상 범위에 영원히 머물러야 합니다. 이미지와 동영상에서 찾을 수 있는 넓은 색 영역 제품과 일치하지 않습니다. Trapped, 표시 항목만 표시됨 사람의 눈으로 볼 수 있는 색상의 30%를 사용합니다. 이스케이프 처리를 도와준 CSS 색상 수준 4에 감사를 표합니다. 주로 레아 버로우와 크리스 릴리가 작성했습니다.

Chrome은 CSS 색상 4 색 영역을 지원하며 살펴보겠습니다. CSS에서 HD (고화질) 지원 가능 색공간을 제공하여 HD 색 공간의 색상을 지정하며 전문 분야를 평가합니다.

</ph>

</ph> 일련의 이미지가 넓고 좁은 색상 사이를 전환하는 모습을 보여줍니다. 색 영역을 보여 줍니다.
직접 해보기

이 가이드는 세 부분으로 구성되어 있습니다. 색깔이 어디에 있었는지 기억하기 위해 계속 읽어보세요. 그런 다음 color가 향하는 곳을 읽고 HD 컬러로 이전하여 향후 색상을 관리하는 방법

개요

지원되는 브라우저에서는 선택할 수 있는 색상이 50% 더 많습니다. 만 16세라고 생각한다면 무려 100만 개의 색깔이 엄청 많이 들었어요. 표시할 수 있습니다. 또한 인코더-디코더에 있는 충분하지 않아 밴드되었습니다. 비트 심도도 해결되었습니다.

더 많은 색상 외에도 디스플레이에서 사용할 수 있는 가장 선명한 색상일 수 있습니다. 새로운 색상 공간은 고유의 도구와 방법을 제공하여 색 시스템입니다. 예를 들어 이전에는 HSL과 그 'lightness'(가벼움)가 있었습니다. 채널, 당시 최고의 웹 개발자들이었죠. 이제 CSS에는 LCH의 '인지적 밝기'가 있습니다.

색상 표 두 개가 나란히 놓여 있습니다. 첫 번째 테이블에는 HSL이 표시됩니다.
10가지 정도의 무지개색이 있고 그 옆에는 무지개색이 있습니다.
밝기를 조정할 수 있습니다. 두 번째 표는 LCH 무지개를 보여줍니다.
훨씬 덜 선명하지만 그 옆의 회색조 색상은 일관됩니다.
이는 LCH가 건강한 상수 밝기 값을 가지는 반면 HSL에는 없는 것을 보여줍니다. — </ph> 직접 보기 Codepen

또한 그라데이션과 믹싱으로 색상 공간 지원, 색조를 업그레이드합니다. 보간 옵션을 사용할 수 있고 밴딩을 줄일 수 있습니다.

다음 이미지는 일부 혼합 업그레이드를 보여줍니다.

</ph> 상위 두 가지 색상 조합은 sRGB 및 sRGB 색상입니다. 하단의 두 색상 조합은 디스플레이 p3에 있습니다. 디스플레이 P3에는 더 많은 기능이 있습니다 선명한 색상과 조합을 사용하면 가운데에 흑백이 되고, sRGB는 약간 채도가 낮고 그 중간의 믹스는 흑백 검색결과가 아닙니다.
<ph type="x-smartling-placeholder"></ph> https://codepen.io/web-dot-dev/pen/poZgXQb

색상과 웹의 문제는 CSS가 고해상도의 준비가 되어 있지 않다는 것입니다. 대부분의 사람들이 주머니나 무릎에 보관하거나 벽에 장착하기 때문에 넓어진 색 영역과 고화질 색상을 사용할 수 있습니다. 디스플레이의 색상 기능은 CSS보다 빠르게 성장한, 이제 CSS를 따라잡을 수 있습니다.

현재 '다양한 색상' 외에도 다양한 기능을 사용할 수 있습니다. 이러한 문서를 마치고 나면, 색상을 더 지정하고, 그라데이션을 보정하고, 최적의 이미지를 각 작업의 색공간 및 색공간입니다.

색 공간이란 무엇인가요?

색 영역은 어떤 것의 크기를 나타냅니다. '수백만 가지 색상'이라는 문구 은 디스플레이의 영역이나 선택해야 하는 색상 범위에 대한 설명 있습니다. 다음 이미지에서는 3색 영역이 비교되며 크기가 클수록 더 많은 색상을 제공합니다.

색 영역은 삼각형 모양으로 나란히 비교됩니다.
sRGB가 가장 작고 Rec2020이 가장 큽니다.

색 영역은 이름을 가질 수도 있습니다. 농구 대 야구 또는 벤테 커피잔과 그란데의 차이 사이즈 이름을 지정하면 있습니다. 이러한 색 영역 이름을 학습하면 의사소통을 하고 다양한 색상을 이해할 수 있습니다.

이 도움말에서는 이전 색 영역을 검토합니다. 자세한 내용은 더 많은 색상과 새로운 공간에 액세스할 수 있습니다.

인간의 시각적 영역

색 영역은 종종 인간의 시각적 영역과 비교됩니다. 전체 우리가 인간의 눈으로 볼 수 있다고 믿는 색깔입니다. HVS는 보통 색도 다이어그램의 예입니다.

가운데에 속이 비어 있는 삼각형이 생생한 그라데이션으로 채워져 있는 말화 모양입니다. — </ph> 출처: Wikipedia

가장 바깥쪽 모양은 인간으로 볼 수 있는 모양이고 안쪽의 삼각형은 rgb() 함수 범위, 즉 sRGB 색공간이라고도 합니다.

위에서 본 삼각형에서 볼 수 있듯이 색 영역 크기를 비교하면 참조하세요. 이것은 색 영역과 색 재현율에 대해 전달하는 업계의 비교해 보겠습니다.

색상 공간이란 무엇인가요?

색상 공간은 색 영역을 배열하는 것으로, 도형을 구성하고 있습니다. 정육면체나 원통과 같은 단순한 3D 모양인 경우가 많습니다. 이 색상 배치는 어떤 색이 나란히 놓이는 지를 결정하고 보간된 색상이 작동합니다.

RGB는 특정 값을 지정하여 색상에 액세스하는 직사각형 색 공간과 좌표가 생성됩니다. HSL은 원통형 색공간입니다. 색조 각도와 두 축의 좌표로 색상에 액세스

반으로 잘라낸 RGB 정육면체와 HSL 원통형 슬라이스가 나란히 표시되어 색상이 각 공간에서 어떻게 모양으로 채워지는지 보여줍니다. — </ph> https://en.wikipedia.org/wiki/HSL_and_HSV

레벨 4 사양은 새로운 색상 공간에서 색상을 찾을 수 있습니다. 이 4가지 색상 외에 이전에 사용 가능했던 스페이스:

16진수
RGB
HSL
HWB

색 공간 및 색 공간 요약

색 공간은 색 영역이 색의 범위인 색의 매핑입니다. 색 영역을 입자의 총합으로, 색 공간을 병으로 간주 빛을 흡수할 수 있습니다.

다음은 알렉세이 아르도프의 양방향 시각 자료로서 살펴보겠습니다. 이 데모에서는 가리키고 드래그하고 확대/축소해 보세요. 색상 공간 변경 다른 공간의 시각화를 볼 수 있습니다.

색 영역을 사용하여 낮은 범위 또는 좁은 범위와 같은 다양한 색상에 대해 이야기합니다. 색 영역과 높은 범위 또는 넓어진 색 영역을 비교할 수 있습니다.
색상 공간을 사용하여 색상의 배열, 색상을 지정하는 데 사용되는 구문에 대해 이야기합니다. 색상을 조작하고 색상을 통해 보간합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

여러 색상의 점으로 채워진 큐브입니다. — </ph> 위는 RGB 큐브 색공간에 맞는 입자의 sRGB 색 영역을 보여줍니다. 이미지 출처

기본 색상 공간 {#classic-color-spaces} 검토

CSS 색상 4는 다양한 CSS 및 색상과 관련된 기능과 도구가 나와 있습니다. 먼저, 신경망이 원래 어디에 위치해 있었는지를 소개하겠습니다

2000년대부터 모든 CSS 속성에 다음을 사용할 수 있었습니다. 색상을 값으로 허용하는 - 16진수 (16진수), rgb(), rgba(), by 키워드(예: hotpink) 또는 currentColor

2010년경에는 브라우저에 따라 CSS가 hsl() 색상 그리고 2017년에 알파가 있는 16진수가 표시되었습니다. 마지막만 최근에 hwb()님이 브라우저에서 지원되지 않습니다.

이 모든 클래식한 색공간은 동일한 색 영역, sRGB 내의 색을 참조합니다.

HEX

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

인간의 언어와 방향을 향하게 하는 최초의 색상 공간 중 하나는 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%);
}

HWB

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

인간이 색을 설명하는 방식에 초점을 맞춘 또 다른 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 도움말을 자세히 읽어보세요.

또한 웹에서 더 많은 자료를 찾아볼 수 있습니다.

도구: