다른 색상의 채널과 값을 기반으로 새 색상을 만듭니다.
Chrome 119는 CSS 색상 수준 5의 매우 강력한 색상 기능입니다. 상대 색상 구문 CSS 내에서 색상을 원활하게 조작할 수 있는 원활한 경로를 만들어 다음과 같은 이점을 누릴 수 있습니다.
- Lighten
- 어둡게
- 선명하게
- 채도 낮추기
- 크로마 부스트
- 불투명도 조정
- 반전
- 보완
- 변환
- 대비
- 색상 팔레트
<ph type="x-smartling-placeholder">
- </ph>
- 단색
- 유사성
- 트라이드어
- 4자리수
- 색조 회전이 있는 단색
상대 색상 문법 앞에, 색상의 불투명도를 수정하려면 색상 채널(일반적으로 HSL)에 대한 사용자 지정 속성을 생성하고 조립합니다. 최종 색상과 최종 변형 색상으로 변환합니다. 이것은 많은 것을 관리하고 금방 번거로워질 수 있습니다.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
상대 색상 구문 뒤에 원하는 색상 공간으로 브랜드 색상을 만들 수 있습니다. 훨씬 적은 코드로 절반의 불투명도 변형을 만들 수 있습니다. 그것은 스타일과 시스템의 의도를 훨씬 쉽게 읽을 수 있습니다.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
이 게시물에서는 구문을 학습하고 일반적인 색 조작을 시연하는 데 도움이 됩니다.
동영상을 선호한다면 다음 문서의 거의 모든 내용을 이 GUI 챌린지에서 다룹니다.
구문 개요
상대적 색 문법의 목표는 다른 색깔을 입수하여
color[색상] 기본 색상을 원래 색상이라고 하며,
가 새 from 키워드 뒤에 옵니다. 브라우저는
전환하고 원래 색상을 구분하여
파트를 새 색상 정의에 사용할 변수로 사용합니다.
위의 다이어그램은 원래 색상 green이
새 색상의 색상 공간
r, g, b, alpha로 표현되는 개별 숫자로 변환되었습니다.
변수를 사용할 수 있습니다. 그러면 새 rgb() 색상 값으로 직접 사용됩니다.
이 이미지는 분류, 프로세스, 변수를 보여주지만, 색상을 변경할 수 있습니다. 변수는 변경되지 않은 색상으로 다시 배치되므로 여전히 녹색이 됩니다.
from 키워드
학습할 구문의 첫 부분은 from <color>
색상을 지정합니다. 값을 지정하기 직전에 수행됩니다. 코드는 다음과 같습니다
값 바로 앞에 from green만 추가된 예
rgb()용입니다.
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
from 키워드는 함수 표기법의 첫 번째 매개변수로 볼 때
는 색상 정의를 상대 색상으로 변환합니다. from 키워드 다음에 CSS는
색상, 즉 다음 색에 영감을 주는 색을 예상합니다.
색상 변환
간단히 말해서 녹색을 r g 및 b 채널로 변환하여 새로운 color[색상]
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
맞춤 속성의 색상
rgb from green의 내용이 매우 명확하고 이해하기 쉽습니다. 그렇기 때문에
사용자설정 속성과 상대적 색상 문법이 잘 맞습니다. 왜냐하면
from 색상의 수수께끼를 없앨 수 있습니다. 또한 일반적으로
새 속성을 만들 때 맞춤 속성 색상의 색상 형식을 알아야 합니다.
색상을 선택할 수 있습니다.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
원하는 색상 공간에서 작업
기능적 색상 표기법을 선택하여 색상 공간을 선택할 수 있습니다.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
상대 색상 구문에는 이러한 변환 단계가 있습니다. from 뒤의 색상은 다음과 같습니다.
상대적 색상의 시작 부분에 지정된 대로 색상 공간으로 변환됩니다.
color[색상] 입력과 출력이 일치하지 않아도 돼서 매우 자유롭습니다.
색상 공간을 선택하는 기능도 도움이 됩니다. 색상을 선택하는 것도 좋은 방법입니다. 색이 번갈아 가며 나타나는 '색' 교체 유형에는 선호합니다. 환경설정은 색상 형식이나 채널이 아닌 결과에 표시됩니다. 있습니다. 이는 사용 사례를 보여주는 섹션에서 훨씬 더 명확해집니다. 서로 다른 색상 공간은 서로 다른 작업에서 탁월합니다.
여러 변수를 혼합, 일치, 생략하고 반복
이 구문에 이상적이지만 흥미로운 점은 변수가 바로 원래대로 되돌리고 반복할 수 있습니다.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
변수인 불투명도
문법은 불투명도를 alpha라는 변수로 제공합니다. 선택사항입니다.
기능적 색상 표기법에서 / 뒤에 옵니다.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
변수에 calc() 또는 다른 CSS 함수 사용
지금까지는 녹색을 반복해서 만들었습니다. 학습 변환 및 디스트럭처링 단계를 숙지합니다. 현재는 시간을 낭비하지 말고 출력을 변경하여 있습니다.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
이젠 네이비야! 색조가 두 배가 되면서 120 톤으로 바뀌었습니다
240: 색상을 완전히 변경합니다. 색상을 따라 색상을 바꿨습니다.
원통형 색상 공간으로 매우 간단하게 만든 깔끔한 묘기입니다.
예: HSL
HWB
LCH
OKLCH입니다.
채널 값을 시각적으로 확인하여 사양을 추측하거나 기억하지 않아도 올바르게 계산되도록 하려면 상대적 색상 구문 채널 값 도구를 사용해 보세요. 지정한 문법에 따라 각 채널 값을 보여주므로 어떤 값을 가지고 있는지 정확하게 알 수 있습니다.
브라우저 지원 확인
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
사용 사례 및 데모
다음 예시와 사용 사례에는 달성해야 할 다양한 대체 구문이 있습니다. 찾을 수 있습니다. 변형은 색상 공간과 색상 영역에서 비롯되며 파악할 수 있습니다.
또한 많은 예에서는 by 및
to입니다. 색상이 변경된 by는 상대적인 색상 변경입니다. 인코더-디코더 아키텍처를
현재 값을 기준으로 조정합니다. 가
색상이 변경됨 to는 절대 색상 변경입니다. 사용하지 않는 변경사항의
완전히 새로운 값을 지정합니다.
모든 데모는 이 Codepen 컬렉션에서 찾을 수 있습니다.
색상을 밝게 합니다.
OKLCH, OKLAB, XYZ 또는 sRGB 색공간은 예측 가능한 결과를 얻을 수 있습니다.
일정량 밝게
다음 예 .lighten-by-25는 blue 색상을 가져와 다음으로 변환합니다.
OKLCH는 다음 값을 곱하여 l (밝기) 채널을 늘려 파란색을 밝힙니다.
현재 값을 1.25만큼 줄입니다. 이렇게 하면 파란색 밝기가 흰색으로 25% 증가합니다.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
특정 값으로 밝게
다음 예시 .lighten-to-75는 l 채널을 활용하지 않습니다.
blue를 밝게 하면 대신 값을 75%로 완전히 대체합니다.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
색상을 어둡게 합니다.
색상을 밝게 하는 데 효과적인 동일한 색상 공간은 색이 어두워지는 것을 볼 수 있습니다.
일정량만큼 어둡게
다음 예 .darken-by-25는 파란색을 다음과 같이 변환합니다.
OKLCH는 l (밝기) 채널을 25% 씩 줄여 파란색을 어둡게 합니다
값에 .75을 곱합니다. 이렇게 하면 파란색이 검은색 쪽으로 25% 증가합니다.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
지정된 값으로 어둡게
다음 예에서 .darken-to-25는 l 채널을 사용하여 어둡게 하지 않습니다.
blue 대신 값을 25%로 완전히 대체합니다.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
색상 채도 높이기
특정 양만큼 포화
다음 예시 .saturate-by-50는 hsl()의 s를 사용하여
orchid의 상대적 50%에 의한 생동감.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
특정 양으로 포화
다음 예에서는 .saturate-to-100 s 채널을
hsl()이면 원하는 채도 값을 지정합니다. 이 예에서
채도는 100%으로 올라갑니다.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
색상의 채도 낮추기
일정량만큼 포화도 낮추기
다음 예시 .desaturate-by-half는 hsl()의 s를 사용하여 감소합니다.
indigo의 채도를 절반으로 높입니다.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
특정 값으로 채도 낮추기
일정량만큼 채도를 낮추지 않고 원하는 수준으로 포화율을 낮출 수 있음
값으로 사용됩니다. 다음 예 .desaturate-to-25는
indigo이지만 채도를 25%로 설정합니다.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
크로마 효과
이 효과는 색상을 채도하는 것과 비슷하지만
있습니다. 첫째, saturation 변경이 아닌 chroma 변경사항입니다.
왜냐하면 HDR(High Dynamic Range)로 부스트할 수 있는 색상 공간은
조정할 수 있습니다. chroma가 있는 색상 공간은 HDR(High Dynamic Range)입니다.
작성자가 채도보다 색상 선명도를 더 높일 수 있습니다.
할 수도 있습니다.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
색상의 불투명도 조정
색상의 반투명 변형을 만드는 것이 가장 일반적인 색상 중 하나입니다. 조정 작업을 수행하는지 살펴봤습니다. 이 소개에 있는 예를 참조하세요. 놓쳤다면 문제 영역을 자세히 기술한 것입니다.
일정량만큼 불투명도 조정
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
불투명도를 특정 값으로 조정
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
색상 반전
색상 반전은 색상 라이브러리에서 볼 수 있는 일반적인 색상 조정 함수입니다. 이를 수행하는 한 가지 방법은 색상을 RGB로 변환하고 각 값을 1부터 시작하는 채널 값을 비교합니다.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
색상 보완
색상을 반전하는 것이 아니라 보완하는 것이 목표라면
아마도 회전을 원하는 대로 하는 것입니다. 색이 칠해진 공간을 선택해
그런 다음 calc()를 사용하여 원하는 만큼 색조를 회전합니다.
색상의 보완 찾기는 반바퀴 회전으로 완료됩니다. 이 경우
180로 h 채널에서 더하거나 빼서 결과를 얻을 수 있습니다.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
색상 대비
접근 가능한 색상 명암비를 달성하는 방법으로는 L*를 고려하십시오. (Lstar).
이는 대략적으로 인지하는 균일한 밝기(L) 채널을
calc()의 LCH 및 OKLCH 낮음, 중간 또는 높음의 타겟팅 여부에 따라 다름
대조적으로 L* 델타는 약 ~40, ~50 또는 ~60입니다.
이 기법은 LCH 또는 OKLCH의 모든 색조에서 잘 작동합니다.
더 어두운 색상 대비
.well-contrasting-darker-color 클래스는 델타 60으로 L* 를 보여줍니다.
원래 색상이 어두운 색상 (낮은 값의 밝기)이므로 60% (.6)가 추가됩니다.
밝기 채널로 이동하겠습니다. 이 기법은 대조가 잘 되고
텍스트 색상을 사용할 수 있습니다.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
더 밝은 색상 대비
.well-contrasting-lighter-color 클래스는 델타 60%로 L* 를 보여줍니다.
있습니다. 원래 색상이 밝은 색상 (높은 밝기 밝기)이므로 .60은
0과 같아야 합니다.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
색상 팔레트
상대적 색상 구문은 색상 팔레트를 만드는 데 매우 유용합니다. 특히 사용할 수 있는 색상 공간의 수로 인해 유용하고 강력합니다. 다음 모든 예시에서 OKLCH를 사용합니다. 밝기 채널이 안정적이고, 색조가 강하기 때문이죠. 부작용 없이 채널을 순환할 수 있습니다. 마지막 예는 밝기와 색조 회전을 조합하여 더욱 흥미롭게 만들 수 있습니다. 결과입니다!
예시 소스 코드를 열고 --base-color를
이러한 팔레트가 얼마나 역동적인지
확인해 볼 수 있습니다. 재밌어!
동영상이 마음에 든다면 YouTube에서 OKLCH로 CSS로 색상 팔레트 만들기에 대한 자세한 정보를 안내해 드리겠습니다.
단색 팔레트
단색 팔레트를 만드는 것은 모두 동일한 색조로 팔레트를 만드는 것이지만 빛과 어두움의 변화를 나타냅니다 중간 색상은 소스 색상입니다. 두 개의 밝은 변형과 어두운 변형을 두 개 또는 있습니다
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
상대적 색상 구문과 OKLCH로 만든 다양한 팔레트를 사용해 보세요.
무료 CSS 변수 라이브러리인 Open Props에서는 쉽게 사용할 수 있도록 하는 다양한 색상 팔레트를 가져올 수 있습니다 또한 모두 맞춤설정할 수 있는 색상으로 제작되었으며, 색을 입혀 팔레트를 만들어 냅니다.
유사한 팔레트
OKLCH 및 HSL을 사용하면 색조 회전이 매우 용이하기 때문에 유사한 색상 팔레트. 원하는 만큼 색조를 회전하고 기본 색상을 변경합니다. 브라우저에서 새로운 팔레트가 만들어집니다.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
3가지 팔레트
보완 색상과 비슷한 3가지 색상 팔레트
은 기본 색상을 기반으로 상반되지만 조화로운 색조 회전입니다. 여기서
보색은 직선과 같이 색상의 반대쪽에 있습니다.
3색 팔레트는 컬러 휠 중앙을 통해 그려지며
선의 삼각형, 기본 색상에서 균등하게 회전된 2개의 색상을 찾습니다.
이렇게 하려면 색조 120deg을 회전합니다.
이것은 색 이론을 약간 단순화한 것이지만 더 복잡한 3가지 팔레트로 시작하실 수 있습니다.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
4차원 팔레트
4가지 색상표는 색상환을 빙 둘러서 균등하게 분할되어 팔레트를 예로 들 수 있습니다. 그것도 생각해 볼 수 있습니다. 빛의 조합으로 구성됩니다. 현명하게 사용하면 매우 의미가 있을 수 있습니다.
이것은 색 이론을 약간 단순화한 것이지만 관심이 있다면 좀 더 복잡한 트레라디크 팔레트를 시작해 보세요.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
약간의 색조 회전의 단색
많은 색상 전문가가 이러한 속임수를 써 버립니다. 문제는 단색 색상 스케일은 꽤 지루할 수 있습니다. 이 문제를 해결하려면 밝기가 변경될 때 새 색상으로 조금씩 회전합니다.
다음 예에서는 각 견본의 밝기를 10% 낮추고 10도씩 낮춥니다 그 결과 남색의 핫핑크 팔레트가 그라데이션처럼 자연스럽게 혼합됩니다.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
OKLCH 및 색조 회전으로 제작된 이 리더보드를 사용해 보세요
다음 리더보드 인터페이스는 이러한 색조 회전 전략을 사용합니다. 각 목록
항목은 문서의 색인을 --i라는 변수로 추적합니다. 이 색인은
크로마, 밝기, 색조를 조정하는 데
사용됩니다 조정액이 5% 이거나
5deg는 딥핑크를 사용한 위의 예보다 훨씬 미묘하므로
'리더보드'의 색깔이 변할 수 있는 이유를
우아함.
리더보드 아래의 슬라이더에서 색조를 변경하고 상대적인 색상 문법으로 아름다운 색상 순간을 만들어 보세요.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}