CSS <color> 자료형: 색상

/* 색상 키워드 */
rebeccapurple
aliceblue

/* RGB 16진수 */
#f09
#ff0099

/* RGB (빨강, 초록, 파랑) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (색조, 채도, 밝기) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (색조, 백색, 흑색) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (밝기, A축, B축) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (밝기, 채도, 색조) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (밝기, A축, B축) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (밝기, 채도, 색조) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* 상대적 색상 */
/* HSL 색조 변경 */
hsl(from red 240deg s l)
/* HWB 알파 채널 변경 */
hwb(from green h w b / 0.5)
/* LCH 밝기 변경 */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

<div class="box">
  파란 색 텍스트입니다.
  <div class="hr"></div>
  위의 가로줄과 주위 테두리의 색도 파란 색이어야 합니다.
</div>

.box {
  color: blue;
  border: 1px dashed currentColor;
}

.hr {
  background: currentColor;
  height: 9px;
}

/* 모두 불투명한 핫핑크 */

/* 16진수 */
#f09
#F09
#ff0099
#FF0099

/* 함수 표기법 */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* 오류! <number>와 <percentage>를 혼합할 수 없음 */
rgb(255 0 153)

/* 알파 값을 포함한 16진수 */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* 알파 값을 포함한 함수 표기법 */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* 공백 구분 매개변수 구문 */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* 부동소수점 실수를 사용한 함수 표기법 */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)

/* 모두 70% 불투명도의 라벤더색 */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* 모두 15% 불투명도의 라벤더색 */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

/* 다양한 색조의 라임색 */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* 같은 라임색, 50% 불투명도 */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)