Digital Color

CSS 색상 함수

rgb(), hsl(), oklch(), lab(), color() 등 각각 다른 색상 모델을 사용하는 CSS 내장 색상 지정 함수.

CSS has evolved from supporting only hex codes and named colors to offering a rich set of color functions. The rgb() and hsl() functions have been available since CSS3. CSS Color Level 4 introduced lab(), lch(), oklab(), oklch(), and the generic color() function for specifying colors in any predefined color space like display-p3. Modern syntax uses space-separated values with an optional slash for alpha: rgb(255 128 0 / 50%). The color-mix() function enables mixing two colors in any color space, and relative color syntax allows deriving new colors from existing ones by modifying individual channels.

직접 해보기

색상 변환기

HEX, RGB, HSL, HSV, CMYK, OKLCH 색상 형식 간에 즉시 변환합니다.

관련 글

CSS light-dark() 기능: 기본 테마 전환

기본 테마 전환에는 CSS light-dark()를 사용하세요. 밝은 모드와 어두운 모드 색상을 위해 JavaScript 토글과 미디어 쿼리를 단일 CSS 함수로 대체합니다.

CSS 상대 색상 구문: 모든 색상을 동적으로 변환

색상을 동적으로 변환하려면 CSS 상대 색상 구문을 마스터하세요. 스타일시트에서 색조, 채도, 밝기 및 알파 채널을 직접 조정하세요.

CSS 색상 함수: rgb(), hsl(), oklch() 비교

모든 CSS 색상 함수(rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() 및 color-mix))))를 비교하십시오. 어떤 브라우저를 언제, 어떤 브라우저 지원을 사용해야 하는지 알아보세요.

바우하우스 색채 이론: 칸딘스키, 클레, 이텐

이텐, 칸딘스키, 클레의 바우하우스 색채 이론을 탐구하세요. 원색과 형태의 대응 관계, 색 구체, 그리고 현대 디자인에 대한 바우하우스의 유산을 알아보세요.