색상 변환기

HEX (16진수): #기호 뒤에 6자리 16진수(0-9, A-F)로 색상을 표현합니다. 앞에서부터 두 자리씩 빨강(R), 초록(G), 파랑(B) 값을 나타냅니다. 예를 들어 #FF0000은 빨간색, #00FF00은 초록색입니다.

RGB (빨강, 초록, 파랑): 빛의 삼원색인 Red, Green, Blue 각각을 0~255 사이의 숫자로 표현합니다. rgb(255, 0, 0)은 빨간색이며, 세 값을 조합하여 약 1,670만 가지의 색상을 만들 수 있습니다.

HSL (색상, 채도, 명도): Hue(색조, 0-360도), Saturation(채도, 0-100%), Lightness(명도, 0-100%)로 색상을 표현합니다. 인간의 색 인지 방식에 가까워 직관적으로 색상을 조절할 수 있습니다.

CSS 활용: color, background-color, border-color 등 다양한 속성에서 색상 코드를 사용합니다. CSS 변수(Custom Properties)와 함께 사용하면 테마 관리가 편리합니다.

웹 접근성: WCAG 2.1 가이드라인에 따르면, 텍스트와 배경의 명암 대비율이 최소 4.5:1(일반 텍스트) 또는 3:1(큰 텍스트)을 만족해야 합니다. 적절한 색상 선택은 모든 사용자가 콘텐츠를 인식할 수 있도록 합니다.

대비율: 대비율은 두 색상의 상대 휘도 비율로 계산됩니다. 높은 대비율은 가독성을 높이고, 시각 장애가 있는 사용자도 편하게 콘텐츠를 이용할 수 있게 합니다.

보색 (Complementary): 색상환에서 정반대(180도)에 위치한 두 색의 조합입니다. 강렬한 대비를 만들어 시선을 끄는 데 효과적입니다. 예: 파랑-주황, 빨강-초록.

유사색 (Analogous): 색상환에서 인접한(30도 간격) 색들의 조합입니다. 자연스럽고 조화로운 느낌을 주며, 한 색을 주색으로 나머지를 보조색으로 사용합니다.

삼원색 조화 (Triadic): 색상환에서 120도 간격으로 배치된 세 색의 조합입니다. 풍부하고 활기찬 느낌을 줍니다. 한 색을 주색으로 하고 나머지 두 색은 보조적으로 사용하면 균형 잡힌 디자인이 됩니다.