Functions

Editing

repeating-conic-gradient(<conic-gradient-syntax>)

설정된 <conic-gradient> 타입의 값을 중심점을 기준으로 회전하는 방식으로 반복 그라데이션을 생성한다.

매개 변수

conic-gradient() 함수의 매개 변수 타입을 나타낸다.

타입에서 이 생략되지 않고 설정되어야 반복 결과가 나온다.

예:

#FF0000 15deg, #FFFF00 45deg

 

  • CSS Color Module Level 4
    [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>
Details

포함된 타입

  • <angle>

    0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

    <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

    선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

    • grad

      400grad(그라디안)은 완전한 원을 만든다.

    • rad

      2π(라디안)이 완전한 원을 만든다.

    • turn

      1turn(턴)이 완전한 원을 만든다.

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

  • <angular-color-stop-list>

    회전 방식의 그라데이션에서 색이 지정될 회전 위치(<angular-color-hint>)를 선택적으로 가질 수 있는 색상 값의 목록을 나타낸다. 주의할 점은 색이 지정되는 위치는 색의 범위가 포함되는 <angular-color-stop>과는 다르다.

    • CSS Images Module Level 4
      <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#

      첫 번째 <angular-color-stop>은 <angular-color-hint>를 가질 수 없음을 유의한다.

      Example
    Details

    포함된 타입

    • <angular-color-hint>

      회전 방식의 그라데이션에서 색상의 회전 위치를 나타낸다. 각도(<angle>)이거나 퍼센트(<percentage>) 값을 가질 수 있다.

      • CSS Images Module Level 4
        <angle-percentage>
      Details

      포함된 타입

      • <angle-percentage>

        각도를 나타내는 <angle>과 상대적 값을 나타내는 <percentage> 모두 가능한 타입을 나타낸다.

        • CSS Values and Units Module Level 4
          <angle> | <percentage>
        Details

        포함된 타입

        • <angle>

          0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

          <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

          선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<angle>]
        • <percentage>

          어떠한 기준으로 부터 백분율로 표현한다.

    • <angular-color-stop>

      회전 방식의 그라데이션에서 회전 위치에 지정할 색상 값을 나타낸다. 선택적으로 색상 값 뒤에 범위를 지정할 수 있다.

      • CSS Images Module Level 4
        <color> && <color-stop-angle>?

        색상(<color>) 설정하고 선택적으로 지정된 색상의 범위를 각도(<angle>) 또는 퍼센트지(<percentage>)로 지정한다.

      Details

      포함된 타입

      • <color-stop-angle>

        회전 각도를 사용해서 색상의 범위를 지정한 값을 나타낸다.

        • CSS Images Module Level 4
          <angle-percentage>{1,2}

          <angle> 또는 <percentage> 값을 하나 또는 두 개를 연속해서 작성한다. 하나인 경우에 그 위치를 기준으로 이전 색과 다음 색이 만나면서 그라데이션을 생성한다. 두 개일 경우에는 차지하는 범위가 명시적으로 지정된다. 예를 들어서 red 150deg 200deg 값은 빨간 색이 150도에서 200도 사이를 영역으로 갖는 그라데이션을 생성한다.

          Example
        Details

        포함된 타입

        • <angle-percentage>

          각도를 나타내는 <angle>과 상대적 값을 나타내는 <percentage> 모두 가능한 타입을 나타낸다.

          • CSS Values and Units Module Level 4
            <angle> | <percentage>
          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<angle-percentage>]
      • <color>

        sRGB 색상 공간의 색상값을 나타낸다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다.  색을 생성하는 방법은 UA 표준 색상명, 16진수 값 그리고 함수로는 rgb(), rgba(), hsl(), hsla(), hwb()color(),lab(), lch(), oklab(), oklch() 함수가 있다.

        <color> 타입은 다음과 같은 방법으로 값을 정의한다.

        키워드
        사용 가능한 색상 명(예: transparent, aqua 등)으로 색상 정의
        RGB 3차원 좌표계
        #+16진수 표기법 또는 rgb(), rgba() 함수에서 색상 정의
        HSL 실린더형 좌표계
        hsl(), hsla() 함수에서 색상 정의
        CIE(국제조명위원회) 색 공간
        lab(), lch(), oklab(), oklch() 함수에서 색상 정의
        사전 정의된 색 공간
        color() 함수를 이용한 sRGB, srgb-linear, display-p3,a98-rgb, prophoto-rgb, rec2020, xyz-d50, xyz-d65, xyz 색 공간에서 색상 정의
        • CSS Color Module Level 4
          <absolute-color-base> | currentcolor | <system-color>
        Details

        포함된 타입

        • <absolute-color-base>

          기본적인 절대 색상 값을 나타낸다. 웹이 전통적으로 사용해 왔던 색상값이다.

          • CSS Color Module Level 4
            <hex-color> | <absolute-color-function> | <named-color> | transparent
          Details

          포함된 타입

          • <absolute-color-function>

            CSS에 내장된 색상을 생성하는 함수가 반환하는 값을 나타낸다. 초기의 rgb() 함수부터 현재 다양한 함수가 존재하고 있다.

            • CSS Color Module Level 4
              <rgb()> | <hsl()> | <hwb()> | <color()> | lab() | lch() | oklab() | oklch()
            Details

            포함된 타입

            • <color()>

              color() 함수의 인수를 나타내는 타입이다.

              • CSS Color Module Level 4
                color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

                <colorspace-params>은 <predefined-rgb>(또는< xyz-space>) 값과 RGB 값을 차례대로 지정한다. RGB 각각의 값의 범위는 [0,1] 범위의 <number>이거나 <percentage> 값을 갖는다. <predefined-rgb>< xyz-space>로 설정 가능한 값은 각각의 타입에 대한 내용을 참고하기 바란다.

                (예) RGB 값을 <number>로 지정하는 경우

                srgb 0.5 0 0.78

                <alpha-value>은 투명도 값을 선택적으로 지정한다.

                sRGB 색 공간에서 색상 지정

                sRGB 색 공간에서 색상과 투명도 지정

                display-p3 색 공간에서 〈pencentage〉를 사용하여 색과 투명도 지정
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details

                포함된 타입

                • <number>

                  정수 또는 실수를 표현한다.

                • <percentage>

                  어떠한 기준으로 부터 백분율로 표현한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
              • <colorspace-params>

                color() 함수에서 사용 가능한 매개 변수의 데이터 타입을 나타낸다.  RGB 계열의 미리 정의된 색 공간(predefined color spaces)에서 표현되는 색상 값이거나 XYZ 색 공간(xyz color space)의 색상 값을 나타낸다.

                • CSS Color Module Level 4
                  [ <predefined-rgb-params> | <xyz-params>]
                Details

                포함된 타입

                • <predefined-rgb-params>

                  color() 함수의 매개 변수 타입중 하나이다. 미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)와 함께 Red, Green, Blue가 지정된 색 공간에서 가지는 값을 <number> 또는 <percentage>로 표현된다.

                  • CSS Color Module Level 4
                    <predefined-rgb> [ <number> | <percentage> | none ]{3}
                    Example
                  Details

                  포함된 타입

                  • <number>

                    정수 또는 실수를 표현한다.

                    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
                  • <percentage>

                    어떠한 기준으로 부터 백분율로 표현한다.

                  • <predefined-rgb>

                    미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)를 나타낸다.

                    • CSS Color Module Level 4
                      srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
                    Details

                    사용되는 키워드

                    • a98-rgb

                      a98-rgb 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. 전달 곡선은 감마 함수이며 1/2.2에 가깝지만 정확하지는 않다.

                    • display-p3

                      CSS Color Module Level 4

                      display-p3 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 영역(gamut)의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. DCI-P3와 동일한 기본 색도를 사용하지만 화이트 포인트는 D65이며 sRGB와 동일한 전달 곡선을 사용한다.

                      최신 디스플레이, TV, 노트북과 휴대폰 화면은 display-p3 색 영역의 전부 또는 거의 전부를 표시할 수 있다.

                    • prophoto-rgb

                      CSS Color Module Level 4

                      prophoto-rgb 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내 색은 세 가지 구성 요소가 모두 [0,1] 범위에 있다. 전달 곡선은 1/1.8 값의 감마 함수이며 검은색에 가까운 작은 선형 부분이다. 흰색 점은 CIE Lab에서 사용하는 것과 동일한 D50이다. 따라서 CIE Lab으로 변환할 때 색채 적응 단계가 필요하지 않다.

                      prophoto-rgb 색 공간은 물리적으로 구현할 수 없는 고채도의 원색을 사용한다. 이는 넓은 색 영역을 허용하고 특히 색조 조작에 따른 색조 변화를 최소화하기 위해 선택되었다. 디지털 사진에서 사진 이미지의 아카이브 버전을 위한 넓은 색 영역의 색 공간으로 자주 사용된다. prophoto-rgb 색 공간을 사용하면 CSS에서 동일한 RGB 값을 가진 이미지의 색상과 일치하는 색상을 지정할 수 있다.

                    • rec2020

                      CSS Color Module Level 4

                      rec2020 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역의 색은 [0,1] 범위의 세 가지 구성 요소를 모두 갖는다. ITU 참조 2020은 초고화질, 4K 및 8K TV에 사용된다.

                      원색은 물리적으로 구현할 수 있지만 스펙트럼 궤적에 매우 가깝기 때문에 어려움이 있다.

                      현재 디스플레이는 rec2020의 전체 영역을 재현할 수 없다. 디스플레이가 개선되고 시간이 지나면서 적용 범위가 늘어날 것으로 예상된다.

                    • srgb

                      srgb[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

                      [SRGB]는 인코딩과 일반의 두 가지 보기 조건을 지정하며 모든 레거시 색상 기능에 사용되는 CSS의 기본 컬러 스페이스이다.

                    • srgb-linear

                      srgb-linear[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

                  공통적으로 사용되는 값

                  다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

                  • none

                    어떠한 값도 설정하지 않음을 나타낸다.

                • <xyz-params>

                  color() 함수의 매개 변수 타입중 하나이다. XYZ 계열의 색 공간(xyz color space)에서 색상을 설정한 값을 나타낸다. XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 지정하고  x, yz 값으로 색상을 나타낸다.

                  • CSS Color Module Level 4
                    <xyz-space> [ <number> | <percentage> | none ]{3}
                    Example
                  Details

                  포함된 타입

                  • <number>

                    정수 또는 실수를 표현한다.

                  • <percentage>

                    어떠한 기준으로 부터 백분율로 표현한다.

                    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
                  • <xyz-space>

                    XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 나타낸다.

                    • CSS Color Module Level 4
                      xyz | xyz-d50 | xyz-d65
                    Details

                    사용되는 키워드

                    • xyz

                      xyz 컬러 스페이스는 X, Y 및 Z 값을 나타내는 세 개의 숫자 매개 변수를 허용한다. CIE XYZ[COLORIMETRY] 컬러 스페이스를 나타내며 확산 흰색의 휘도(Y)가 1.0이 되도록 조정된다. 필요한 경우 기준 흰색에 반음계로 적용된다.

                    • xyz-d50

                      xyz 컬러 스페이스에서 기준 흰색이 D50이다.

                    • xyz-d65

                      xyz 컬러 스페이스에서 기준 흰색이 D65이다.

                  공통적으로 사용되는 값

                  다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

                  • none

                    어떠한 값도 설정하지 않음을 나타낸다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <hsl()>

              hsl() 함수의 매개 변수를 나타낸다. 레거시로 색상(hue), 채도(saturation), 밝기(lightness) 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

              • CSS Color Module Level 4
                hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

                <hue>는 색상환에서 만들고자하는 색의 각도 값을 입력한다. 0360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.

                <percentage> 값은 각각 채도와  밝기를 나타낸다. 채도(saturation)의 경우 0%은 회색, 100%은 원색으로 만든다. 밝기(lightness)의 경우 0%은 검정, 100%은 흰색으로 만든다.

                구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

              • CSS Color Module Level 3Legacy
                hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
              • <hue>

                색상환에서 각도로 표시되는 색조 값을 나타낸다.

                • CSS Color Module Level 4
                  <number> | <angle>
                Details

                포함된 타입

                • <angle>

                  0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

                  <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

                  선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<angle>]
                • <number>

                  정수 또는 실수를 표현한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <hwb()>

              hwb() 함수의 매개변수를 나타낸다.

              • CSS Color Module Level 4
                hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )

                <hue>는 색상환에서 만들고자 하는 색의 각도 값을 입력한다. 0360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.

                <percentage> 값은 각각 백색률(whiteness)과  흑색률(blackness) 값이며 혼합 정도를 나타낸다.

                구문에 따라 추가적으로 / 뒤에<alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.

              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details

                포함된 타입

                • <number>

                  정수 또는 실수를 표현한다.

                • <percentage>

                  어떠한 기준으로 부터 백분율로 표현한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
              • <hue>

                색상환에서 각도로 표시되는 색조 값을 나타낸다.

                • CSS Color Module Level 4
                  <number> | <angle>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<hue>]
              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <lab()>

              lab() 함수의 매개변수를 나타낸다. 

              • CSS Color Module Level 4
                lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
                첫 번째 인수 L의 경우(명도): <percentage> | <number> | none
                0% = 0.0, 100% = 100.0
                두 번째 인수 a축의 거리, 세 번째 인수 b축의 거리: <percentage> | <number> | none
                -100% = -125, 100% = 125
                음수가 허용되며 이론적으로 무제한이나 실제로는 ±160을 초과하지 않는다.
                네 번째 선택 사항 투명도 <alpha-value> | none
                /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
                Lab 색 공간에서 색과 투명도 지정
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
              • <number>

                정수 또는 실수를 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <lch()>

              lch() 함수의 매개 변수를 나타낸다. 

              • CSS Color Module Level 4
                lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
                첫 번째 인수 L(명도)의 경우: <percentage> | <number> | none
                0% = 0.0, 100% = 100.0
                두 번째 인수 c(채도)의 경우: <percentage> | <number> | none
                0% = 0, 100% = 150
                0부터 최대 230까지(음수인 경우 0으로 고정됨)
                세 번째 H(색조)의 경우: <hue> | none
                색조 각도를 <angle> 또는 <number>로 지정한다. 설정 값에 대한 자세한 사항은 위의 LCH Space 그림을 참고한다.
                네 번째 선택 사항 투명도<alpha-value> | none
                /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
                Lch 색 공간에서 색과 투명도 지정
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details

                포함된 타입

                • <number>

                  정수 또는 실수를 표현한다.

                • <percentage>

                  어떠한 기준으로 부터 백분율로 표현한다.

              • <hue>

                색상환에서 각도로 표시되는 색조 값을 나타낸다.

                • CSS Color Module Level 4
                  <number> | <angle>
                Details

                포함된 타입

                • <angle>

                  0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

                  <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

                  선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<angle>]
                • <number>

                  정수 또는 실수를 표현한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
              • <number>

                정수 또는 실수를 표현한다.

              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <oklab()>

              oklab() 함수의 매개 변수를 나타낸다. 

              • CSS Color Module Level 4
                oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
                첫 번째 인수 L의 경우(밝기): <percentage> | <number> | none
                0% = 0.0100% = 1.0
                0%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 a와 b 성분은 무효가 된다. 0%보다 작은 값은 계산된 시점에서 0%로 고정되고 100%보다 큰 값은 계산된 시점에서 100%로 고정된다.
                두 번째 인수 a의 경우(a축상의 거리), 세 번째 인수 b의 경우(b축상의 거리): <percentage> | <number> | none
                -100% = -0.4100% = 0.4
                Oklab 색 공간에서 차례대로 "a"축, "b"축의 거리 값이다. 양수와 음수 모두 허용한다. W3C 사양에는 이론적으로 제한이 없으나 실제로는 ±0.5를 초과하지 않는다고 정의했다.
                네 번째 선택 사항 투명도: <alpha-value> | none
                /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
                개선된 Lab 색 공간에서 색과 투명도 지정
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
              • <number>

                정수 또는 실수를 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <oklch()>

              oklch() 함수의 매개 변수를 나타낸다. 

              • CSS Color Module Level 4
                oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
                첫 번째 인수 L의 경우(밝기): <percentage> | <number> | none
                0% = 0.0100% = 1.0
                0%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 색조와 채도는 모두 무효가 된다. 0%보다 작은 값은 0%로 고정되고 100%보다 큰 값은 100%로 고정된다.
                두 번째 인수 c의 경우(채도): <percentage> | <number> | none
                0% = 0100% = 0.4
                Oklab 색 공간에서 "a"축과 "b"축의 거리 값이다. 양수와 음수 모두 허용하나 음수의 경우에는 계산된 값 시점에 0으로 고정된다. W3C 사양에는 이론적으로 제한이 없으나 실제로는 0.5를 초과하지 않는다고 정의했다. 채도가 0인 경우에는  색조 값은 무효가 된다.
                세 번째 H(hue)의 경우(색조): <hue> | none
                색조 각도를 또는 로 지정한다. 설정 각도에 대한 자세한 사항은 위의 Lch Space 그림을 참고한다.
                네 번째 선택 사항 투명도: <alpha-value> | none
                /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
                개선된 Lab 색 공간에서 색과 투명도 지정
              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details

                포함된 타입

                • <number>

                  정수 또는 실수를 표현한다.

                • <percentage>

                  어떠한 기준으로 부터 백분율로 표현한다.

                  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
              • <hue>

                색상환에서 각도로 표시되는 색조 값을 나타낸다.

                • CSS Color Module Level 4
                  <number> | <angle>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<hue>]
              • <number>

                정수 또는 실수를 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <rgb()>

              rgb() 함수의 매개 변수를 나타낸다. 레거시로 red, green, blue 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

              • CSS Color Module Level 4
                rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? )

                <percentage>는 0~255 범위를 백분율로 지정할 수 있다.

                구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

              • CSS Color Module Level 4
                rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? )

                <number>는 red, green, blue 값을 각각  0~255 범위 내에서 지정이 가능하다. 

                구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

              • CSS Color Module Level 4Legacy
                rgb( <percentage>#{3} , <alpha-value>? )

                레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

              • CSS Color Module Level 4Legacy
                rgb( <number>#{3} , <alpha-value>? )

                레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

              Details

              포함된 타입

              • <alpha-value>

                0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

                • <number> | <percentage>
                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
              • <number>

                정수 또는 실수를 표현한다.

              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            관련 함수

            모든 함수를 표시하지 않을 수도 있다.

          • <hex-color>

            값이 3, 4, 6 또는 8개의 16진수로 구성된 <hash-token> 토큰이다. 즉 16진수 색상은 해시 문자 '#' 다음에 숫자[0-9],  대소문자 구분이 없는 알파벳 문자[a-f]의 조합으로 작성된다.

            헥스(hex)로 RGB 색상을 설정하는 몇 개의 자리수(digits)는 다음과 같다.

            6 digits

            6개의 자리로 표현되는 값은 각 2개씩의 코드 조각이 16진수로 표현되는 RGB 10진수 색상값이다.

            다음 색상은 모두 동일하게 빨간색을 표현한다. FF는 10진수로 255이고 00은 최소값인 0을 나타낸다.
            color: #FF0000;
            color: rgb(255, 0, 0);

            8 digits

            8개의 자리로 표현되는 값은 6개의 자리로 표현되는 RGB 색상과 동일하고 나머지 2개의 코드는 투명도(알파채널)를 16진수 표현한 것이다.

            다음 색상은 모두 동일하게 0.8의 투명도를 갖는 빨간색을 표현한다.
            color: #FF0000CC;
            color: rgb(255 0 0 / 80%);

            3 digits

            6개의 자리로 표현되는 색상값을 약식으로 표현한다. 3개의 각 코드는 각 RGB 채널의 값을 나타낸다. F는 최대값을 나타내고 0은 최소값을 나타낸다. 모든 6개의 자리로 표현되는 색을 약식으로 표현할 수 없다는 점을 알아둬야 한다.

            다음 색상은 모두 동일하게 흰색을 표현한다.
            color: #FFFFFF;
            color: #FFF;

            4 digits

            8개의 자리로 표현되는 색상값을 약식으로 표현한다. 기본적으로 3 자리로 표현하는 방식과 동일하며 4번째 값은 투명도(알파 채널)를 지정한다.

            다음 색상은 모두 동일하게 80%의 투명도를 갖는 흰색을 표현한다.
            color: #FFFFFFCC;
            color: #FFFC;
          • <named-color>

            일반적인 색상을 더 쉽게 쓰고 읽을 수 있도록 이름이 지정된 색상 세트를 나타낸다. <ident>로 작성되며 <color>가 필요한 모든 곳에서 허용된다. 모든 색상 키워드는 ASCII 대소문자를 구분하지 않는다.

            Details

            사용되는 키워드

              •  

                aliceblue

              •  

                antiquewhite

              •  

                aqua

              •  

                aquamarine

              •  

                azure

              •  

                beige

              •  

                bisque

              •  

                black

              •  

                blanchedalmond

              •  

                blue

              •  

                blueviolet

              •  

                brown

              •  

                burlywood

              •  

                cadetblue

              •  

                chartreuse

              •  

                chocolate

              •  

                coral

              •  

                cornflowerblue

              •  

                cornsilk

              •  

                cyan

              •  

                darkblue

              •  

                darkcyan

              •  

                darkgoldenrod

              •  

                darkgray

              •  

                darkgreen

              •  

                darkkhaki

              •  

                darkmagenta

              •  

                darkolivegreen

              •  

                darkorange

              •  

                darkorchid

              •  

                darkred

              •  

                darksalmon

              •  

                darkseagreen

              •  

                darkslateblue

              •  

                darkslategray

              •  

                darkturquoise

              •  

                darkviolet

              •  

                deeppink

              •  

                deepskyblue

              •  

                dimgray

              •  

                dodgerblue

              •  

                firebrick

              •  

                floralwhite

              •  

                forestgreen

              •  

                fuchsia

              •  

                gainsboro

              •  

                ghostwhite

              •  

                gold

              •  

                goldenrod

              •  

                gray

              •  

                green

              •  

                greenyellow

              •  

                honeydew

              •  

                hotpink

              •  

                indianred

              •  

                indigo

              •  

                ivory

              •  

                khaki

              •  

                lavender

              •  

                lavenderblush

              •  

                lawngreen

              •  

                lemonchiffon

              •  

                lightblue

              •  

                lightcoral

              •  

                lightcyan

              •  

                lightgoldenrodyellow

              •  

                lightgray

              •  

                lightgreen

              •  

                lightpink

              •  

                lightsalmon

              •  

                lightseagreen

              •  

                lightskyblue

              •  

                lightslategray

              •  

                lightsteelblue

              •  

                lightyellow

              •  

                lime

              •  

                limegreen

              •  

                linen

              •  

                magenta

              •  

                maroon

              •  

                mediumaquamarine

              •  

                mediumblue

              •  

                mediumorchid

              •  

                mediumpurple

              •  

                mediumseagreen

              •  

                mediumslateblue

              •  

                mediumspringgreen

              •  

                mediumturquoise

              •  

                mediumvioletred

              •  

                midnightblue

              •  

                mintcream

              •  

                mistyrose

              •  

                moccasin

              •  

                navajowhite

              •  

                navy

              •  

                oldlace

              •  

                olive

              •  

                olivedrab

              •  

                orange

              •  

                orangered

              •  

                orchid

              •  

                palegoldenrod

              •  

                palegreen

              •  

                paleturquoise

              •  

                palevioletred

              •  

                papayawhip

              •  

                peachpuff

              •  

                peru

              •  

                pink

              •  

                plum

              •  

                powderblue

              •  

                purple

              •  

                rebeccapurple

              •  

                red

              •  

                rosybrown

              •  

                royalblue

              •  

                saddlebrown

              •  

                salmon

              •  

                sandybrown

              •  

                seagreen

              •  

                seashell

              •  

                sienna

              •  

                silver

              •  

                skyblue

              •  

                slateblue

              •  

                slategray

              •  

                snow

              •  

                springgreen

              •  

                steelblue

              •  

                tan

              •  

                teal

              •  

                thistle

              •  

                tomato

              •  

                turquoise

              •  

                violet

              •  

                wheat

              •  

                white

              •  

                whitesmoke

              •  

                yellow

              •  

                yellowgreen

          사용되는 키워드

          • transparent

            완전한 투명을 나타낸다.

            rgba(0, 0, 0, 0)의 별칭으로 사용되는 값으로 볼 수 있다. CSS Level 2 전까지는 지금처럼 실제 색상 값으로 사용하는 게 아니었다. backgroundborder 속성에서 색상을 설정할 때 사용되는 키워드였지만 CSS Colors Level 3에서 알파채널이 추가되면서 투명을 의미하는 색상 값이 되었고 색상을 정의하는 모든 속성에서 사용이 가능하게 되었다.

        • <system-color>

          CSS 시스템에서 사용하는 색상 테이블이다. CSS Color Module 4에서 더 이상 사용되지 않는 <deprecated-color> 시스템 색상을 정의했다.

          Details

          사용되는 키워드

          • AccentColor

            CSS Color Module Level 4

            강조된 사용자 인터페이스 컨트롤의 배경색이다.

          • AccentColorText

            CSS Color Module Level 4

            강조된 사용자 인터페이스 컨트롤의 텍스트 색상이다.

          • ActiveColor

            CSS Color Module Level 4

            활성 링크의 텍스트 색상이다.

          • ButtonBorder

            CSS Color Module Level 4

            푸시(push) 버튼의 기본 테두리 색상이다.

          • ButtonFace

            CSS Color Module Level 4

            푸시(push) 버튼의 배경색이다.

          • ButtonText

            CSS Color Module Level 4

            푸시(push) 버튼의 텍스트 색상이다.

          • Canvas

            CSS Color Module Level 4

            애플리케이션 또는 문서의 배경색이다.

          • CanvasText

            CSS Color Module Level 4

            애플리케이션 또는 문서의 텍스트 색상이다.

          • Field

            CSS Color Module Level 4

            입력 필드의 배경색이다.

          • FieldText

            CSS Color Module Level 4

            입력 필드의 텍스트 색상이다.

          • GrayText

            CSS Color Module Level 4

            비활성화된 텍스트의 색상이다.

          • HeightText

            CSS Color Module Level 4

            선택한 텍스트의 텍스트 색상이다.

          • Highlight

            CSS Color Module Level 4

            선택한 텍스트의 배경색이다.(예: ::selection)

          • LinkText

            CSS Color Module Level 4

            비활성, 비방문 링크의 텍스트 색상이다.

          • Mark

            CSS Color Module Level 4

            특수하게 표시된 텍스트(예: HTML <mark>)의 배경색이다.

          • MarkText

            CSS Color Module Level 4

            HTML의 <mark> 요소 등으로 특수하게 표시된 텍스트의 색상이다.

          • SelectedItem

            CSS Color Module Level 4

            선택한 항목의 배경색이다.

          • SelectedItemText

            CSS Color Module Level 4

            선택한 항목의 텍스트 색상이다.

          • VisitedText

            CSS Color Module Level 4

            방문한 링크의 텍스트 색이다.

        사용되는 키워드

        • currentColor

          동일한 속성이 아니어도 상속받은 색상값을 나타낸다.

  • <color-interpolation-method>

    <color> 값 사이의 보간에 사용되는 색상 공간(color space)을 나타낸다. 기본적으로 보간 색상 공간은 Oklab이다.

    • CSS Color Module Level 4
      in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
      표준 구문이지만 현재 실험적인 단계이므로 대부분의 유저 에이전트에서 정식으로 지원하지 않는다.
    Details

    포함된 타입

    • <hue-interpolation-method>

      색조(hue) 각도를 사용하는 색상 함수(lch(), hsl(), hwb() 등)의 보간을 위한 알고리즘을 나타낸다.

      • CSS Color Module Level 4
        [ shorter | longer | increasing | decreasing ] hue
      Details

      사용되는 키워드

      • decreasing

        각도를 θ₂ - θ₁ ∈ [-360, 0]이 되도록 조정한다.

        유사 자바스크립트
        if (θ₁ < θ₂) {
          θ₁ += 360;
        }
      • increasing

        각도를 θ₂ - θ₁ ∈ [0, 360]이 되도록 조정한다.

        유사 자바스크립트
        if (θ₂ < θ₁) {
          θ₂ += 360;
        }
      • longer

        각도를 θ₂ - θ₁ ∈ {[-360, -180], [180, 360]}이 되도록 조정한다.

        유사 자바스크립트
        if (0 < θ₂ - θ₁ < 180) {
          θ₁ += 360;
        } else if (-180 < θ₂ - θ₁ <= 0) {
          θ₂ += 360;
        }
      • shorter

        각도를 θ₂ - θ₁ ∈ [-180, 180]이 되도록 조정한다.

        유사 자바스크립트
        if (θ₂ - θ₁ > 180) {
          θ₁ += 360;
        } else if (θ₂ - θ₁ < -180) {
          θ₂ += 360;
        }
    • <polar-color-space>

      극좌표계(polar coordinates)를 사용하는 색상 공간(color space)을 나타낸다. 

      • CSS Color Module Level 4
        hsl | hwb | lch | oklch
      Details

      사용되는 키워드

      • hsl

        색조, 채도 및 밝기의 삼중항으로 지정된다.

      • hwb

        sRGB 색상을 지정하는 또 다른 방법으로 HSL과 유사하지만 사람이 이해하기가 더 쉽도록 설계되었다. 먼저 색조로 색상을 정한 다음에 해당 기본 색조에 혼합할 흰색과 검은색의 정도를 지정한다.

      • lch

        CIE LCH는 Lab과 동일한 L축을 가지지만 극좌표 C(크로마:chroma)와 H(색조:hue)를 사용하여 극좌표, 원통형 좌표계를 만든다. C는 L축으로부터의 기하학적 거리이고 H는 양의 a축에서 양의 b축을 향한 각도이다.

      • oklch

        시각적으로 유사한 색상의 대규모 데이터셋을 수치 최적화하여 제작하였으며 CIE LCH에 비해 색상 선형성, 색상 균일성, 채도 균일성이 향상되었다.

    • <rectangular-color-space>

      세 개의 값을 사용한 직교좌표계(cartesian coordinate)를 통해 색을 표현하는 색 공간을 나타낸다.

      • CSS Color Module Level 4
        srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65
      Details

      사용되는 키워드

      • lab

        중앙 밝기 축(central lightness axis)이 있는 직교 좌표계이다. 이 값은 일반적으로 단위 없는 숫자로 작성된다. 나머지 CSS와의 호환성을 위해 백분율로 작성된다. 100%는 L 값이  1.0이 아니라 100임을 의미한다. L=0%는 짙은 검정색(빛이 전혀 없음)인 반면 L=100%는 분산된 흰색이다.

      • oklab

        Lab 컬러 스페이스를 개선했다. 시각적으로 유사한 색상의 대규모 데이터셋을 수치 최적화하여 제작하였으며 CIE LCH에 비해 색상 선형성, 색상 균일성, 채도 균일성이 향상되었다.

      • srgb

        srgb[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

        [SRGB]는 인코딩과 일반의 두 가지 보기 조건을 지정하며 모든 레거시 색상 기능에 사용되는 CSS의 기본 컬러 스페이스이다.

      • srgb-linear

        srgb-linear[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

      • xyz

        xyz 컬러 스페이스는 X, Y 및 Z 값을 나타내는 세 개의 숫자 매개 변수를 허용한다. CIE XYZ[COLORIMETRY] 컬러 스페이스를 나타내며 확산 흰색의 휘도(Y)가 1.0이 되도록 조정된다. 필요한 경우 기준 흰색에 반음계로 적용된다.

      • xyz-d50

        xyz 컬러 스페이스에서 기준 흰색이 D50이다.

      • xyz-d65

        xyz 컬러 스페이스에서 기준 흰색이 D65이다.

  • <position>

    박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

    • CSS Backgrounds and Borders Module Level 3
      [left | center | right] || [top | center | bottom]

      다음과 같이 값이 지정될 수 있다.

      right
      center top
    • CSS Backgrounds and Borders Module Level 3
      [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?

      다음과 같이 지정될 수 있다.

      right 10%
      15% 100px
      20%
    • CSS Backgrounds and Borders Module Level 3
      [[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]

      x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.

      top 10% right -10px
    Details

    포함된 타입

    • <length-percentage>

      <length><percentage> 타입을 나타낸다.

      • CSS Values and Units Module Level 3
        <length> | <percentage>
      Details

      포함된 타입

      • <length>

        숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

        • CSS Basic User Interface Module Level 4
          <length>
        Details

        사용되는 단위

        아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

        • cm

          1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

        • in

          1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

        • mm

          1cm의 1/10 값을 나타낸다.

        • pc

          1in의 1/16 값을 나타낸다.

        • pt

          1in의 1/72 값을 나타낸다.

        • px

          스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

        • Q

          1cm의 1/40을 나타낸다.

        • deg

          보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

        • grad

          400grad(그라디안)은 완전한 원을 만든다.

        • rad

          2π(라디안)이 완전한 원을 만든다.

        • turn

          1turn(턴)이 완전한 원을 만든다.

        • cap

          대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

        • ch

          글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

        • em

          대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

        • ex

          대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

        • ic

          한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

        • lh

          요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

        • rem

          html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

        • rlh

          html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

        • Hz

          1초당 발생한 진동수를 나타낸다.

        • kHz

          1000Hz를 나타낸다.

        • fr

          그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

        • vb

          html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vh

          뷰포트 높이를 상대적으로 1% 높이를 갖는다.

        • vi

          html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vmax

          vw 또는 vh 중 큰 값을 나타낸다.

        • vmin

          vw 또는 vh 중 작은 값을 나타낸다.

        • vw

          뷰포트 너비를 상대적으로 1% 폭을 갖는다.

        • dpcm

          1cm당 점(dot)의 수를 나타낸다.

        • dpi

          1in당 점(dot)의 수를 나타낸다.

        • dppx

          1픽셀(pixel)당 점(dot)의 수를 나타낸다.

        • ms

          1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

        • s

          초를 나타낸다.

      • <percentage>

        어떠한 기준으로 부터 백분율로 표현한다.

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

    사용되는 키워드

    • bottom

      CSS Values and Units Module Level 4

      기준 위치를 아래쪽으로 한다.

    • center

      CSS Values and Units Module Level 4

      중앙을 기준으로 한다.

    • left

      CSS Values and Units Module Level 4

      기준 위치를 좌측으로 한다.

    • right

      CSS Values and Units Module Level 4

      기준 위치를 우측으로 한다.

    • top

      CSS Values and Units Module Level 4

      기준 위치를 상단으로 한다.

구문

repeating-conic-gradient(from 0deg at top center, #FF0000 15deg, #FFFF00 45deg)
CSS Images Module Level 4
Example

버전 명세

Modules
Module NameStatusSummary
CSS Images Module Level 4편집자 초안

element(), image(), image-set(), conic-gradient(), repeating-conic-gradient(), image-resolution() 함수가 새롭게 추가되었으나 아직은 모든 웹브라우저에서 지원되지 않는다.


Last review date: 2022-6-3

지원 웹브라우저