color-mix() 및 상대 색상 구문
최신 CSS 색상 함수를 사용해 색상을 혼합하고 색상 변형을 만듭니다.
color-mix() 및 상대 색상 구문은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
color-mix() 함수
color-mix()는 지정된 색상 공간에서 두 색상을 혼합합니다. Sass 또는 JavaScript 없이 설계 토큰을 기반으로 한 색상 변형을 만들 수 있습니다.
<button class="button-hover">Hover-mixed button</button>color-mix() 문법
전체 문법: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). 백분율의 합은 100%가 되어야 합니다.
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>color-mix()의 색상 공간
색상 공간에 따라 혼합 결과가 달라집니다. oklch와 같은 최신 지각 기반 색상 공간은 srgb보다 시각적으로 더 균일한 결과를 만듭니다:
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>color-mix()로 색상 척도 만들기
하나의 브랜드 색상으로 일관된 색상 팔레트를 만드세요:
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>상대 색상 문법
상대 색상을 사용하면 특정 채널을 수정하여 기존 색상에서 새로운 색상을 만들 수 있습니다. from 키워드를 사용하세요:
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>상대 색상으로 투명한 변형 만들기
RGB 값을 몰라도 브랜드 색상의 투명한 버전을 만들 수 있습니다:
<div class="overlay">Overlay</div>밝게 만들기와 어둡게 만들기
oklch에서 밝기를 더하거나 빼서 색조와 음영을 만드세요:
<div class="card demo-active">Card</div>oklch 색상 공간 개요
OKLCH는 지각적으로 균일한 색상 공간입니다:
l— 밝기(0~1)c— 채도(0~0.4 이상)h— 색상 각도(0~360)
l을 조정하면 예측 가능하게 균일한 색조와 음영을 만들 수 있습니다.
브라우저 지원
color-mix()는 Chrome 111 이상, Firefox 113 이상, Safari 16.2 이상에서 지원됩니다. 상대 색상 문법(from 키워드)은 Chrome 119 이상, Safari 16.4 이상, Firefox 128 이상에서 지원됩니다. 현재 지원 현황은 caniuse.com에서 확인하세요.
color-contrast()의 향후 기능
color-contrast()는 주어진 배경에 대해 가장 읽기 쉬운 색상을 목록에서 자동으로 선택하는 제안된 함수입니다. 아직 브라우저에서 지원되지는 않지만 접근성을 중심으로 한 테마 설정을 위해 설계되었습니다.
빠른 확인
어떤 color-mix() 색상 공간이 지각적으로 가장 균일한 혼합 결과를 만드나요?
복습
color-mix(in oklch, color1 %, color2 %)는 지정된 공간에서 색상을 혼합하므로 하나의 브랜드 색상으로 색조, 음영 및 투명한 변형을 만들기에 적합합니다. 상대 색상 문법(oklch(from var(--brand) calc(l+0.2) c h))을 사용하면 개별 채널을 수정하여 새로운 색상을 만들 수 있습니다. 지각적으로 균일한 결과를 얻기에는 OKLCH가 가장 적합한 색상 공간입니다.
자주 묻는 질문
“color-mix() 및 상대 색상 구문” 강의는 무료인가요?
네 — “color-mix() 및 상대 색상 구문” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“color-mix() 및 상대 색상 구문”에서 뭘 배우나요?
최신 CSS 색상 함수를 사용해 색상을 혼합하고 색상 변형을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“color-mix() 및 상대 색상 구문” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 동적 계산을 위한 calc()
- 유동적 값을 위한 min(), max() 및 clamp()
- Grid에서 repeat() 및 minmax()
- color-mix() 및 상대 색상 구문