Color Models

HSL

색상(Hue), 채도(Saturation), 명도(Lightness)를 사용하여 색을 표현하는 원통형 색상 모델로, 인간의 색 선택에 직관적으로 설계됨.

HSL represents color as an angle on the color wheel (hue, 0-360), a percentage of color intensity (saturation, 0-100%), and a percentage of lightness (0-100% where 0% is black and 100% is white). At 50% lightness, the pure hue is displayed. HSL is widely used in CSS (the hsl() function) because it makes it easy to create tints, shades, and tones by adjusting a single parameter. It is more intuitive than RGB for design work but has the limitation of not being perceptually uniform, meaning equal numeric changes do not always produce equal visual changes.

직접 해보기

색상 변환기

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

관련 글

CSS color-mix(): 브라우저에서 기본적으로 색상 혼합

브라우저에서 기본적으로 색상을 혼합하는 CSS color-mix()를 알아보세요. 구문, 색상 공간, 실제 사용 사례를 마스터하고 JavaScript 없이 동적 팔레트를 만드세요.

처음부터 색상 선택기 웹 구성 요소 구축

웹 구성 요소로 액세스 가능한 색상 선택기를 구축합니다. Shadow DOM을 사용하여 캔버스 렌더링, 색조 슬라이더, 알파 채널 및 사용자 정의 이벤트를 구현합니다.

지각 색상 공간: Lab, LCH, Oklab, OKLCH

CIE Lab, LCH, Oklab, OKLCH 등 지각적으로 균일한 색상 공간을 탐색해 보세요. 각 디자인이 어떻게 설계되었는지, 어디에 뛰어난지, CSS 및 디자인 작업에 어떤 것이 사용되는지 알아보세요.

에메랄드 vs 제이드 vs 포레스트 그린: 녹색 비교 가이드

에메랄드(#50C878), 옥(#00A86B), 포레스트 그린(#228B22)을 비교해보세요. 인기 있는 녹색 색상 간의 시각적 및 16진수 코드 차이점을 알아보세요.

청록색과 청록색의 차이점

청록색(#00FFFF)과 청록색(#40E0D0)은 비슷해 보이지만 색상 모델 위치, 채도 및 사용 사례가 근본적으로 다릅니다. 전체 분석은 다음과 같습니다.

색상 API 설계: 색상 데이터용 REST 끝점

색상 변환, 검색, 대비 확인 및 팔레트 생성을 위한 엔드포인트를 사용하여 RESTful 색상 API를 설계합니다. 스키마 설계 및 모범 사례를 알아보세요.