🎨 색상 코드 변환기
색상 코드를 다양한 형식으로 변환하세요
HEX, RGB, HSL, HSV 색상 형식을 상호 변환하고 색상 팔레트를 생성합니다
색상 변환기
색상 팔레트 생성기
색상은 뭐죠?
• 색상 코드는 디지털 환경에서 색상을 표현하는 방법입니다. 웹 개발, 디자인, 그래픽 작업 등에서 색상을 정확하게 지정하고 전달하기 위해 다양한 형식이 사용됩니다.
• HEX (16진수): 가장 널리 사용되는 형식으로, #RRGGBB 형식으로 표현됩니다. 예를 들어#3B82F6은 빨강 59, 초록 130, 파랑 246을 의미합니다. 웹 개발에서 가장 많이 사용됩니다.
• RGB (Red, Green, Blue): 빨강, 초록, 파랑의 조합으로 색상을 표현합니다. 각 값은 0부터 255까지의 숫자로 표현되며, rgb(59, 130, 246) 형식으로 사용됩니다.
• HSL (Hue, Saturation, Lightness): 색조, 채도, 명도를 사용하여 색상을 표현합니다. 색상의 밝기나 채도를 조절하기 쉽다는 장점이 있어 디자인 작업에서 유용합니다.
• HSV (Hue, Saturation, Value): HSL과 유사하지만 Value(밝기)를 사용합니다. 색상 선택기나 그래픽 편집 프로그램에서 자주 사용되는 형식입니다.
• 색상 팔레트: 색상 이론에 기반하여 조화로운 색상 조합을 생성할 수 있습니다. 단색, 유사색, 보색 등 다양한 조합을 통해 디자인에 활용할 수 있습니다.
사용법 안내
• 자동 변환: 색상 피커에서 선택하거나 HEX, RGB, HSL, HSV 중 어느 한 곳에 값을 입력하면 자동으로 다른 형식으로 변환됩니다. 별도의 변환 버튼 없이 실시간으로 변환이 이루어집니다
• 색상 선택: 색상 선택기나 HEX, RGB, HSL, HSV 코드를 입력하여 색상을 선택하세요. 한 형식으로 입력하면 다른 형식으로 자동 변환됩니다
• 팔레트 생성: 현재 선택한 색상을 기준으로 색상 이론에 따른 조화로운 팔레트를 생성할 수 있습니다. 단색, 유사색, 보색 등 다양한 타입을 선택할 수 있습니다
• 접근성 검사: WCAG (Web Content Accessibility Guidelines) 기준에 따라 색상의 대비비를 검사합니다. 웹 접근성 기준에 맞는 색상인지 확인할 수 있습니다
• CSS 코드: 생성된 색상의 CSS 코드를 복사하여 웹 개발에 바로 사용할 수 있습니다. background-color, color, border-color 등 다양한 속성에 활용할 수 있습니다
• 색상 정보: 선택한 색상의 밝기, 채도, 색조, 색온도 등 상세한 정보를 확인할 수 있습니다