CSS Color Module Level 5

https://www.w3.org/TR/css-color-5/

CSS Color Module Level 5

 

 

주요 요약

1. 색상 표기법 확장

• 기존 rgb(), hsl() 방식 외에도, 새로운 형식들이 추가됐어:
  • rgb()와 hsl() 함수가 공백 또는 슬래시(/) 구분자를 사용할 수 있게 되었고, **alpha(투명도)**를 더 자연스럽게 표기할 수 있어.
    
    rgb(255 0 0 / 0.5) /* 빨간색 50% 투명 */
    hsl(120 100% 50% / 0.3)

• lab(), lch(), oklab(), oklch() 색상 함수가 추가됨.
  • LAB과 LCH는 보다 인간의 눈에 가까운 색 표현을 할 수 있음.
  • OKLab/OKLCH는 색 간 거리가 균일하도록 조정된 최신 모델.
     

    lab(50% 20 30)
    lch(52% 40 250)
    oklab(0.627 0.224 -0.125)
    oklch(0.627 0.2 328)

3. color() 함수

• 다양한 색공간을 직접 지정해서 색상을 사용할 수 있음.
• 고급 디스플레이(P3, Rec.2020 등) 지원 가능.
  color(srgb 1 0 0)
  color(display-p3 0.5 0.4 0.3)
•  

4. 색상 조합 함수

• color-mix() : 두 색을 섞어 새 색상을 만들 수 있어.
   
  color-mix(in srgb, red 40%, blue)

5. 색상 조정 함수

• color-contrast() : 배경색 대비를 고려해 최적 색상을 선택.
• relative-color() : 기존 색상을 기준으로 상대적인 색을 만들 수 있음.
   

  relative-color(--primary-color lightness -10%)

6. 기존 키워드 개선

• transparent, currentColor, system-color 키워드도 여전히 지원.
• rebeccapurple 같은 특수 색상도 유지.