Color Converter
HEX, RGB, HSL 색상 형식을 변환해요. 색상을 선택하거나 값을 직접 입력할 수 있어요.
작동 방식: 팔레트에서 색상을 선택하거나 컬러 피커를 사용하거나, 아무 텍스트 필드에 색상 값(HEX, RGB, HSL)을 붙여넣으세요. 모든 형식이 실시간으로 업데이트돼요. "복사"를 클릭해서 값을 가져가세요.
컬러 피커
색상을 빠르게 선택해요:
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
색상 형식 이해하기
CSS는 각각의 장점을 가진 여러 색상 형식을 지원해요. HEX는 가장 간결하고 디자인 도구에서 널리 사용돼요. RGB는 빛의 값으로 색상을 혼합하는 방식이 직관적이에요. HSL은 가장 인간친화적인 형식으로, 색상, 채도, 밝기를 독립적으로 조정할 수 있어서 색상 팔레트와 테마를 만들기에 이상적이에요.
HEX 색상
HEX 색상은 빨강, 초록, 파랑 채널(각각 00–FF)을 나타내는 6자리 16진수 코드(예: #ff5733)를 사용해요. 각 쌍이 반복될 때는 3자리 단축 형식이 존재해요(예: #f53은 #ff5533). HEX는 웹 디자인에서 가장 일반적인 형식이며 모든 브라우저와 디자인 도구에서 지원돼요.
RGB 색상
RGB(빨강, 초록, 파랑)는 0부터 255까지의 세 정수 값으로 색상을 정의해요. 예를 들어, rgb(255, 87, 51)은 생생한 주황빨강이에요. CSS는 투명도를 위한 알파 채널이 있는 rgba()도 지원해요(0.0부터 1.0). RGB는 JavaScript 색상 조작과 canvas 드로잉에서 자주 사용돼요.
HSL 색상
HSL(색상, 채도, 밝기)은 인간에게 가장 직관적인 색상 모델이라고 할 수 있어요. 색상은 색상환 위의 각도(0–360), 채도는 백분율(0% = 회색, 100% = 풀 컬러), 밝기는 백분율(0% = 검정, 100% = 흰색)이에요. HSL은 색상 변형을 쉽게 만들어요 — 밝기를 조정하면 같은 색상의 틴트와 셰이드를 얻을 수 있어요.