CSS 색상 속성 — 웹 개발자를 위한 완벽 가이드

가장 기본적인 두 가지 CSS 색상 속성은 color(텍스트용)과 background-color(요소 배경용)입니다. 이 속성들은 명명된 색상, HEX, RGB, HSL 및 최신 색상 함수를 포함한 모든 유효한 CSS 색상 값을 허용합니다. color 속성은 요소의 전경 색상을 설정하며, 주로 텍스트 내용에 영향을 줍니다. 또한 자체 색상이 지정되지 않은 테두리, 텍스트 장식 및 기타 시각적 요소의 기본 색상으로도 사용됩니다. background-color 속성은 요소의 전체 콘텐츠 및 패딩 영역을 채웁니다. 배경 이미지 뒤에 위치하며, 배경 이미지가 로드되지 않을 때 대체로 자주 사용됩니다.

CSS는 기본 rgb()와 hsl()을 넘어 강력한 새 색상 함수로 발전했습니다: rgb() 함수는 이제 최신 공백 구분 구문을 지원합니다: 기존 rgb(255, 0, 0) 대신 rgb(255 0 0). 알파 투명도는 슬래시를 사용합니다: rgb(255 0 0 / 50%). hsl() 함수도 유사하게 작동합니다: hsl(210 100% 50%)은 선명한 파란색입니다. HSL은 밝기와 채도를 독립적으로 조정할 수 있어 색상 변형을 만드는 데 특히 유용합니다. 새로운 color-mix() 함수를 사용하면 두 색상을 혼합할 수 있습니다: color-mix(in srgb, red 30%, blue)는 30% 빨강과 70% 파랑의 혼합을 만듭니다. oklch()와 oklab() 함수는 지각적으로 균일한 색상 공간을 제공하여, 값의 동일한 변화가 시각적으로 동일한 색상 변화를 만들어냅니다.

CSS 그라디언트는 부드러운 색상 전환을 만들며 background-image 속성으로 설정합니다. 선형 그라디언트는 직선으로 흐릅니다: background: linear-gradient(to right, #ff0000, #0000ff)는 빨강에서 파랑으로의 수평 그라디언트를 만듭니다. 어떤 각도든 지정할 수 있습니다: linear-gradient(45deg, red, blue). 방사형 그라디언트는 중심점에서 방사됩니다: background: radial-gradient(circle, red, blue). 모양, 크기, 위치를 제어할 수 있습니다. 원추형 그라디언트는 파이 차트처럼 중심점 주위를 돌아갑니다: background: conic-gradient(red, yellow, green, blue, red). 색상 휠이나 파이 차트를 만드는 데 탁월합니다.

CSS는 투명도를 제어하는 여러 방법을 제공합니다: opacity 속성은 전체 요소와 모든 자식에 영향을 줍니다: opacity: 0.5는 모든 것을 50% 투명하게 만듭니다. 호버 효과와 트랜지션에 유용하지만 배경만 투명하게 만드는 데는 사용할 수 없습니다. 색상 값의 알파 채널은 적용된 특정 속성에만 영향을 줍니다. background-color: rgb(255 0 0 / 50%)는 텍스트는 완전히 불투명하게 유지하면서 배경만 반투명하게 만듭니다. transparent 키워드는 rgba(0, 0, 0, 0)과 같은 유효한 색상 값입니다. currentColor 키워드는 현재 텍스트 색상을 상속하며, SVG 아이콘과 테두리를 텍스트 색상과 동기화하는 데 유용합니다.

CSS 사용자 정의 속성(변수)은 최신 색상 시스템의 기반입니다. 색상을 한 번 정의하고 스타일시트 전체에서 재사용할 수 있습니다: :root { --color-primary: #3b82f6; --color-text: #1f2937; } var()로 사용합니다: color: var(--color-primary). 동적 테마를 위해 색상 함수와 결합할 때 진정한 힘이 발휘됩니다. 다크 모드에서는 변수만 재정의하면 됩니다: @media (prefers-color-scheme: dark) { :root { --color-text: #f9fafb; } } 저희 컬러 피커 도구는 모든 CSS 형식으로 색상 값을 즉시 생성합니다. 이미지에서 색상을 선택하고 필요한 정확한 CSS 코드를 얻으세요.