색상 선택기 및 변환기

색상 모델

색상 모델은 색상을 숫자로 설명하는 시스템입니다. 출력이 화면인지, 프린터인지, 디자인 사양인지에 따라 다른 모델이 사용됩니다.

RGB / RGBA

형식

RGB는 빨강, 초록, 파랑 빛을 혼합하여 색상을 정의합니다. 각 채널은 0에서 255까지의 범위입니다. rgb(255, 0, 0)은 순수한 빨강입니다. rgb(255, 255, 255)는 흰색입니다. A(알파) 채널은 투명도를 추가하며, 0(완전 투명)에서 1(완전 불투명)까지의 범위입니다. 예를 들어, rgba(255, 0, 0, 0.5)은 반투명 빨강입니다. RGB는 화면과 디지털 디스플레이의 기본 색상 모델입니다.

역사

RGB 모델은 19세기의 영-헬름홀츠 삼색 시각 이론에 뿌리를 두고 있습니다. 제임스 클러크 맥스웰은 1861년 최초의 RGB 컬러 사진 실험을 수행했습니다. RGB는 1930년대와 1940년대 컬러 CRT 텔레비전의 개발과 함께 전자 디스플레이의 표준이 되었으며, 이후 컴퓨터 모니터에 채택되었습니다. sRGB 색상 공간은 1997년 1월 HTML 3.2에서 웹 표준으로 공식 채택되었습니다.

HEX / HEXA

형식

HEX는 16진수를 사용한 RGB 값의 간결한 표기법입니다. #FF0000은 rgb(255, 0, 0)과 같습니다. 각 16진수 숫자 쌍은 하나의 채널을 나타냅니다: #RRGGBB. 8자리 형식 #RRGGBBAA는 알파 채널을 추가하며, 00은 완전 투명, FF는 완전 불투명입니다. 예를 들어, #FF000080은 50% 불투명도의 빨강입니다. #F00과 같은 단축 형식은 #FF0000으로 확장됩니다.

역사

16진수 색상 표기법은 1990년대 중반 초기 웹 브라우저에서 유래했습니다. Mosaic과 Netscape Navigator의 첫 버전들은 X11 색상 이름 시스템을 계승했습니다. 1996년 12월 Hakon Wium Lie와 Bert Bos가 발표한 CSS Level 1은 웹에서 색상을 지정하는 기본 방법으로 16진수 삼중항을 공식적으로 표준화했습니다.

HSL / HSLA

형식

HSL은 색상을 색조, 채도, 명도로 설명합니다. 색조는 색상 휠의 각도(0-360)입니다: 0은 빨강, 120은 초록, 240은 파랑입니다. 채도(0-100%)는 색상 강도를 제어합니다. 명도(0-100%)는 밝기를 제어하며, 0%는 검정, 100%는 흰색입니다. HSL은 밝기와 채도를 독립적으로 조절할 수 있어 RGB보다 색상 선택이 더 직관적입니다.

역사

HSL은 1978년 George H. Joblove와 Donald Greenberg가 Computer Graphics에 발표한 논문에서 처음 설명되었습니다. RGB의 근본적인 문제를 해결하기 위해 만들어졌습니다: 빨강, 초록, 파랑 값을 혼합하는 것은 사람에게 직관적이지 않습니다. HSL은 RGB 색상 공간을 재배열하여 아티스트와 디자이너가 사람들이 색상을 자연스럽게 설명하는 방식에 더 가깝게 색상(색조), 생동감(채도), 밝기(명도)의 관점에서 생각할 수 있도록 합니다.

HSV / HSB

형식

HSV(색조, 채도, 밝기)는 HSL과 유사하지만 명도 대신 "밝기"를 사용합니다. 100% 밝기에서 완전히 포화된 색상은 순수하고 밝습니다. HSV는 색상 선택기의 작동 방식에 더 자연스럽게 매핑됩니다: 채도/밝기 패널은 S와 V를 조정하고 색조 슬라이더는 H를 조정합니다.

역사

HSV는 1978년 8월 뉴욕 공과대학 컴퓨터 그래픽 연구실에서 근무하던 Alvy Ray Smith가 설명했습니다. HSL과 같은 Computer Graphics 호에 발표되었습니다. Smith는 아티스트가 화면에서 직관적으로 색상을 선택하는 방법이 필요한 초기 디지털 페인팅 프로그램을 위해 HSV를 설계했습니다. HSV의 원통 모델은 색조 슬라이더와 채도/밝기 패널을 가진 색상 선택기로 구현하기에 자연스러웠습니다.

CMYK

형식

CMYK(시안, 마젠타, 노랑, 블랙/키)는 인쇄에 사용됩니다. RGB가 가산(빛)인 반면, CMYK는 감산(잉크)입니다. 각 값은 적용되는 잉크의 비율을 나타냅니다. cmyk(0, 100, 100, 0)은 빨강을 생성합니다. RGB와 CMYK 간 변환은 서로 다른 색상 범위(색역)를 커버하므로 근사치입니다.

역사

CMYK의 기초는 1710년경 별도의 구리판을 사용한 하프톤 컬러 인쇄를 발명한 Jacob Christoph Le Blon에게 거슬러 올라갑니다. 그는 처음에 빨강, 노랑, 파랑 판을 사용했고, 나중에 더 선명한 윤곽과 텍스트를 위해 검정 판을 추가했습니다. 현대의 4색 CMYK 공정은 1890년대 컬러 신문 삽화를 위해 처음 구현되었습니다. 검정 판은 다른 판이 정렬(키드)되는 세밀한 디테일을 담고 있어 "키" 판이라고 합니다.

CSS 색상 형식

현대 CSS는 여러 색상 표기법을 지원합니다:

• #FF5733 또는 #ff5733 (HEX)
• rgb(255, 87, 51) 또는 rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) 또는 hsla(14, 100%, 60%, 0.5)
• 이름 색상: red, cornflowerblue, rebeccapurple (총 148개 이름 색상)