색상 입력
시각적 색상 선택기
# 접두사가 있거나 없는 6자리 HEX 코드를 입력하세요
변환할 색상 입력
HEX 코드를 입력하거나 RGB 또는 HSL 값을 입력하거나 색상 선택기를 사용하거나 '무작위 색상'을 클릭하여 시작하세요. 모든 형식이 실시간으로 업데이트됩니다.
색상 코드 차트 사용 방법
색상 입력
HEX 필드에 HEX 코드를 직접 입력하세요 (예: #FF5733), 10진수 RGB 값(각각 0–255)을 입력하거나 HSL 또는 CMYK 값을 입력하거나 색상 견본을 클릭하여 시각적 색상 선택기를 엽니다. '무작위 색상'을 클릭하여 즉각적인 영감을 받을 수도 있습니다. 모든 입력 방법은 입력하는 대로 결과를 실시간으로 업데이트합니다.
모든 변환된 형식 보기
결과 패널은 HEX, RGB, HSL, HSV, CMYK 및 정수 형식으로 색상을 동시에 보여줍니다. 각 형식에는 필요한 내용을 정확히 복사할 수 있는 복사 버튼이 있습니다. '모두 복사' 버튼을 사용하여 모든 형식을 한 번에 복사하거나 문서화를 위해 CSV로 내보낼 수 있습니다.
음영, 색조 생성 및 접근성 확인
결과를 아래로 스크롤하여 9개의 음영(더 어두운 변형)과 9개의 색조(더 밝은 변형) 스트립을 확인하세요 — 변형을 변환기에 로드하려면 어떤 견본이든 클릭하세요. WCAG 대비 섹션은 흰색과 검은색에 대한 대비 비율을 보여주며, AA/AAA 통과 지표로 색상이 접근성 기준을 충족하는지 확인합니다.
명명된 색상 참조 탐색
'명명된 색상 차트' 탭으로 전환하여 가족별로 정리된 140개의 CSS 명명된 색상을 탐색하세요 (빨강, 초록, 파랑, 보라 등). 각 행은 색상 견본, CSS 이름, HEX 코드 및 RGB 값을 보여줍니다. 어떤 행에서든 '색상 사용'을 클릭하여 즉시 변환기에 로드하세요.
자주 묻는 질문
HEX와 RGB 색상 코드의 차이는 무엇인가요?
HEX와 RGB는 서로 다른 표기 시스템을 사용하여 정확히 동일한 색상을 설명합니다. RGB는 빨강, 초록 및 파랑 채널을 0에서 255까지의 세 개의 10진 정수로 분리합니다. 예를 들어, rgb(59, 130, 246)는 중간 파랑입니다. HEX는 이러한 세 가지 값을 16진수(기수-16)로 나타냅니다: 59는 3B가 되고, 130은 82가 되며, 246은 F6이 되어 #3B82F6이 됩니다. HEX는 더 간결하며 HTML 및 CSS의 표준 형식입니다. RGB는 수학적으로 읽기 쉽고 CSS 및 그래픽 디자인 소프트웨어에서 사용됩니다. 두 형식은 동등하며, 한 형식으로 표현할 수 있는 모든 색상은 다른 형식으로도 표현할 수 있습니다.
HSL이 HEX 또는 RGB보다 디자인 조정에 더 나은 이유는 무엇인가요?
HSL(색상, 채도, 밝기)은 순수한 색상 정체성(색상, 0–360도)과 얼마나 생생한지(채도), 얼마나 밝거나 어두운지(밝기)를 분리합니다. 이는 디자인 작업에 훨씬 더 직관적입니다. 예를 들어, 색상을 20% 더 밝게 만들려면 L 값을 20만큼 증가시키면 됩니다 — HEX 또는 RGB에서는 동일한 작업이 모든 세 개의 채널을 별도로 계산해야 합니다. HSL은 또한 인간이 색상을 자연스럽게 설명하는 방식입니다: '밝고 중간 밝기의 파랑'은 높은 채도와 중간 범위의 밝기를 가진 파란색 색조에 직접적으로 매핑됩니다. CSS는 기본적으로 hsl() 표기법을 지원하며, Figma와 같은 디자인 도구는 내부적으로 HSL 유사 모델을 사용합니다. 많은 디자인 시스템이 이 이유로 HSL로 색상 토큰을 정의합니다.
CMYK란 무엇이며 언제 사용해야 하나요?
CMYK는 청록, 마젠타, 노랑 및 키(검정)를 의미합니다 — 색상 인쇄에 사용되는 네 가지 잉크 색상입니다. RGB와 달리, CMYK는 특정 파장을 흡수하는 잉크를 겹쳐서 빛을 빼앗는 방식(감소 혼합)으로 작동합니다. 이 때문에 화면에서 생생하게 보이는 색상이 인쇄될 때는 더 흐릿하게 보일 수 있습니다 — RGB 색역(표시 가능한 색상의 범위)은 CMYK 인쇄가 재현할 수 있는 것보다 넓습니다. 전문 인쇄를 위한 파일을 준비할 때는 명함, 브로셔, 포스터 및 포장 등을 포함하여 CMYK 값을 사용하세요. 대부분의 전문 인쇄소 및 디자인 소프트웨어(Adobe Illustrator, InDesign)는 인쇄 프로젝트를 위해 CMYK로 작업합니다. 웹 및 화면 디자인의 경우 HEX 또는 RGB를 사용하세요.
WCAG 대비 비율이란 무엇이며 왜 중요한가요?
WCAG(웹 콘텐츠 접근성 지침) 대비 비율은 저시력 또는 색맹인 사람이 전경색과 배경색이 얼마나 다르게 보이는지를 측정합니다. 이는 상대적 밝기를 사용하여 계산됩니다 — 인지된 밝기의 측정입니다. 1:1 비율은 대비가 없음을 의미하며(같은 색상), 21:1은 최대 대비(흰색 위의 검정색)입니다. WCAG AA 표준은 일반 텍스트에 대해 4.5:1, 큰 텍스트에 대해 3:1을 요구합니다. WCAG AAA는 7:1을 요구합니다. 이러한 기준을 충족하면 시각 장애인이 웹사이트를 읽을 수 있도록 보장되며, ADA(장애인법) 및 WCAG 2.1/2.2 기준에 대한 법적 준수를 위해 종종 필요합니다. 이 도구는 입력한 모든 색상에 대해 흰색과 검은색에 대한 대비 비율을 자동으로 계산합니다.
음영과 색조는 어떻게 생성되나요?
음영은 색상을 검정과 혼합하여 생성됩니다 — 수학적으로는 각 RGB 채널을 1보다 작은 계수로 곱하는 방식입니다. 예를 들어, 빨강(255, 0, 0)의 50% 음영은 (128, 0, 0)입니다. 색조는 흰색과 혼합하여 생성됩니다 — 원래 채널 값을 255로 혼합합니다. 빨강의 50% 색조는 (255, 128, 128)입니다. 이 도구는 9개의 고르게 분포된 음영(거의 검정색에서 원래 색상까지)과 9개의 고르게 분포된 색조(원래 색상에서 거의 흰색까지)를 생성하여 총 19개의 변형을 제공합니다. 이러한 스트립은 디자인 시스템 팔레트를 구축하는 데 매우 유용합니다 — 예를 들어, Tailwind CSS는 각 22개 색상 계열에 대해 50(가장 밝은)에서 950(가장 어두운)까지 유사한 10단계 음영 스케일을 사용합니다.
140개의 CSS 명명된 색상은 무엇인가요?
140개의 CSS 명명된 색상은 CSS 색상 사양(CSS Colors Level 4)에서 정의된 색상 키워드 집합입니다. 여기에는 '빨강', '파랑', '초록'과 같은 고전적인 웹 색상과 '코넬플라워 블루', '라벤더 블러시', '파파야 휘프'와 같은 설명적인 이름이 포함됩니다. 각 이름은 모든 브라우저와 운영 체제에서 일관된 특정 HEX/RGB 값에 매핑됩니다. 이들은 유닉스 환경에서 사용되는 X11 색상 시스템에서 유래되었으며, 이후 CSS에 대해 표준화되었습니다. 일반적인 색상에 편리하지만, 명명된 색상은 24비트 RGB로 표현할 수 있는 1,670만 색상의 극히 일부만을 포함합니다. 정밀한 디자인 작업을 위해서는 항상 HEX 또는 RGB 값을 사용하고, 명명된 색상에 의존하지 마세요. 이름이 오해를 불러일으킬 수 있습니다(예: '회색'과 '그레이'는 약간 다릅니다).