CSS에서는 rgb()또는 16진수로 색상을 인코딩했습니다(대부분 역사적 이유로). 그러나 새로운 CSS Color 4 사양은 CSS에서 색상을 선언하는 더 나은 방법을 추가합니다. 그 중 oklch()가장 흥미로운 것이 이 기사에서 그 이유를 설명합니다. 매우 짧은 버전 oklch()CSS 색상을 정의하는 새로운 방법입니다. oklch(L C H)또는 각 항목은 다음 oklch(L C H / a)과 같습니다. L인지 된 가벼움( 0%- 100%)입니다. L"인지"는 에서 와 달리 대비를 예측했음을 의미합니다 hsl(). C회색에서 가장 채도가 높은 색상까지의 채도입니다. H색조 각도( 0- 360)입니다. a불투명도( 0- 1또는 0- 100%)입니다. a:hover { background: oklch(45% 0.26 264); /* blue */ color: oklch(100% 0 0); /* white */ color: oklch(0% 0 0 / 50%); /* black with 50% opacity */ } OKLCH의 장점: rgb()또는 16진수( ) 와 달리 #ca0000OKLCH는 사람이 읽을 수 있습니다. 숫자만 봐도 OKLCH 값이 어떤 색을 나타내는지 쉽게 이해할 수 있습니다. HSL처럼 작동하지만 OKLCH는 HSL보다 밝기를 더 잘 인코딩합니다. 달리 hsl()OKLCH 는 지각 의 밝기 를 사용 하고 예측 가능한 대비 를 가지고 있습니다 . 또한 예측 가능한 대비로 OKLCH는 a11y가 더 좋습니다 . OKLCH는 넓은 영역의 P3 색상 에 사용할 수 있습니다 . 예를 들어, Apple의 것과 같은 새 장치는 이전 sRGB 모니터보다 더 많은 색상을 표시할 수 있으며 OKLCH를 사용하여 이러한 새 색상을 지정할 수 있습니다. LCH에는 파란색 영역의 채도가 변경되면 색조가 보라색으로 바뀌는 문제가 있습니다. OKLCH는 이 문제를 해결하기 위해 만들어졌습니다 . 그러나 OKLCH와 함께 두 가지 과제가 있습니다. OKLCH 및 LCH를 사용하는 L경우 , C, 및 의 모든 조합 H이 모든 모니터에서 지원되는 색상이 되는 것은 아닙니다. 브라우저는 지원되는 가장 가까운 색상을 찾으려고 하지만 색상 선택기 를 사용하여 색상을 확인하는 것이 더 안전합니다 . OKLCH는 새로운 색 공간입니다. 적어도 지금 이 글을 쓰는 2022년 현재로서는 생태계가 여전히 제한적입니다. 그러나 우리는 이미 oklch()polyfill , 팔레트 생성기 , 색상 선택기 및 많은 변환기 를 가지고 있습니다. Evil Martians의 OKLCH 색상 선택기는 OKLCH 공간과 밝기, 채도, 알파 및 색조 슬라이더를 보여줍니다. 색상 선택기의 OKLCH 공간 그래서 그것은 짧은 버전이지만 전체 이야기를 원하신다면 다음 섹션에서 처음부터 시작하겠습니다. 목차 : CSS 색상이 어떻게 변경되었는지 OKLCH를 다른 CSS 색상 형식과 비교 OKLCH 작동 방식 프로젝트에 OKLCH를 추가하는 방법 결과 요약 CSS 색상이 어떻게 변경되었는지 CSS 색상 모듈 4 약간의 최근 역사: CSS 색상 모듈 레벨 4 사양은 2022년 7월 5일에 후보 권장 사항이 됩니다. 색상 기능에 새로운 구문 설탕을 추가했으며 이 기사에서 사용할 것입니다. .old { color: rgb(51, 170, 51); color: rgba(51, 170, 51, 0.5); } .new { color: rgb(51 170 51); color: rgb(51 170 51 / 50%); } 그러나 더 중요한 것은 CSS Color 4가 색상을 정의하는 14가지 새로운 방법을 추가했다는 것입니다. 이는 단순한 구문상의 설탕이 아닙니다. 이러한 새로운 색상 작성 방법(예: oklch())은 코드 가독성을 향상시키고 웹사이트에 새로운 기능을 추가할 가능성이 있습니다. P3 색상 최신 디스플레이는 실제로 사람의 눈에 실제로 보이는 모든 색상을 표시할 수 없습니다(색상 하위 집합의 현재 표준은 sRGB라고 함). 새로운 화면은 30% 더 많은 새로운 색상을 추가하기 때문에 이 문제를 약간 수정합니다. 이 새로운 색상 세트를 P3(광역이라고도 함)라고 합니다. 채택 측면에서 모든 최신 Apple 장치와 많은 OLED 화면에는 P3 색상이 지원됩니다. 이것은 먼 미래의 일이 아니라 지금 일어나고 있는 일입니다. 이 추가 30% 색상은 디자이너에게 매우 유용할 수 있습니다. 이러한 새로운 색상 중 일부는 더 채도가 높습니다. 따라서 더 눈길을 끄는 랜딩 페이지를 생성할 수 있습니다. 추가 색상은 설계자에게 설계 시스템에 대한 팔레트 생성에 대한 유연성을 제공합니다. 왼쪽에서 모양은 원래 모양에서 확장된 쐐기로 표현되는 sRGB에서 P3 색상이 제공하는 추가 색상을 보여줍니다. 오른쪽은 아이콘이 왼쪽에 sRGB로, 오른쪽에 더 생생한 아이콘이 P3 색상으로 렌더링되어 더 생생한 모습을 보여줍니다. 왼쪽의 녹색에 새로 사용 가능한 P3 색상. 오른쪽의 sRGB와 P3의 실제 아이콘 비교. 그래서 우리는 P3 색상을 가지고 있습니다! 훌륭하지만 실제로 사용하려면 P3를 지원하기 위해 색상 형식을 찾아야 합니다. rgb(), hsl()또는 16진수 형식은 P3 색상을 지정하는 데 사용할 수 없습니다. 그러나 new를 사용할 수는 color(display-p3 1 0 0)있지만 여전히 RGB 형식의 가독성 문제를 공유합니다. 다행히 OKLCH는 가독성이 좋고 P3 이상을 지원하며 사람의 눈에 보이는 모든 색상을 지원합니다. CSS 기본 색상 조작 CSS Color 4가 큰 발전을 이룬 것은 사실이지만 곧 출시될 CSS Color 5 는 훨씬 더 유용할 것입니다. 마침내 CSS에서 기본 색상 조작을 제공합니다. /* These examples use hsl() for illustration. Don't use it in production since hsl() format has bad a11y. */ :root { --accent: hsl(63 61% 40%); } .error { /* Red version of accent color */ background: hsl(from var(--accent) 20 s l); } .button:hover { /* 10% lighter version */ background: hsl(from var(--accent) h s calc(l + 10%)) } 이 새로운 구문을 사용하면 하나의 색상(예: 사용자 정의 속성에서)을 가져와 색상 형식의 개별 구성 요소를 변경할 수 있습니다. 그러나 언급한 바와 같이 hsl()형식을 사용하는 것이 11y에 좋지 않기 때문에 이 접근 방식에는 단점이 있습니다. l색상에 따라 값이 다르기 때문에 결과는 예측할 수 없는 대비를 갖게 됩니다 . 익숙한 후렴구가 나타납니다. 색상 조작이 예상한 결과를 생성하는 색상 공간이 필요합니다. 예를 들어 OKLCH와 같습니다. :root { --accent: oklch(70% 0.14 113); } .error { /* Red version of accent color */ background: oklch(from var(--accent) l c 15) } .button:hover { /* 10% lighter version */ background: oklch(from var(--accent) calc(l + 10%) c h) } --accent참고: 의 색상 을 입력하기 위해 OKLCH를 사용할 필요는 oklch(from …)없지만 일관된 형식을 사용하는 것이 코드 가독성에 더 좋습니다. OKLCH를 다른 CSS 색상 형식과 비교 oklch()이전 섹션 에서 P3 색상, 기본 색상 조작 및 이 모든 것이 어떻게 조화를 이루는 지 뿐만 아니라 우리가 있었던 위치, 현재 위치, 앞으로 가는 방향에 대한 컨텍스트를 제공했으면 합니다. 물론 OKLCH를 사용하는 것보다 필요에 따라 사용자 지정 속성, P3 또는 색상 수정과 같은 항목에 대해 다른 색상 형식을 사용하여 형식을 혼합하고 일치시킬 수 있습니다. 코드 유지 관리에 훨씬 좋습니다. 따라서 이를 염두에 두고 CSS의 미래를 위해 단 하나의 색상 형식만 찾으려고 노력한다고 가정해 보겠습니다 . 형식이 다음 기준을 충족해야 한다고 생각합니다. 기본 CSS 지원이 있어야 합니다. 형식은 P3 이상과 같이 넓은 색 영역을 인코딩할 수 있어야 합니다. 색상 수정에 적합해야 합니다. 여기에는 사람이 읽을 수 있는 축( lightness대신 amount of red)이 포함됩니다. 모든 축은 독립적이어야 합니다. 색조의 축 색상 값을 변경하면 동일한 수준의 대비가 유지되어야 합니다. 채도 변화는 색조를 바꾸지 않아야 합니다. 이제 기준을 염두에 두었으므로 형식을 비교해 보겠습니다. OKLCH 대 RGB/Hex 색상 형식 rgb(109 162 218), #6ea3db또는 P3-analog color(display-p3 0.48 0.63 0.84)에는 각각 빨강, 녹색 및 파랑의 양을 나타내는 3개의 숫자가 포함되어 있습니다. 참고: 1in 은 RGB color(display-p3)보다 큰 값을 인코딩합니다 .255 위의 형식은 모두 본질적으로 동일한 문제를 공유합니다. 대부분의 개발자가 완전히 읽을 수 없습니다. 대신 사람들은 그것들을 실제적인 이해나 비교할 방법이 없는 일종의 마법의 숫자처럼 사용합니다. RGB, hex, color(display-p3)는 대부분의 인간에게 빨강, 파랑, 녹색의 양을 변경하여 직관적으로 색상을 설정하기 어렵기 때문에 색상 수정에 편리하지 않습니다. 또한 RGB 및 16진수도 P3 색상을 인코딩할 수 없습니다. 반면 OKLCH, LCH, HSL은 사람들이 자연스럽게 색상에 대해 생각하는 방식에 훨씬 더 가까운 값을 설정할 수 있습니다. OKLCH 및 LCH에는 각각 밝기, 채도(또는 채도) 및 색조를 나타내는 3개의 숫자가 있습니다. 16진수와 OKLCH 비교: .button { /* Blue */ background: #6ea3db; } .button:hover { /* More bright blue */ background: #7db3eb; } .button.is-delete { /* Red with the same saturation */ background: #d68585; } .button { /* Blue */ background: oklch(70% 0.1 250); } .button:hover { /* A brighter blue */ background: oklch(75% 0.1 250); } .button.is-delete { /* Red with the same saturation */ background: oklch(70% 0.1 20); } OKLCH의 직관적인 가치가 훌륭하게 들리지 않습니까? 그러나 여기에서 동전의 이면에 대해 이야기해야 할 필요가 있습니다. OKLCH의 주요 단점은 다른 것과 달리 "젊은" 색 공간을 가지고 있으며 생태계는 아직 개발 과정에 있다는 것입니다. OKLCH 대 HSL 이제 OKLCH와 HSL을 비교해보자. HSL에는 다음과 같이 색조, 채도 및 밝기를 인코딩하는 3개의 숫자가 포함되어 있습니다 hsl(210 60% 64%). HSL의 주요 문제는 원통형 색상 공간이 있다는 것입니다. 모든 색조의 채도는 동일합니다( 0—100%). 그러나 실제로 우리의 디스플레이와 눈은 색조에 따라 최대 채도가 다릅니다. HSL은 색상 공간을 변형하고 동일한 최대 값을 갖도록 색상을 확장하여 이러한 복잡성을 숨깁니다. 4 삽화. 맨 위 행은 동일한 채도/채도 값을 가진 HSL 및 OKLCH 색상 공간을 보여줍니다. 바닥은 동일하지만 흑백입니다. 아래의 동일한 채도/채도 및 흑백 버전이 있는 HSL 및 OKLCH 공간의 Hue-Lightness 슬라이스. HSL 밝기는 색조 축에서 일관되지 않습니다. 결과적으로 HSL 변형 색상 공간은 적절한 색상 수정에 사용할 수 없습니다. 여기서 L(밝기) 성분은 정확하지 않습니다. 다른 색조는 다른 "실제" 밝기 값을 나타냅니다. 이는 대비 및 나쁜 접근성 문제로 이어집니다. 처음부터 접근 가능한 디자인 처음부터 접근 가능한 디자인 2021년 7월 26일 처음부터 접근 가능한 디자인을 위한 커버 또한 읽기 다음은 이 문제를 보여주는 몇 가지 실제 사용 사례입니다. 10% 밝기를 추가하면 파란색과 보라색 색상에 대해 다른 결과가 나타납니다. SASS 사용자는 darken()예상치 못한 결과를 생성하는 방법을 기억할 수 있습니다. 색조 변경(예: 회사의 강조 색상을 사용하여 오류와 같은 빨간색 생성)도 밝기를 변경하여 텍스트를 읽을 수 없게 만들 수 있습니다. 4개의 버튼이 있습니다. 첫 번째 열은 HSL이고 두 번째 열은 OKLCH입니다. 왼쪽 하단 버튼은 HSL의 색조 변경으로 인해 대비가 좋지 않습니다. HSL에서 색조 변경은 낮은 대비로 인한 접근성 문제로 이어질 수 있습니다. HSL은 색상 수정에 좋지 않습니다. 많은 팀이 디자인 시스템 팔레트 생성 을 위해 HSL을 피하도록 커뮤니티에 요청했습니다 . 또한 RGB 및 16진수와 마찬가지로 HSL을 사용하여 P3 색상을 정의할 수 없습니다. OKLCH는 공간을 변형시키지 않습니다. 모든 복잡성이 있는 실제 색상 공간을 보여줍니다. 한편으로 이 기능을 사용하면 색상 변환 및 P3 색상 정의 후에 예측 가능한 대비 값을 가질 수 있습니다. 그러나 반면 OKLCH의 모든 숫자 조합이 가시적인 색상을 생성하는 것은 아닙니다. 일부는 P3 모니터에서만 볼 수 있습니다. 그러나 여기에는 여전히 좋은 점이 있습니다. 브라우저는 지원되는 가장 가까운 색상을 렌더링합니다. OKLCH 대 Oklab & LCH 대 Lab CSS에는 Oklab 공간에 대한 두 가지 oklab()기능 oklch()이 lab()있습니다 lch(). 차이점은 무엇입니까? 그들은 같은 공간을 사용하면서도 이 공간의 포인트를 인코딩하는 다른 방법을 사용합니다. Oklab 및 Lab 직교 좌표( a: 색상의 녹색/적색 값, b: 파란색/노란색 값) 및 OKLCH 및 LCH는 극좌표(색상에 대한 각도 및 채도에 대한 거리)를 사용합니다. Oklab의 직교 좌표 사이의 차이를 설명하기 위해 두 개의 원이 있습니다. 직각은 a와 b를 표시하고 OKLCH의 극좌표는 상단 광선이 '크로마'로 표시되고 각도 자체가 '색조'로 표시되는 예각으로 나타납니다. '. Oklab 공간의 직교 좌표(Oklab) 대 극좌표(OKLCH) 요컨대, 크로마와 색조 값은 단순히 a및 b. OKLCH 대 LCH LCH 는 HSL 및 RGB의 모든 문제를 해결하기 위해 만들어진 CIE LAB(Lab) 공간 위에 좋은 형식입니다. P3 색상을 인코딩할 수 있으며 대부분의 경우 예측 가능한 색상 수정 결과를 생성합니다. 그러나 LCH에는 한 가지 고통스러운 버그가 있습니다. 즉, 채도의 예기치 않은 색조 이동과 파란색의 밝기 변경( 과 의 색조 값 사이 270) 330입니다. 동일한 색조를 가진 LCH 및 OKLCH 공간의 일정한 색조 슬라이스인 두 개의 삼각형. 가장 왼쪽의 삼각형 모양인 LCH 슬라이스는 한쪽이 파란색이고 다른 쪽이 자주색입니다. 올바른 모양인 OKLCH는 예상대로 일정한 색조를 유지합니다. 동일한 색조의 LCH 및 OKLCH 공간의 일정한 색조 슬라이스. LCH 슬라이스는 한쪽이 파란색이고 다른 쪽이 자주색입니다. OKLCH는 예상대로 일정한 색조를 유지합니다. 다음은 작은 실제 사례입니다. .temperature.is-very-very-cold { background: lch(35% 110 300); /* Looks blue */ } .temperature.is-very-cold { background: lch(35% 75 300); /* We changed only lightness, but blue became purple */ } .temperature.is-cold { background: lch(35% 40 300); /* Very purple */ } .temperature.is-very-very-cold { background: oklch(48% 0.27 274); /* Looks blue */ } .temperature.is-very-cold { background: oklch(48% 0.185 274); /* Still blue */ } .temperature.is-cold { background: oklch(48% 0.1 274); /* Still blue */ } Oklab 및 OKLCH 공간 은 색조 이동 버그를 해결하기 위해 만들어졌습니다 . 그러나 OKLCH는 단순한 버그 수정이 아닙니다. 또한 색상 축 뒤에 있는 수학과 관련된 멋진 새 기능 도 있습니다. 예를 들어, 색역 보정 이 개선 되었으며 CSSWG 는 색역 매핑에 OKLCH를 사용할 것을 권장 합니다. OKLCH 작동 방식 약간의 역사 Oklab & OKLCH 색상 공간은 2020년 Björn Ottosson 에 의해 생성되었습니다. 생성된 주된 이유는 CIE LAB & LCH 문제를 해결하기 위한 것이었습니다. Björn은 자신이 만든 이유와 구현 세부 사항을 자세히 설명 하는 훌륭한 기사 를 작성했습니다. 분명히 Oklab은 매우 젊고 이것이 주요 약점입니다. 그러나 불과 2년 만에 Oklab은 이미 매우 잘 채택되었습니다. CSS 사양 에 추가되었습니다 . Safari는 버전 15.4부터 지원하고 있습니다 oklch().oklab() Photoshop 은 그래디언트 보간을 위해 Oklab을 추가 했습니다. OKLab은 우수한 접근성을 위해 색상 팔레트 생성기 에 사용됩니다. 개인적으로 CSS Colors 4와 5의 큰 변화는 최신의 최상의 솔루션을 얻기에 좋은 시기라고 생각합니다. 어쨌든 우리는 새로운 CSS 사양의 새로운 기능을 중심으로 새로운 생태계를 만들어야 합니다. 축 OKLCH의 색상은 4개의 숫자로 인코딩됩니다. CSS에서는 다음과 같이 보입니다. oklch(L C H)또는 oklch(L C H / a). 네 개의 막대는 OKLCH 축을 보여줍니다. 왼쪽 상단은 가벼움입니다. 짙은 자주색으로 시작하여 오른쪽으로 이동함에 따라 연한 자주색으로 변하고 결국 흰색으로 심하게 변화합니다. 오른쪽 상단 막대는 크로마입니다. 회색빛이 도는 자주색으로 시작하여 연한 자주색으로 변합니다. 막대의 약 33%에서 오른쪽으로 갈수록 흰색으로 크게 바뀝니다. 왼쪽 하단은 알파입니다. 알파 채널은 오른쪽으로 늘어남에 따라 밝은 자주색으로 전환됩니다. 연보라색은 막대의 왼쪽 끝에 도달합니다. 오른쪽 하단은 색조입니다. 막대가 왼쪽에서 오른쪽으로 이동함에 따라 다양한 생생한 색상이 전환됩니다. OKLCH 축 각 값에 대한 자세한 설명은 다음과 같습니다. L가벼움 이 감지 됩니다. (검정)에서 (흰색) 까지 입니다. 값 이 0인 경우에도 필수입니다.0%100%% C색 의 채도인 크로마 입니다. 0(회색)에서 무한대로 이동합니다 . 실제로는 제한이 있지만 화면의 색 영역(P3 색상은 sRGB보다 큰 값을 가짐)에 따라 다르며 각 색조는 최대 채도가 다릅니다. P3 및 sRGB 모두 값은 항상 아래에 있습니다 0.37. H색조 각도입니다 . 빨간색 , 노란색 , 녹색 , 파란색 , 보라색 0을 360거쳐 빨간색 으로 돌아 갑니다 . 각도이므로 동일한 색조 를 인코딩합니다. 단위 또는 없이 쓸 수 있습니다 .0701202003000360H60deg60 a불투명도 ( 0- 1또는 0- 100%)입니다 . 축의 크기가 다릅니다. 밝기의 경우 1% 1%, 채도의 경우 0.004, 색조의 경우 3.6. 다음은 OKLCH 색상의 몇 가지 예입니다. .bw { color: oklch(0% 0 0); /* black */ color: oklch(100% 0 0); /* white */ color: oklch(100% 0.2 100); /* also white, any hue with 100% L is white */ color: oklch(50% 0 0); /* gray */ } .colors { color: oklch(80% 0.12 100); /* yellow */ color: oklch(60% 0.12 100); /* much darker yellow */ color: oklch(80% 0.05 100); /* quite grayish yellow */ color: oklch(80% 0.12 225); /* blue, with the same perceived lightness */ } .opacity { color: oklch(80% 0.12 100 / 50%); /* transparent yellow */ } 일부 구성 요소는 none값으로 가질 수 있습니다. 이것은 색상 변형 후에 발생할 수 있습니다. 예를 들어 흰색에는 색조가 없으며 브라우저 none는 0. .white { color: oklch(100% 0 none); /* valid syntax */ } 색상 수정 CSS Colors 5 에서는 기본 색상 수정이 가능합니다. 이것은 내가 가장 좋아하는 OKLCH 특전 중 하나에 빛을 비출 것입니다. 매우 예측 가능한 결과를 가지기 때문에 색상 수정을 위한 최고의 색상 공간입니다. 색상 수정 구문은 다음과 같습니다. :root { --origin: #ff000; } .foo { color: oklch(from var(--origin) l c h); } 원본 색상( var(--origin)위의 예에서)은 다음과 같을 수 있습니다. 모든 형식의 색상: #ff0000, rgb(255, 0, 0)또는 oklch(62.8% 0.25 30). 모든 형식의 색상이 있는 CSS 사용자 정의 속성입니다. 뒤의 각 구성 요소( l, c, h)는 다음 from X과 같을 수 있습니다. 구성 요소를 원래 색상과 동일하게 유지하는 것을 나타내는 문자( l, c, ).h calc()식 . 숫자 대신 문자( l, c, h)를 사용하여 원점 색상의 값을 참조할 수 있습니다. 구성 요소를 대체할 새 값입니다. 복잡하게 들릴 수 있지만 몇 가지 예를 보면 다음을 설명하는 데 도움이 될 수 있습니다. :root { --error: oklch(60% 0.16 30); } .message.is-error { /* The same color but with different opacity */ background: oklch(from var(--error) l c h / 60%); /* 10% darker */ border-color: oklch(from var(--error) calc(l - 10%) c h) } .message.is-success { /* Another hue (green) with the same lightness and saturation */ background: oklch(from var(--error) l c 140); } OKLCH의 예측 대비는 사용자 입력에서 강조 색상을 생성할 때 매우 유용합니다( OKLCH 색상 선택기 로 예제 확인 ). :root { /* Replace lightness and saturation to a certain contrast */ --accent: oklch(from (--user-input) 87% 0.06h); } body { background: var(--accent); /* We do not need to detect text color with color-contrast() because OKLCH has predicted contrast. All backgrounds with L≥87% have good contrast with black text. */ color: black; } 색역 보정 OKLCH에는 또 다른 흥미로운 기능이 있습니다. 장치 독립성; OKLCH는 sRGB 색상의 현재 모니터용으로만 만들어진 것이 아닙니다. OKLCH로 가능한 모든 색상을 인코딩할 수 있습니다: sRGB, P3, Rec2020 및 그 이상. 일부 숫자 조합에는 P3 모니터가 표시되어야 합니다. 일부 다른 조합의 경우 디스플레이에 필요한 적절한 모니터가 아직 생성되지 않았습니다. 그러나 실제로 색 영역(사용자 모니터에서 지원하는 색상)을 벗어나는 것에 대해 걱정하지 마십시오. 브라우저는 가능한 가장 가까운 색상을 렌더링합니다. 다른 색역에서 가장 가까운 색을 찾는 것을 "색역 매핑" 또는 "색역 보정"이라고 합니다. 이것이 OKLCH 색상 선택기 의 축에 구멍이 있는 것을 볼 수 있는 이유입니다 . 모든 색조에는 최대 채도가 다릅니다. 불행히도 이것은 OKLCH 색상 인코딩의 문제일 뿐만 아니라 현재 사용 가능한 모니터와 우리의 비전 모두의 한계입니다. 일부 밝기 값의 경우 채도가 큰 파란색만 있습니다. 다른 밝기 값의 경우 녹색은 동일한 채도를 가진 파란색 또는 빨간색의 해당 쌍을 갖지 않습니다. 왼쪽에 C와 아래쪽에 H의 두 축이 있는 그래프는 거대한 원형 바이트가 누락된 모양을 보여줍니다. 모양이 왼쪽에서 오른쪽으로 이동함에 따라 다양한 색상이 표시되고 여러 전환 그라디언트로 나타납니다. 44% 밝기의 경우 파란색만 sRGB 화면에서 높은 크롬 색상을 볼 수 있습니다. 색역 매핑에는 2가지 방법이 있습니다. 색상을 RGB(또는 P3)로 변환하고 100% 초과 또는 0% 미만의 값을 자르십시오: rgb(150% -20% 30%)→ rgb(100% 0 30%). 이것은 가장 빠른 방법이지만 최악의 결과를 가져옵니다. 색상의 색조를 변경할 수 있고 이 변경 사항이 사용자에게 표시될 수 있습니다. 색상을 OKLCH로 변환하고 채도와 밝기를 줄입니다. 이렇게 하면 원본 색조가 유지되지만 렌더링 속도가 약간 느립니다. Chris Lilley는 다양한 색역 매핑 방법을 훌륭하게 비교 했습니다. CSS Colors 4 사양 에서는 브라우저가 색상 영역 매핑에 OKLCH 방법을 사용해야 합니다. 그러나 여전히 현재 Safari는 빠르지만 부정확한 클리핑 방법을 사용합니다. 그렇기 때문에 현재 수동 색역 매핑을 권장하고 sRGB 및 P3 색상을 CSS에 추가하는 것이 좋습니다. .martian { background: oklch(69.73% 0.155 112.79); } @media (color-gamut: p3) { .martian { background: oklch(69.73% 0.176 112.79); /* You'll only see the preview using Safari with P3 monitors */ } } 그리고 여기 좋은 소식 이 있습니다. oklch()폴리필이 당신을 위해 이것을 할 수 있습니다. 자동으로 P3 색상을 감싸고 @media가장 가까운 sRGB 색상을 대체로 설정합니다. 프로젝트에 OKLCH를 추가하는 방법 1단계: CSS에 OKLCH 폴리필 추가 2022년 10월 현재 Safari 만 oklch() . 고맙게도 색상 함수는 정적 값을 폴리필하기 쉽습니다. 다음을 지원하는 두 가지 폴리필이 있습니다 oklch(). 매우 인기가 postcss-preset-env있습니다. Rust로 작성된 매우 빠른 Lightning CSS 입니다. 이미 시스템에 있을 가능성이 큽니다 postcss-preset-env. 예를 들어 모든 Create React App 프로젝트에는 이 기능이 있습니다. 에 대한 잠금 파일( package-lock.json또는 yarn.lock) pnpm-lock.yaml을 확인하십시오 postcss-preset-env. 최신 버전 이상을 사용하는지 확인하십시오 7.x. CSS에 추가 하고 빌드 도구 oklch(100% 0 0)로 컴파일되는지 확인하십시오 .rgb() 가 postcss-preset-env없지만 웹팩과 같은 프론트 엔드 빌드 도구가 있는 경우: postcss-preset-env패키지 관리자를 사용하여 설치합니다 . npm의 경우 다음을 실행합니다. npm install postcss-preset-env postcss PostCSS 문서 를 확인 하여 빌드 도구에 PostCSS 지원을 추가하는 방법을 확인하십시오. 예를 들어, webpack은 필요 postcss-loader하지만 Vite 는 즉시 지원합니다. 이미 PostCSS 통합이 있는 경우 PostCSS 구성을 찾으십시오. 많은 프로젝트에서 이미 PostCSS를 사용하고 있습니다(예: Autoprefixer ). 프로젝트 루트 에서 postcss.config.js또는 빌드 도구 구성에서 섹션을 찾습니다 ..postcssrc.json"postcss"package.jsonpostcss PostCSS 구성을 찾을 수 있는 경우 postcss-preset-env플러그인에 추가: { "plugins": [ + "postcss-preset-env", "autoprefixer" ] } 구성을 찾지 못한 경우 .postcssrc.json프로젝트 루트에 파일을 만듭니다. { "plugins": [ "postcss-preset-env" ] } Vite-lizing Rails: Vite Ruby로 실시간 재장전 및 핫 교체 받기 Vite-lizing Rails: Vite Ruby로 실시간 재장전 및 핫 교체 받기 2022년 6월 28일 또한 읽기 빌드 도구가 없는 경우 Vite 를 사용 하거나 lightningcssCLI로 CSS를 컴파일하는 것이 좋습니다. CSS를 추가 .test{ background: oklch(100% 0 0) }하고 컴파일한 다음 출력 CSS에서 .test{background:#fff}. 2단계: 현재 존재하는 색상 변환 폴리필 이 있으면 oklch()16진수를 사용하여 모든 색상을 바꾸 rgb()거나 hsl()형식을 OKLCH로 바꿀 수 있습니다. 모든 브라우저에서 작동합니다. CSS 소스 코드에서 색상을 검색 하고 OKLCH 변환기oklch() 를 사용하여 색상을 변환합니다 . .header { - background: #f3f7fa; + background: oklch(97.4% 0.006 240); } 이 스크립트 를 사용하여 모든 색상을 자동으로 변환 할 수도 있습니다 . npx convert-to-oklch ./src/**/*.css 참고: 이러한 폴리필은 CSS에서만 작동하며 HTML 또는 JS 소스에서는 작동하지 않습니다. 추가: 색상 팔레트 추가 아마도 이 약간의 리팩토링은 색상을 팔레트로 이동하여 CSS 코드의 유지 관리성을 높일 수 있는 좋은 시간일 것입니다. 프로젝트에 디자인 시스템이 필요하다는 5가지 신호 프로젝트에 디자인 시스템이 필요하다는 5가지 신호 2022년 9월 8일 프로젝트에 디자인 시스템이 필요한 5가지 신호 표지 또한 읽기 다음은 색상 팔레트에 대한 요구 사항입니다. 모든 색상은 CSS 사용자 정의 속성으로 설명됩니다. 리액트/뷰/등. 구성 요소는 이러한 색상만 var(--error). 디자이너는 색상 변형의 수를 줄이기 위해 색상을 재사용해야 합니다. 어둡거나 고대비 테마의 경우 구성 요소의 CSS가 필요하지 않으며 @media팔레트에서 CSS 사용자 정의 속성을 변경하기만 하면 됩니다. 다음 은 이 접근 방식 의 예 입니다. :root { --surface-0: oklch(96% 0.005 300); --surface-1: oklch(100% 0 0); --surface-2: oklch(99% 0 0 / 85%); --text-primary: oklch(0% 0 0); --text-secondary: oklch(54% 0 0); --accent: oklch(57% 0.18 286); --danger: oklch(59% 0.23 7); } @media (prefers-color-scheme: dark) { :root { --surface-0: oklch(0% 0 0); --surface-1: oklch(29% 0.01 300); --surface-2: oklch(29% 0 0 / 85%); --text-primary: oklch(100% 0 0); } } 또한 oklch()팔레트 생성 후 로 이동하는 것이 조금 더 쉬울 것입니다. 3단계: Stylelint로 OKLCH 유지 관리 Stylelint 는 일반적인 실수를 찾고 모범 사례를 홍보하는 데 유용한 스타일 린터입니다. ESLint와 비슷하지만 CSS, SASS 또는 CSS-in-JS용입니다. oklch()Stylelint는 다음과 같은 이유로 마이그레이션할 때 매우 유용할 수 있습니다. 16진수, 를 사용하는 색상 rgb()이 사용 hsl()되지 않고 oklch()일관성을 향상시키기 위해 모든 색상을 그대로 유지하도록 지정합니다. 브라우저 영역 수정을 피하기 위해 모든 P3 색상이 내부에 있는지 다시 확인하십시오 @media (color-gamut: p3)(현재 Safari는 이 작업을 올바르게 수행하지 않습니다). 패키지 관리자를 사용하여 Stylelint 및 stylelint-gamut 플러그인을 설치해 보겠습니다. npm을 사용하여 다음을 실행합니다. npm install stylelint stylelint-gamut 다음을 사용하여 구성 생성 .stylelintrc: { "plugins": [ "stylelint-gamut" ], "rules": { "gamut/color-no-out-gamut-range": true, "function-disallowed-list": ["rgba", "hsla", "rgb", "hsl"], "color-function-notation": "modern", "color-no-hex": true } } 에 Stylelint 호출을 추가하여 npm testCI에서 실행합니다. package.json다음과 같이 변경하십시오 . "scripts": { - "test": "eslint ." + "test": "eslint . && stylelint **/*.css" } npm test로 변환해야 하는 색상을 찾기 위해 실행 합니다 oklch(). stylelint-config-recommended에 추가하는 것도 좋습니다 .stylelintrc. 이 Stylelint 공유 가능 구성은 CSS 코드가 인기 있는 모범 사례를 사용하고 있는지 확인합니다. 추가: P3 색상 색상을 로 교체 oklch()하면 코드 가독성과 유지 관리 용이성이 향상되지만 사용자에게 새로운 기능이 추가되지는 않습니다. 그러나 사용자 가 볼 수 있는 OKLCH의 추가 기능이 있습니다. 웹 사이트에 풍부하고 광범위한 P3 색상을 추가할 수 있습니다. 예를 들어 방문 페이지에 깊은 색상을 추가할 수 있습니다. P3 색상은 디자인 시스템용 팔레트를 만들 때 매우 유용합니다. 그러나 Safari(최신 Apple 장치의 경우)만 P3 색상을 지원하기 때문에 지금은 그다지 유용하지 않습니다. 방법은 다음과 같습니다. CSS에서 강조 색상과 같은 채도가 높은 색상을 선택합니다. OKLCH Color Picker 에 복사합니다 . Chroma및 값을 변경하여 Lightness색상을 P3 영역으로 이동합니다. Lightness차트는 최고의 피드백을 제공할 것입니다 . 얇은 흰색 선 위로 색상을 이동하기만 하면 됩니다. 결과를 복사하고 color-gamut: p3미디어 쿼리로 래핑합니다. :root { --accent: oklch(70% 0.2 145); } + @media (color-gamut: p3) { + :root { + --accent: oklch(70% 0.29 145); + } + } 추가: SVG의 OKLCH CSS뿐만 아니라 SVG(또는 HTML)에서도 OKLCH를 사용할 수 있습니다. 예를 들어 앱 아이콘 에 고유하고 풍부한 색상을 추가하는 데 유용할 수 있습니다 . SVG에서 P3 색상을 사용하는 방법 SVG에서 P3 색상을 사용하는 방법 2022년 5월 25일 또한 읽기 참고: SVG 사용을 위한 폴리필이 없으므로 oklch()넓은 색 영역 P3 색상을 설정할 때만 이 기능을 사용하는 것이 좋습니다. 추가: 그라디언트의 OKLCH/Oklab 그라디언트는 2개 이상의 점 사이의 색상 공간을 통과하는 경로입니다. 즉, 색상 공간을 변경하면 동일한 시작 및 종료 색상에 대해 매우 다른 그라디언트가 생성됩니다. 네 개의 사각형이 있습니다. 각 사각형은 sRBG, Oklab 및 OKLCH가 있는 그라디언트에 대한 코드를 보여줍니다. 각 블록의 코드는 동일하지만 각 색상 공간에 대해 그라데이션이 약간 다릅니다. 다양한 색상 공간의 그라디언트 그라디언트의 경우 은색 총알이 없습니다. 다른 작업에는 다른 색 공간이 필요합니다. 그러나 Oklab 색 공간(직교 좌표 위에 있는 OKLCH의 자매)은 종종 좋은 결과를 얻습니다. easing 으로 색상을 변경하여 그라디언트를 더욱 아름답게 만들 수 있습니다 . 기본(sRGB) 그라디언트로 중간에 회색 영역이 없습니다. Lab으로 파란색에서 보라색으로의 이동이 없습니다. CSS 이미지 4 사양 에는 그라디언트의 색상 공간을 변경하는 특수 구문이 있습니다. .oklch { background: linear-gradient(in lab, blue, green); } Safari 기술 미리보기에서만 작동합니다. PostCSS 플러그인 을 사용하여 지금 바로 사용할 수 있도록 폴리필할 수 있습니다. 추가: OKLCH로 색상 수정 더 많은 브라우저가 CSS Colors 5 에서 기본 CSS 색상 수정(상대 색상)을 지원하기 시작하면 마침내 OKLCH의 진정한 힘을 볼 수 있습니다 . OKLCH는 색상 수정에 매우 좋습니다. HSL과 달리 대비를 예측하고 LCH와 달리 채도 변경 시 색조 변화에 문제가 없습니다. 안타깝게도 이 기능은 동적 CSS 사용자 정의 속성을 완벽하게 지원하여 폴리필할 수 없습니다. 그럼에도 불구하고 내일을 준비하기 위해 오늘 OKLCH 축에 익숙해지는 것이 좋습니다! :hover버튼에 대해 10% 더 어두운 배경 을 정의하는 방법은 다음과 같습니다 . .button { background: var(--accent); } .button:hover { background: oklch(from var(--accent) calc(l - 10%) c h); } CSS 사용자 정의 속성을 사용하면 :hover로직을 한 번만 정의한 다음 소스 색상을 변경하는 것만으로 많은 변형을 생성할 수 있습니다. .button { --button-color: var(--accent); background: var(--button-color); } .button.is-secondary { --button-color: var(--dimmed); } .button.is-error { --button-color: var(--error); } .button:hover { /* One :hover for normal, secondary, and error states */ background: oklch(from var(--button-color) calc(l + 10%) c h); } OKLCH의 예측 가능한 대비 덕분에 사용자 입력의 색상으로 작업할 수 있고 사이트에서 좋은 11년을 보낼 수 있습니다. .header { /* JS will set --user-avatar-dominant */ background: oklch(from var(--user-avatar-dominant) 80% 0.17 h); /* With OKLCH, we're sure that black text will be always readable on any hue, since we set L to 80% */ color: black; } 여기에 언급할 가치가 있는 또 하나의 이점이 있습니다. OKLCH는 CSS에서 디자인 시스템 팔레트를 완전히 생성할 수 있습니다. 추가: JS의 OKLCH 색상 수정에 OKLCH를 사용하기 위해 CSS Colors 5를 기다릴 필요가 없습니다. Color.js 또는 culori 를 사용하면 OKLCH 색상 공간의 모든 이점을 누리면서 JS에서 색상을 변환할 수 있습니다. OKLCH Color Picker 소스 코드 를 사용하여 culori로 예제를 확인할 수 있습니다 . 이 기사에서는 Color.js를 사용하겠습니다. 다음은 사용자 정의 색상에서 강조 색상을 만드는 방법을 보여주는 예입니다. import Color from 'colorjs.io' // Parse any CSS color let accent = new Color(userAvatarDominant) // Set lightness and contrast accent.oklch.l = 0.8 accent.oklch.c = 0.17 // Gamut mapping to sRGB if we are out of sRGB if (!accent.inGamut('srgb')) { accent = accent.toGamut({ space: 'srgb' }) } // Make the color 10% lighter let hover = accent.clone() hover.oklch.l += 0.1 document.body.style.setProperty('--accent', accent.to('srgb').toString()) document.body.style.setProperty('--accent-hover', hover.to('srgb').toString()) 이 라이브러리를 사용하여 OKLCH 색상 공간에서 전체 디자인 시스템 팔레트를 생성할 수 있습니다. 이를 통해 대비와 더 나은 접근성을 예측할 수 있습니다. 실제로 접근 가능한 팔레트 생성기인 Huetone은 기본적으로 Oklab을 사용합니다 . OKLCH로 이전한 이유 요약 우리 회사에서는 이미 프로젝트에서 OKLCH를 사용 oklch()하고 있습니다. 자, 여기 현재 질문이 있습니다. OKLCH로 이동한 후 어떤 이점을 얻었습니까? 1. 가독성 향상 OKLCH를 사용하면 코드만 봐도 색상을 이해할 수 있습니다. 예를 들어, 코드의 어두움을 비교하고 대비 관련 접근성 문제를 찾을 수 있습니다. .text { /* ERROR: a 20% lightness difference is not sufficient for good contrast and a11y */ background: oklch(80% 0.02 300); color: oklch(100% 0 0); } .error { /* ERROR: colors have a slightly different hue */ background: oklch(90% 0.04 30); color: oklch(50% 0.19 27); } 2. 간단한 색상 수정 코드에서 바로 간단한 색상 수정을 적용하고 예측 가능한 결과를 얻을 수 있습니다. .button { background: oklch(50% 0.2 260); } .button:hover { background: oklch(60% 0.2 260); } 3. P3 색상 우리는 sRGB와 P3 광역 색상 모두에 동일한 색상 기능을 사용할 수 있습니다. .buy-button { background: oklch(62% 0.19 145); } @media (color-gamut: p3) { .buy-button { background: oklch(62% 0.26 145); } } 4. 디자인 팀과의 더 나은 커뮤니케이션 OKLCH는 실제 색상에 훨씬 가깝기 때문에 oklch()CSS에서 사용하면 개발자를 교육하고 커뮤니티가 색상을 전반적으로 더 잘 이해할 수 있습니다. 또한, 이는 더 큰 결과를 초래할 수 있습니다. 개발 팀과 디자인 팀 간의 의사 소통을 개선하기 위한 작은 단계입니다. 팔레트 생성기 와 같은 최신 디자인 도구 는 접근성을 높이기 위해 Oklab 또는 Lab을 사용합니다. oklch()디자이너 도구와 개발자 CSS 모두에서 동일한 것을 사용하면 모든 사람이 같은 페이지에 있게 됩니다. 5. 우리는 미래를 준비합니다 오늘 OKLCH로 이동하여 CSS에서 기본 색상 수정을 사용할 수 있는 멀지 않은 미래에 대비하고 있습니다. OKLCH는 색상 변환에 가장 적합한 색상 공간이며 이제 색상 정의에 사용하여 해당 축에 익숙해지는 것이 좋습니다. .button:hover { background: oklch(from var(--button-color) calc(l + 10%) c h) } 화성의 바람 소리를 나타내는 전파 읽어 주셔서 감사합니다!