CSS color() 함수

정의와 사용법

CSS의 color() 함수는 특정 색 공간에서 색상을 지정할 수 있습니다。

실례

예제 1

display-p3 색 공간에서 배경 색상(투명도 0.3)을 지정합니다：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

직접 시험해 보세요

예제 2

상대 값 문법 사용하기:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

직접 시험해 보세요

CSS 문법

절대 값 문법

color(colorspace c1 c2 c3 / A)
값 설명
colorspace

필수 사항입니다. 사전 정의된 색 공간 중 하나를 정의합니다：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

필수 사항입니다. 색 공간의 구성 요소 값을 나타냅니다。

각 값은 숫자(0에서 1 사이), 백분율(0%에서 100% 사이) 또는 키워드 none로 작성할 수 있습니다。
/ A

선택 사항입니다. 색의 투명도 채널 값(0은 완전 투명, 100은 완전 불투명을 의미합니다).

none(투명도 채널을 의미)를 사용할 수도 있습니다。

기본 값은 100입니다。

상대 값 문법

color(from color colorspace c1 c2 c3 / A)
값 설명
from color

키워드 from으로 시작하고 원래 색의 색 값이 따릅니다。

이는 상대 색이 기반으로 한 원래 색입니다。
colorspace

필수 사항입니다. 사전 정의된 색 공간 중 하나를 정의합니다：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

필수 사항입니다. 색 공간의 구성 요소 값을 나타냅니다。

각 값은 숫자(0에서 1 사이), 백분율(0%에서 100% 사이) 또는 키워드 none로 작성할 수 있습니다。
/ A

선택 사항입니다. 색의 투명도 채널 값(0은 완전 투명, 100은 완전 불투명을 의미합니다).

none(투명도 채널을 의미)를 사용할 수도 있습니다。

기본 값은 100입니다。

기술 세부 사항

버전： CSS Color Module Level 5

브라우저 지원

표格에서의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
111 111 113 15 97

관련 페이지

참조:CSS 색상