Color Properties

불투명도

색상 또는 요소가 뒤의 콘텐츠를 가리는 정도로, 100%는 완전 불투명, 0%는 완전 투명.

불투명도는 투명도의 반대 개념입니다. CSS에서 불투명도는 opacity 속성(요소 전체와 그 자식 요소에 영향을 줌)이나 rgba(), hsla() 같은 알파 채널 색상값을 이용해 설정할 수 있습니다. 불투명도는 레이어를 쌓은 시각 효과, 오버레이 패턴, 글래스모피즘 디자인, 미묘한 배경 색조를 만드는 데 필수적입니다. 반투명한 색을 합성할 때 눈에 보이는 결과는 전경색과 그 뒤에 있는 것에 따라 달라지며, 이는 포터와 더프가 정의한 알파 합성 공식을 따릅니다.

직접 해보기

색상 변환기

HEX, RGB, HSL, HSV, CMYK, OKLCH 색상 형식 간에 즉시 변환합니다.

관련 글

CSS color-mix(): 브라우저에서 기본적으로 색상 혼합

브라우저에서 기본적으로 색상을 혼합하는 CSS color-mix()를 알아보세요. 구문, 색상 공간, 실제 사용 사례를 마스터하고 JavaScript 없이 동적 팔레트를 만드세요.

처음부터 색상 선택기 웹 구성 요소 구축

웹 구성 요소로 액세스 가능한 색상 선택기를 구축합니다. Shadow DOM을 사용하여 캔버스 렌더링, 색조 슬라이더, 알파 채널 및 사용자 정의 이벤트를 구현합니다.

에메랄드 vs 제이드 vs 포레스트 그린: 녹색 비교 가이드

에메랄드(#50C878), 옥(#00A86B), 포레스트 그린(#228B22)을 비교해보세요. 인기 있는 녹색 색상 간의 시각적 및 16진수 코드 차이점을 알아보세요.

CSS light-dark() 기능: 기본 테마 전환

기본 테마 전환에는 CSS light-dark()를 사용하세요. 밝은 모드와 어두운 모드 색상을 위해 JavaScript 토글과 미디어 쿼리를 단일 CSS 함수로 대체합니다.

색상 분리(Color Separation) 설명: 인쇄용 파일 준비하기

CMYK 색상 분리, 별색 플레이트, 트래핑, 레지스트레이션 마크를 이해하세요. 올바른 색상 분리로 인쇄 준비 파일을 준비하세요.

CSS의 색상 애니메이션: 전환 및 키프레임

전환, 키프레임 애니메이션, HSL 색조 회전, 인지적 부드러움을 위한 OKLCH 보간 및 성능 모범 사례를 갖춘 마스터 CSS 색상 애니메이션입니다.