Color Properties

불투명도

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

Opacity is the inverse of transparency. In CSS, opacity can be set using the opacity property (which affects the entire element and its children) or using alpha-channel color values like rgba() and hsla(). Opacity is essential for creating layered visual effects, overlay patterns, glass-morphism designs, and subtle background tints. When compositing semi-transparent colors, the visible result depends on both the foreground color and whatever is behind it, following the alpha compositing formula defined by Porter and Duff.

직접 해보기

색상 변환기

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 색상 애니메이션입니다.