함수에 값들을 넣어 계산되는 색이다. 대괄호([])로 쌓인 매개변수는 넣지 않아도 작동하는 옵션이다.
rgb(R G B[ / A]) / rgb(R, G, B[, A]) RGB를 각각 0~255의 숫자로 입력하는 방식이다. 각 숫자를 16진수로 바꿔 # 앞에 이어서 적은 게 헥스 코드이다. 투명도 A는 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다. 투명도를 포함한 rgba와 통합되었다.
hsl(H S L[ / A]) / hsl(H, S, L[, A]) HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식이다. RGB와 달리 색의 채도와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다. 투명도를 포함한 hsla와 통합되었다.
H sRGB의 원형 색 공간{{{#!wiki style="display: inline-block; vertical-align: middle; margin: 0 2px; background: conic-gradient(in hsl longer hue, red, red); width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888;"
}}}에서 숫자(<number>) 혹은 각도(<angle>) 값을 받아 색상을 나타낸다. 숫자는 deg 각도값과 같다. RGB에 비유하자면 0°, 360°가 R이고, 120°가 G, 240°가 B이다.
S 채도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%일 경우, 무채색이 되어 H의 값이 아무 효력이 없어지다.
L 밝기를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
hwb(H W B[ / A]) 색조(Hue)를 정하고 흰색(Whiteness)과 검은색(Blackness)을 얼마나 섞을지를 함수형으로 입력하는 방식이다. W와 B가 0일 때 가장 채도가 높고, 둘의 합이 100% 이상이 되면 무채색이 된다.
H sRGB의 원형 색 공간{{{#!wiki style="display: inline-block; vertical-align: middle; margin: 0 2px; background: conic-gradient(in hsl longer hue, red, red); width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888;"
}}}에서 숫자(<number>) 혹은 각도(<angle>) 값을 받아 색상을 나타낸다. 숫자는 deg 각도값과 같다.
W 흰색을 섞을 정도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%는 흰색이 전혀 없는 상태, 100%는 완전한 흰색을 의미한다. W와 B의 합이 100% 이상일 경우 두 값의 비율에 맞게 100%를 나눠 갖는다.
B 검은색을 섞을 정도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%가 검은색이 전혀 없는 상태, 100%는 완전한 검은색을 의미한다. W와 B의 합이 100% 이상일 경우 두 값의 비율에 맞게 100%를 나눠 갖는다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
L 색의 밝기를 나타낸다. 0~100의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
a 초록에서 빨강까지의 축을 나타낸다. 낮을 수록 초록에, 높을 수록 빨강에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
b 파랑에서 노랑까지의 축을 나타낸다. 낮을 수록 파랑에, 높을 수록 노랑에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
lch(L C H[ / A]) LCH 색 공간을 함수형으로 입력하는 방식이다. L은 Lab의 L과 같으며, C는 채도(Chroma), H는 색조(Hue)이다.
L 색의 밝기를 나타낸다. 0~100의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
C 색의 채도를 나타낸다. 0 이상의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다. 숫자 최대값은 이론적으로 제한이 없으나, 230 이상은 사실상 차이가 없다. 100%는 숫자 150을 입력했을 때와 같다.[7]
H LCH 원형 색 공간{{{#!wiki style="display: inline-block; vertical-align: middle; margin: 0 2px; background: conic-gradient(in lch longer hue, red, red); width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888;"
}}}에서 숫자(<number>) 혹은 각도(<angle>) 값을 받아 색상을 나타낸다. 숫자는 deg 각도값과 같다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
oklab(L a b[ / A]) Oklab 색 공간을 함수형으로 입력하는 방식이다.
L 색의 밝기를 나타낸다. 0~1의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
a 초록에서 빨강까지의 축을 나타낸다. 낮을 수록 초록에, 높을 수록 빨강에 가까워 진다. -0.4~0.4의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
b 파랑에서 노랑까지의 축을 나타낸다. 낮을 수록 파랑에, 높을 수록 노랑에 가까워 진다. -0.4~0.4의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
oklch(L C H[ / A]) Oklch 색 공간을 함수형으로 입력하는 방식이다. L은 Oklab의 L과 같으며, C는 채도(Chroma), H는 색조(Hue)이다.
L 색의 밝기를 나타낸다. 0~1의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
C 색의 채도를 나타낸다. 0 이상의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다. 숫자 최대값은 이론적으로 제한이 없으나, 0.5 이상은 사실상 차이가 없다. 100%는 숫자 0.4를 입력했을 때와 같다.
H Oklch 원형 색 공간{{{#!wiki style="display: inline-block; vertical-align: middle; margin: 0 2px; background: conic-gradient(in oklch longer hue, red, red); width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888;"
}}}에서 숫자(<number>) 혹은 각도(<angle>) 값을 받아 색상을 나타낸다. 숫자는 deg 각도값과 같다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
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의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
A (옵션) 투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
color-mix(in ~, COLOR1, COLOR2) 색을 섞는 함수이다. 섞을 보간 방법(<color-interpolation-method>)과 두 색을 넣어서 사용할 수 있다.
light-dark(COLOR1, COLOR2) 한번에 라이트, 다크 모드를 설정하는 함수이다. 첫 번째 색이 라이트 모드, 두 번째 색이 다크 모드에서 나타나는 색이다.
색()을 쉼표로 나열하여 그래디언트를 만든다. 기본적으로 색을 나열한 순서대로 위에서 아래로 내려오는 그래디언트가 생성된다.
linear-gradient(white 50%, black)
linear-gradient(black, white 20% 80%, black)
linear-gradient(white 50%, black 50%) linear-gradient(white 50%, black 0)
색이 위치할 지점을 설정할 수 있다. 지점을 2개 설정하면 해당색이 차지할 공간을 설정할 수 있다.
이전 지점과 같은 지점이거나 더 전의 지점을 설정할 경우, 불연속적인 무늬를 만들 수 있다.
linear-gradient(to right, white, black)
linear-gradient(to bottom right, white, black)
linear-gradient(45deg, white, black)
linear-gradient(30deg, white 50%, black 50%)
linear-gradient(30deg, white 50%, black calc(50% + 1px))
그래디언트의 방향은 색을 나열하기 전에 맨 앞에서 설정할 수 있다. 사용할 수 있는 방향은 top, bottom, left, right가 있으며 수직과 수평은 섞을 수 있다.
특정 각도를 설정할 수도 있다. 0deg는 12시 방향을 의미하며 각도는 시계방향으로 움직인다. 비스듬한 각도에서 그래디언트를 불연속적으로 만들 경우 계단 현상이 일어나기 때문에 calc로 1px의 위치 차이를 줘서 그래디언트를 통해 안티에일리어싱처럼 만들 수 있다.
linear-gradient(red, blue)
linear-gradient(in hsl, red, blue)
linear-gradient(in hsl 45deg, red, blue)
linear-gradient(in hsl longer hue, red, blue)
색을 보간하는 방법을 설정할 수 있다. 색 보간 방법과 각도는 쉼표로 구분하지 않는다.
in hsl을 통해 HSL로 보간하도록 설정할 경우 색상 red인 0deg에서 blue인 240deg으로 서서히 변화한다. 두 각도에서 기본적으로 가까운 180도 이하 각으로 변화하기에 2번째 예시의 경우 120deg의 거리를 움직이지만 longer hue를 사용할 경우 240deg쪽으로 변화한다.
repeating-linear-gradient(white, black 10px, white 20px)
repeating-radial-gradient(white, black 10px, white 20px)
repeating-conic-gradient(white, black 10deg, white 20deg)
나열한 색의 설정된 지점이 끊긴 부분부터 처음 부분이 반복된다.
[1] 1/6인치[2] 보여지고 있는 전체 화면 영역[3] 모바일 등에서 브라우저 UI에 가린 부분은 포함하지 않은 화면.[4] 모바일 등에서 브라우저 UI에 가린 부분까지 포함한 화면.[5] 모바일 등에서 브라우저 UI가 사라졌다 생겼다 함에 따라 달라지는 화면.[6] 1turn은 360deg이다.[7] 이는 0~150이 대부분의 일반적인 모니터에서 표현 가능한 영역이기 때문이다. 150~230 매우 선명한 고성능 디스플레이에서 겨우 표현 가능한 초고채도 영역이며 230 초과 값도 입력은 가능하지만, 화면에는 그냥 230일 때와 똑같이 나오거나 깨져서 보인다.