logo
GeekFormat

색상 변환기

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH를 포함한 14가지 색상 형식 간의 원클릭 변환을 지원하는 온라인 색상 변환기입니다. 실시간 조정용 색상 선택기, WCAG 대비 검사, 색상 조화 배색, 음영 생성, 일괄 변환, 이미지 색상 추출 기능을 내장했습니다. 모든 계산은 브라우저에서 완전히 로컬로 실행되어 파일 업로드가 필요 없으며, 디자이너와 프론트엔드 개발자에게 최적입니다.

관련 추천

색맹 시뮬레이터

이미지 필터

CSS Formatter

단위 변환

통화 변환기

이미지 변환

사용 사례

  • 프론트엔드 개발에서 디자인 목업의 HEX 값을 CSS 스타일용 RGB/HSL로 변환하거나 투명도가 필요할 때 RGBA로 변환
  • UI/UX 디자이너가 Figma, Sketch, Photoshop 등 디자인 도구를 오갈 때 색상 값 형식을 통일
  • 인쇄 제작 초기 단계 논의 시 화면 RGB 값을 참고용 CMYK로 변환
  • 접근 가능한 디자인에서 WCAG AA/AAA 준수를 위해 글자색과 배경색의 대비를 검사
  • 음영 생성기를 사용하여 디자인 시스템 구축에 필요한 완전한 명암 계열을 빠르게 생성
  • 색상 조화를 사용하여 브랜딩이나 포스터 디자인을 위한 전문적인 배색(보색, 유사색 등) 생성
  • 영감을 위해 참고 이미지나 사진에서 주요 색상을 추출(이미지 색상 추출)
  • 디자인 목업의 여러 색상 값을 일괄 처리하여 필요한 형식으로 한 번에 변환
  • 호버 등 CSS 상태를 작성할 때 HSL 또는 OKLCH로 밝기와 채도를 간편하게 조정
  • 현대 CSS의 OKLCH 색 공간을 사용하여 지각적으로 균일한 디자인 시스템 색상 구축
  • 다양한 형식이 동일한 색상을 어떻게 표현하는지 인터랙티브하게 시각 비교하며 색 공간 원리를 학습
  • 아무 색상 값에 해당하는 영어 CSS 색상 이름을 빠르게 찾아 참고와 커뮤니케이션을 용이하게

주요 기능

  • 14가지 색상 형식 변환: HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH, CSS 지정 색상 이름 지원
  • 스마트 입력 인식: 아무 색상 형식이나 붙여넣으면 자동 감지; 단축형 #rgb, 알파 포함 #rrggbbaa, rgb(), hsl(), CSS 색상 이름 지원
  • 실시간 슬라이더 조정: RGB 빨강/초록/파랑, HSL 색상/채도/명도, HSV 슬라이더로 즉각적인 WYSIWYG 색상 조정
  • 알파 투명도 지원: 알파 채널이 포함된 RGBA 및 HSLA 변환, 퍼센트와 소수점 두 가지 불투명도 형식 모두 지원
  • CSS 색상 이름 매칭: 가장 가까운 표준 CSS 색상 이름(140가지 이상)을 자동으로 찾아 빠른 참조 제공
  • WCAG 대비 검사기: 흰색 글자와 검은색 글자에 대한 대비를 실시간으로 계산하고 AA(≥4.5:1)와 AAA(≥7:1) 통과/실패 여부를 자동으로 표시
  • 색상 조화 생성기: 보색, 유사색, 삼각 보색, 분할 보색, 사각 보색 등 5가지 클래식 배색을 원클릭으로 생성
  • 음영 생성: 기존 RGB 혼합 음영과 지각적으로 균일한 OKLCH 음영을 모두 제공하며, 11단계 명도 스텝을 즉시 생성
  • 일괄 변환: 여러 줄 입력으로 여러 색상 값을 한 번에 처리—디자인 시스템 색상 팔레트 처리에 최적
  • 이미지 색상 추출: 이미지를 업로드하면 자동으로 16가지 주요 색상을 샘플링하여 추출. 참고 자료나 사진에서 팔레트를 뽑아내는 데 편리
  • 원클릭 복사: 각 색상 형식 옆에 복사 버튼을 배치하여 표준 표기법으로 즉시 복사—CSS나 디자인 소프트웨어에 바로 붙여넣기 가능
  • 랜덤 색상 생성기: 원클릭으로 무작위 색상을 생성하여 즉각적인 영감 제공
  • 순수 브라우저 처리: 모든 색상 계산은 브라우저에서 로컬로 실행되어 서버 업로드 없음—회원가입 없이 즉시 사용 가능
  • 반응형 디자인: 데스크톱, 모바일, 태블릿에서 매끄럽게 동작—스마트폰에서도 편안하게 색상을 조정하고 값을 복사 가능

이용 방법

  1. 상단 입력창에 아무 색상 형식 값을 입력하거나, 색상 견본을 클릭하여 선택기를 사용하거나, RGB/HSL/HSV 슬라이더를 드래그하여 조정
  2. 도구가 HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH를 포함한 14가지 형식 모두에 실시간으로 자동 변환
  3. 배색에는 '색상 조화', 명암 단계에는 '음영', 일괄 변환이나 이미지 색상 추출에는 '일괄/추출' 탭으로 전환
  4. 각 색상 형식 옆의 복사 버튼을 클릭하면 표준 표기법을 직접 복사하여 사용 가능

자주 묻는 질문

색상 변환기는 어떤 색상 형식을 지원하나요?

HEX(3자리 단축형과 알파 포함 8자리), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ(D65 광원 기준 CIE 1931), CIE LAB, LCH, OKLAB, OKLCH와 더불어 140가지 이상의 표준 CSS 색상 이름까지 총 14가지 일반적인 색상 형식 간 변환을 지원합니다. 아무 형식이나 입력하면 다른 모든 형식으로 자동 변환됩니다.

이 색상 변환 도구는 어떻게 사용하나요?

매우 간단합니다: 1) 상단 입력창에 아무 색상 값을 입력하세요—예를 들어 #22c55e, rgb(34,197,94), hsl(142,71%,45%), 혹은 green 같은 색상 이름도 괜찮습니다; 2) 또는 색상 견본을 클릭하여 선택기를 사용하거나, RGB/HSL/HSV 슬라이더를 드래그하여 실시간으로 조정하세요; 3) 아래쪽에 14가지 형식의 변환 결과가 즉시 표시됩니다—각 형식 옆의 복사 버튼을 클릭하면 클립보드에 복사됩니다.

HEX, RGB, HSL의 차이는 무엇인가요? 각각 어디에 사용되나요?

HEX는 웹에서 가장 흔한 16진수 표기법입니다—빨간색은 #ff0000—CSS와 디자인 전달 파일에서 널리 사용됩니다. RGB는 빨강, 초록, 파랑을 0-255 값으로 표현하며 화면 디스플레이의 기초가 되는 색상 모델입니다. HSL은 색상(0-360°), 채도, 명도를 사용하여 인간의 색 지각에 더 잘 부합하며 디자이너가 색상을 조정하기에 직관적입니다. CMYK는 시안, 마젠타, 옐로우, 블랙 잉크의 비율로 인쇄에 사용됩니다. OKLCH는 현대적인 지각적으로 균일한 색 공간으로 시각적으로 매끄러운 그라데이션과 음영 단계를 생성합니다.

WCAG 대비란 무엇인가요? 어느 정도 비율이 접근성 기준을 충족하나요?

WCAG 대비는 글자색과 배경색의 휘도 차이를 측정하여 시각 장애가 있는 사용자가 콘텐츠를 읽기 쉽도록 보장합니다. 웹 콘텐츠 접근성 지침에 따르면: 일반 본문 텍스트는 레벨 AA(통과)에서 ≥4.5:1, 레벨 AAA(우수)에서 ≥7:1이 필요합니다; 큰 텍스트(18pt 이상 굵은 글씨 또는 24pt 이상 보통 글씨)는 AA에서 ≥3:1이 필요합니다. 이 도구는 흰색 글자와 검은색 글자 모두에 대한 대비를 실시간으로 표시하며 AA 및 AAA 기준의 통과/실패 여부를 자동으로 판정합니다.

RGBA의 A는 무슨 뜻인가요? 투명도는 어떻게 설정하나요?

RGBA의 A는 알파 채널의 약자로 투명도를 제어합니다—값은 0(완전 투명)부터 1(완전 불투명)까지의 범위입니다. 예를 들어 rgba(34,197,94,0.5)는 반투명 녹색입니다. 투명도는 알파 슬라이더로 조정할 수 있습니다; 변환 결과에는 알파가 포함된 RGBA 형식과 HSLA 형식이 모두 표시됩니다. HEX에서도 6자리 색상 코드 뒤에 16진수 두 자리를 추가하여 투명도를 지원할 수 있습니다—예를 들어 #22c55e80은 50% 불투명도를 나타냅니다.

OKLCH와 LCH는 무엇인가요? HSL과 어떻게 다른가요?

LCH와 OKLCH는 지각적으로 균일한 색 공간으로, L은 명도, C는 채도, H는 색상입니다. HSL 대비 가장 큰 장점은: 같은 L 값을 가진 색이 실제로 시각적으로 동일한 밝기로 보인다는 점으로, 디자인 시스템에 매우 중요합니다—HSL로 색상은 다르지만 명도가 같은 팔레트를 생성하면 일부 색이 다른 색보다 어둡게 보일 수 있지만, OKLCH는 지각적 명도의 균일성을 보장합니다. OKLCH는 LAB/LCH보다 새롭고 계산이 더 간단하며 색상 예측이 더 정확하여 현대 CSS(CSS Color Level 4)에서 권장됩니다.

이미지 색상 추출 기능은 어떻게 사용하나요?

'일괄/추출' 탭으로 전환하고 업로드를 클릭하여 이미지를 선택하면—도구는 자동으로 이미지를 100×100 그리드로 확대/축소하고 고르게 분포된 위치에서 16가지 색상을 추출하여 견본과 색상 값을 표시합니다. 아무 견본이나 클릭하면 해당 색상을 기본 색상으로 설정하여 추가 조정과 변환을 할 수 있습니다. 참고 이미지, 디자인 목업, 사진에서 빠르게 팔레트를 추출하는 데 최적입니다.

어떤 색상 조화 배색을 사용할 수 있고 어떻게 사용하나요?

도구에는 5가지 클래식 조화 배색이 준비되어 있습니다: 1) 보색: 180° 떨어진 색으로 높은 대비; 2) 유사색: 30° 떨어진 색으로 자연스러운 조화; 3) 삼각 보색: 120° 떨어진 색으로 선명한 균형; 4) 분할 보색: 기본 색상 + 보색 양쪽 30° 위치의 색으로 부드러움이 있는 대비; 5) 사각 보색: 90° 간격의 4가지 색으로 풍부한 다양성. '색상 조화' 탭으로 전환하면 생성된 배색이 표시됩니다—아무 견본이나 클릭하면 기본 색상으로 설정할 수 있습니다.

CMYK 변환 결과를 인쇄에 직접 사용할 수 있나요?

참고용으로는 적합하지만 주의점이 있습니다: 화면은 가산 혼합 방식의 RGB(광원 발광)를 사용하고 인쇄는 감산 혼합 방식의 CMYK(잉크 반사)를 사용합니다. 이 둘은 색 영역이 다릅니다—선명한 녹색이나 파란색 같은 밝은 RGB 색상 중 일부는 CMYK 잉크로 정확하게 재현할 수 없어 약간의 색상 차이가 발생합니다. 이 도구는 표준 RGB-CMYK 변환 공식을 사용하며 초기 단계의 논의와 빠른 참고에 적합합니다. 최종 인쇄 출력에는 적절한 ICC 색상 프로필을 사용한 전문 디자인 소프트웨어로 소프트 프루프를 진행하는 것을 권장합니다.

일괄 변환은 어떻게 작동하나요? 한 번에 몇 가지 색상을 변환할 수 있나요?

'일괄/추출' 탭으로 전환하고 텍스트창에 한 줄에 하나씩 색상을 입력한 다음(HEX/RGB/HSL/CSS 색상 이름을 자유롭게 혼합 가능), 일괄 변환을 클릭하면 모든 색상을 한 번에 처리합니다. 결과에는 각 색상의 견본과 HEX 값이 표시됩니다. 이론상 제한은 없지만 수백 가지 색상이 있는 경우 브라우저 렉을 피하기 위해 나누어 처리하는 것을 권장합니다.

모바일에서 색상 변환기를 사용할 수 있나요?

네. 이 도구는 반응형 디자인을 채택하여 모바일, 태블릿, 모든 크기의 데스크톱 화면에서 문제없이 동작합니다. 모바일에서도 색상 값 입력, 슬라이더로 색상 조정, 변환 결과 확인, 값 복사가 가능하며—모든 기능이 데스크톱과 동일하게 사용할 수 있습니다. 또한 완전히 로컬에서 계산되므로 모바일 데이터를 소비하지 않습니다.

입력하면 '인식할 수 없는 색상 형식'이라고 표시되면 어떻게 하나요?

입력 형식을 확인하세요: 1) HEX는 #(생략 가능)로 시작하고 3, 6, 또는 8자리의 16진수 문자(0-9/a-f)가 필요합니다—#f00, #ff0000, #ff0000ff는 모두 유효합니다; 2) RGB 형식은 rgb(r,g,b)로 쉼표로 구분된 3개의 0-255 값이 필요합니다; 3) HSL 형식은 hsl(h,s%,l%)로 색상 0-360°, 채도와 명도 0-100%가 필요합니다; 4) CSS 색상 이름은 red/blue/green 등의 표준 이름이어야 합니다—한국어 색상 이름은 지원하지 않습니다.

변환한 색상이 소프트웨어마다 다르게 보이는 이유는 무엇인가요?

이것은 정상적인 색상 관리 동작입니다: 소프트웨어, 모니터, 운영체제가 다르면 사용하는 색상 프로필(sRGB, Display P3, Adobe RGB)도 다를 수 있어 동일한 색상 값이라도 시각적으로 약간의 차이가 발생할 수 있습니다. 웹페이지는 기본적으로 sRGB 색 공간을 사용합니다—Photoshop 같은 소프트웨어에서 Adobe RGB나 Display P3 프로필을 사용하고 있다면 웹에서 일관되게 표시하기 위해 내보낼 때 sRGB로 변환해야 합니다.

프론트엔드 개발에서는 어떤 색상 형식을 사용해야 하나요?

현대 CSS는 모든 색상 형식을 지원합니다: HEX는 가장 일반적이고 호환성이 가장 높으며 디자인 전달의 표준입니다; RGB/RGBA는 동적인 불투명도 조정이나 채널 수준 조작이 필요할 때 적합합니다; HSL은 코드에서 직접 색상 베리에이션을 작성하기에 가장 직관적입니다(호버 시 L만 높여서 밝게 하는 등); OKLCH는 미래의 표준으로 CSS Color Level 4에서 네이티브 지원되며 지각적 균일성으로 인해 음영과 그라데이션 생성에 최적입니다—프로젝트의 호환성 요구 사항에 따라 선택하세요.

음영 생성 기능은 무엇을 위한 것인가요? 기존 음영과 OKLCH 음영의 차이는 무엇인가요?

음영 생성은 한 색상 계열의 11단계(50-900) 명암 변형을 즉시 만들어 디자인 시스템 팔레트(Tailwind의 색상 시스템 등)를 구축하는 데 최적입니다. 기존 음영은 RGB 공간에서 단순히 흰색으로 혼합하는 방식으로—수치상으로는 균일하지만 중간 톤이 불균일하게 보일 수 있습니다. OKLCH 음영은 색상과 채도를 유지한 채 명도 L만 조정하여 명암 간 시각적으로 매끄러운 전환을 생성합니다—더 전문적이고 세련된 결과물을 만들어 줍니다.

색 공간과 색상 형식 변환에 대하여

색상 변환기는 디자이너와 프론트엔드 개발자에게 가장 자주 사용되는 도구 중 하나로, 서로 다른 색상 표현 간의 정확한 변환을 제공합니다. 색 그 자체는 시각적 지각입니다; 컴퓨터와 인쇄에서 색을 표현하기 위해 사람들은 동일한 색을 서로 다른 수치 체계로 기술하는 여러 색상 모델(색 공간)을 개발해 왔으며, 각 모델은 서로 다른 시나리오와 장치에 적합합니다.

일반적인 색상 형식에는 다음이 포함됩니다: HEX(16진수 RGB, 웹 표준 표기법), RGB(빨강/초록/파랑을 0-255로 표현, 화면 디스플레이의 기초), HSL(색상/채도/명도, 인간의 색 조정에 가장 직관적), CMYK(시안/마젠타/옐로우/키 블랙의 비율로 인쇄용). 최근 OKLCH 같은 지각적으로 균일한 색 공간이 인기를 얻고 있습니다. 동일한 명도 값을 가진 색이 실제로 시각적으로 동일한 밝기로 보인다는 점을 수학적으로 보장하여 디자인 시스템 구축과 그라데이션 생성에 매우 중요하기 때문입니다.

왜 색상 형식 간에 변환해야 할까요? 도구, 플랫폼, 출력 매체가 다르면 사용하는 색상 형식도 다릅니다: 웹 CSS는 HEX/RGB/HSL/OKLCH 등을 지원; Figma/Sketch 같은 디자인 소프트웨어는 기본으로 HEX를 사용; 인쇄는 CMYK가 필요; 그리고 호버 상태나 불투명도 변경처럼 코드에서 동적으로 색을 조정할 때는 HSL과 OKLCH가 HEX보다 훨씬 편리합니다. 정확한 색상 변환은 디자인 목업과 최종 구현 간의 색상 일관성을 보장합니다.

WCAG 대비는 웹 접근성의 중요한 기준으로, 전경 텍스트와 배경색의 휘도 차이를 측정하여 시각 장애가 있는 사용자의 가독성을 보장합니다. 일반 본문 텍스트는 4.5:1의 대비(AA 레벨)가 필요하며, 중요한 콘텐츠는 7:1(AAA 레벨)이 권장됩니다. 이 도구는 이를 실시간으로 계산하여 디자이너가 나중에 수정하는 것이 아니라 색상 선택 시 접근성을 고려할 수 있도록 돕습니다.

색상 조화는 색상환을 기반으로 한 고전적인 색채 이론으로, 색상환 주위의 색상 기하학적 위치를 사용하여 시각적으로 통일된 조합을 생성합니다. 보색은 버튼과 강조에 적합한 강한 대비를 만들며; 유사색은 넓은 배경 영역에 조화롭고 자연스럽습니다; 삼각 보색과 사각 보색 배색은 브랜드 아이덴티티에 균형과 풍부함을 제공합니다. 이 도구에는 가장 흔히 사용되는 5가지 조화 배색이 포함되어 있어 원클릭으로 팔레트를 생성합니다.

색상 음영/틴트는 동일한 색상의 명암 변형으로, 디자인 시스템을 구축하기 위한 기초입니다(Tailwind CSS의 50-900 팔레트처럼). 기존 RGB 음영은 단순히 흰색으로 혼합하지만 시각적으로 불균일하게 보일 수 있습니다; OKLCH 기반 음영은 색상과 채도를 유지한 채 명도만 조정하여 시각적으로 매끄러운 명암 전환을 생성합니다—현대 디자인 시스템에 권장되는 방식입니다. 이 도구는 비교를 위해 두 가지 음영 스타일을 모두 제공합니다.

왜 로컬 처리가 중요할까요? 색상 변환은 순전히 수학적인 것으로 서버에 데이터를 업로드할 필요가 전혀 없습니다. 이 도구의 모든 계산은 브라우저에서 완전히 로컬로 실행됩니다—페이지를 열면 즉시 사용할 수 있고 회원가입이나 로그인이 필요 없으며 이미지나 색상 데이터가 업로드되지 않습니다. 빠르고 프라이버시가 보호되며—공개되지 않은 기밀 디자인 목업의 색상도 안심하고 사용할 수 있습니다.

중요한 참고사항: 색상 형식 변환은 수학적으로는 정확하지만 화면의 색 영역, 모니터 캘리브레이션, 인쇄 프로세스로 인해 동일한 색상 값이라도 장치와 매체 간에 약간 다르게 보일 수 있습니다. 화면은 가산 혼합 방식의 RGB(빛을 더할수록 밝아짐)를 사용하고 인쇄는 감산 혼합 방식의 CMYK(잉크를 겹칠수록 어두워짐)를 사용합니다. 둘은 색 영역이 다르며 채도가 높은 RGB 색상 중 일부는 CMYK 잉크로 정확하게 재현할 수 없습니다. 변환 결과는 디지털 디자인과 웹 개발에 최적입니다; 최종 인쇄 출력에는 전문 색상 관리 소프트웨어로 프루프를 진행하는 것을 권장합니다.

术语表

HEX
# 뒤에 오는 6자리 16진수로 RGB를 표현하는 16진수 색상 표기법(각 채널 2자리, 00-FF)—빨간색은 #FF0000이며, 웹과 디자인 소프트웨어에서 가장 일반적인 형식입니다. 3자리 단축형(#f00 등)과 알파 포함 8자리 표기법을 지원합니다.
RGB/RGBA
빨강, 초록, 파랑을 0-255 범위의 3가지 값으로 색을 표현; rgba()는 투명도를 위한 알파 채널(0-1)을 추가합니다. 화면 디스플레이의 기초가 되는 색상 모델입니다.
HSL/HSLA
색상(0-360°), 채도(0-100%), 명도(0-100%)로 색을 표현하여 인간의 색 지각에 더 잘 부합—디자이너가 색을 조정하기에 직관적입니다.
HSV/HSB
색상, 채도, 값/밝기—HSL과 유사하지만 명도 계산이 다르며 Photoshop 같은 디자인 소프트웨어의 색상 선택기에서 흔히 볼 수 있습니다.
HWB
색상, 하얀 기운, 검은 기운—CSS Color Level 4에서 추가된 형식으로 HSL보다 직관적입니다: 흰색이나 검은색을 더하는 것만으로 색조를 조정할 수 있습니다.
CMYK
시안, 마젠타, 옐로우, 키(블랙) 잉크의 비율로, 인쇄 업계에서 잉크 혼합 비율을 표현하는 데 사용합니다.
CIE LAB/LAB
국제조명위원회(CIE)가 정의한 지각적으로 균일한 색 공간: L은 명도(0-100), a는 녹색-적색 축, b는 파란색-노란색 축—수치적 거리가 지각되는 색상 차이에 대응하도록 설계되었습니다.
LCH
LAB에서 변환된 극좌표 표현: L 명도, C 채도, H 색상—HSL보다 지각적으로 균일하며 정밀한 지각 제어가 필요한 전문 디자인에 적합합니다.
OKLAB/OKLCH
2020년에 도입된 차세대 지각적으로 균일한 색 공간—LAB/LCH보다 계산이 간단하고 색상 예측이 더 정확합니다. OKLCH는 그 극좌표 형태로 현대 CSS에서 네이티브 지원되며 디자인 시스템 구축에 권장됩니다.
WCAG 대비
웹 콘텐츠 접근성 지침에서 규정한 전경 텍스트와 배경의 휘도 비율: 본문 텍스트의 경우 AA는 ≥4.5:1, AAA는 ≥7:1이 필요—시각 장애가 있는 사용자의 가독성을 보장합니다.
색상 조화
색상환 주위 위치를 기반으로 한 색채 이론으로, 기하학적 관계(보색 180°, 유사색 30° 간격, 삼각 보색 120° 간격 등)를 사용하여 시각적으로 통일되고 미적으로 아름다운 조합을 생성합니다.
음영/틴트
동일한 색상의 명암 변형 범위로, 일반적으로 50부터 900까지 11단계로 생성되며 단일 색상의 다양한 용도(배경, 테두리, 텍스트, 강조)를 위해 디자인 시스템에서 사용됩니다.

14가지 색상 형식 비교 퀵 레퍼런스

각 색상 형식의 값 범위, 순수한 빨간색 예시, 주요 사용 사례는 다음과 같습니다:

형식값 범위순수 빨강 예시주요 사용 사례
HEX#RRGGBB 00-FF#ff0000웹 CSS, 디자인 전달—가장 범용적인 형식
RGBR/G/B: 0-255rgb(255,0,0)화면 디스플레이 기초, Canvas/WebGL 프로그래밍
RGBAA 추가: 0-1rgba(255,0,0,1)투명도가 필요한 CSS, 오버레이 효과
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)디자이너 색상 조정, 코드 내 동적 색상 조작
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Photoshop 등 디자인 소프트웨어 색상 선택기
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4—흰색/검은색 추가로 직관적 조정
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)인쇄·출판 업계
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)현대 CSS, 디자인 시스템 팔레트, 지각적으로 균일한 그라데이션

WCAG 접근성 대비 기준 레퍼런스

웹 콘텐츠 접근성 지침(WCAG 2.1)의 최소 대비 요건:

레벨대비 요건적용 텍스트 유형비고
AA≥ 4.5:1일반 본문 텍스트(18pt 미만 보통 또는 14pt 미만 굵게)최소 통과 기준, 법적 준수 요건
AA≥ 3:1큰 텍스트(18pt 이상 보통 또는 14pt 이상 굵게)큰 제목은 요건이 완화될 수 있음
AAA≥ 7:1일반 본문 텍스트(강화)중요한 콘텐츠, 장문 독해에 권장
AAA≥ 4.5:1큰 텍스트(강화)우수한 접근 가능한 디자인

5가지 색상 조화 배색 퀵 레퍼런스

색상환 각도를 기반으로 한 클래식 색상 조합—클릭으로 즉시 생성:

배색 유형색상 간격색상 수시각 효과 및 사용 사례
보색180° 간격2가지 색강한 대비—버튼, 강조, CTA에 최적
유사색±30° 인접3가지 색조화롭고 자연스러움—넓은 배경, 기본 팔레트에 최적
삼각 보색120° 간격3가지 색선명하고 균형 잡힘—브랜딩, 일러스트레이션에 최적
분할 보색기본 + 보색 ±30°3가지 색부드러움이 있는 대비—보색보다 세련된 인상
사각 보색90° 간격4가지 색풍부하고 다양함—복잡한 디자인, 어린이 제품에 최적

Privacy & Security

이 색상 변환기는 모든 색상 계산, 이미지 색상 추출, 일괄 처리를 브라우저 내에서 순수 JavaScript를 사용하여 브라우저 메모리 상에서 완전히 로컬로 실행합니다. 입력한 색상 값이나 업로드한 이미지가 네트워크를 통해 서버로 전송되지 않으며, 로그, 캐시, 저장되지도 않습니다. 처리 후 페이지를 닫거나 새로고침하면 브라우저 메모리에서 임시 데이터가 자동으로 삭제됩니다. 공개되지 않은 디자인 목업의 색상이나 브랜드 색상 같은 민감한 콘텐츠도 유출 위험 없이 안심하고 사용할 수 있습니다.

Authoritative References

Troubleshooting

입력하면 '인식할 수 없는 색상 형식'이라고 표시되면 어떻게 하나요?

확인하세요: 1) HEX 형식은 유효한 16진수 문자(0-9, a-f, A-F)를 3, 6, 또는 8자리로 사용; #는 생략 가능; 2) RGB/RGBA 형식은 괄호 안에 3개 또는 4개의 값이 필요—R/G/B는 0-255, 알파는 0-1이며 쉼표로 구분; 3) HSL/HSLA 형식은 H가 0-360, S와 L이 0-100의 퍼센트 값이어야 함; 4) CSS 색상 이름은 표준 영어 이름이어야 함—한국어 색상 이름은 지원하지 않습니다.

CMYK 변환이 실제 인쇄와 다르게 보이는 이유는 무엇인가요?

이것은 예상되는 현상입니다: RGB와 CMYK는 색 영역이 달라 많은 밝은 RGB 색상은 CMYK 잉크로 재현할 수 없습니다. 이 도구는 초기 참고에 적합한 표준 변환 공식을 사용합니다. 전문 인쇄에는: 1) 디자인 소프트웨어에서 CMYK 모드로 변환; 2) 올바른 ICC 색상 프로필 사용; 3) 디지털 프루프를 실시하세요.

동일한 색상이 휴대폰과 컴퓨터에서 다르게 보이는 이유는 무엇인가요?

화면마다 색 영역 범위, 색 온도, 밝기, 캘리브레이션이 다릅니다: Mac은 기본으로 Display P3 넓은 색 영역을 사용하고 대부분의 Windows PC는 sRGB를 사용하며 모바일 화면도 다양합니다. 웹 디자인은 대부분의 장치에서 일관된 표시를 위해 기준선으로 sRGB에 표준화하는 것이 권장됩니다.

색상 추출용 이미지 업로드가 응답하지 않나요?

확인하세요: 1) 표준 이미지 형식(JPG/PNG/GIF/WebP)을 업로드하고 있는지; 2) 이미지 파일이 손상되지 않았는지; 3) 파일 크기가 너무 크지 않은지(5MB 이하 권장). 이미지 색상 추출은 캔버스 내에서 로컬로 처리되며 서버에 업로드되지 않습니다—새로고침하고 다시 업로드하면 대부분의 문제가 해결됩니다.