16진수 색상 선택기 및 변환기(RGB, HSL, HSV, CMYK, OKLCH)

모든 색상을 HEX, RGB, HSL, HSV, CMYK, OKLCH로 변환하고 대비를 확인하며 조화 스와치를 복사하고 CSS 또는 JSON을보내세요—브라우저에서 바로.

대화형 기능에는 JavaScript가 필요합니다. 이 도구를 사용하려면 브라우저에서 JavaScript를 활성화하세요.

색상 값

hex(#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() 또는 CSS 색상 이름을 입력하세요. 잘못된 값은 마지막 유효 변환을 유지합니다.

가장 가까운 CSS 이름: royalblue

불투명도100%

변환

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

WCAG 대비

흰 배경 위

3.68:1

WCAG AA 통과(큰 텍스트만)

검은 배경 위

5.71:1

WCAG AA 통과(일반 텍스트)

조화 스와치

조화 유형

스와치 수

틴트/쉐이드 스트립

틴트/쉐이드 단계

스와치보내기

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

모든 색상 형식을 선택하거나 붙여넣고 HEX, RGB, HSL, HSV, CMYK, OKLCH로 변환하고 WCAG 대비를 확인하며 조화 스와치를 생성하고 값을 복사하고 CSS 또는 JSON을보냅니다. 무료이며 빠르고 브라우저에서 완전히 실행됩니다.

이 색상 선택기 사용 방법

지원되는 색상 형식을 입력하거나 붙여넣고, 불투명도를 조정하거나 기본 선택기를 사용하세요. 페이지는 HEX, RGB, HSL, HSV, CMYK, OKLCH로 즉시 변환하고, 흰색과 검은색에 대한 WCAG 대비를 표시하며, 조화 스와치와 틴트/쉐이드 스트립을 생성하고 모든 것을 복사 가능한 상태로 유지합니다. URL로 설정을 공유하세요—상태는 쿼리 문자열에 저장됩니다.

HEX, RGB, HSL, HSV, CMYK, OKLCH 참조

Hex는 간결한 RGB 인코딩입니다. RGB는 빨강/녹색/파랑 채널을 설명합니다. HSL은 색상, 채도, 밝기를 표현합니다. HSV는 색상, 채도, 값(밝기)을 사용합니다. CMYK는 인쇄 잉크 비율을 모델링합니다. OKLCH는 지각적으로 균일한 CSS 색 공간입니다. 이 도구는 브라우저에서 결정론적 계산을 사용하며 업로드나 외부 API가 없습니다.

보색, 유사색, 삼원색, 분할 보색, 사원색, 단색

보색은 색상을 180° 회전합니다. 유사색은 기준색 주위로 고정 각도로 색상을 진행합니다. 삼원색은 120° 오프셋을 사용합니다. 분할 보색은 보색 근처의 두 색상을 추가합니다. 사원색은 90° 직사각형 오프셋을 사용합니다. 단색은 색상을 유지하고 밝기를 변화시킵니다. 개수 제어는 유사색과 단색 모드에 적용됩니다.

CSS 변수 및 JSON보내기

보내기는 안정적인 이름(예: --color-base, --color-analogous-1)의 :root 사용자 정의 속성과 baseHex, alpha, namedColor, 조화 모드, 대비 비율, 스크립트나 디자인 토큰용 스와치 목록이 포함된 JSON을 생성합니다.

WCAG 대비 검사기

대비 비율은 WCAG 2.x에 따라 상대 휘도에서 계산됩니다. AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요합니다. AAA는 7:1이 필요합니다. 밝거나 어두운 배경에서 텍스트나 UI 색상을 선택할 때 미리보기를 활용하세요.

자주 묻는 질문

어떤 색상 형식을 입력할 수 있나요?

Hex(#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() 및 cornflowerblue나 rebeccapurple 같은 모든 표준 CSS 이름 색상.

#ABC는 6자리로 확장되나요?

예. 3자리 hex는 자릿수 쌍별로 확장되므로 #ABC는 #AABBCC가 됩니다.

색상이 유효하지 않으면 어떻게 되나요?

인라인 오류가 표시됩니다. 유효한 값을 다시 입력할 때까지 마지막 유효 색상이 변환 행, 선택기 및보내기에 유지됩니다.

WCAG 대비 검사기는 어떻게 작동하나요?

상대 휘도를 사용하여 색상과 순백색 또는 순흑색 간의 대비 비율을 계산합니다. 결과는 일반 또는 큰 텍스트에 대해 AA 또는 AAA 기준을 통과하는지 보여줍니다.

조화 색상은 어떻게 계산되나요?

결정론적입니다: 보색은 180° 색상 이동, 유사색은 고정 색상 단계, 삼원색은 120° 오프셋, 분할 보색은 보색 근처 색상, 사원색은 90° 직사각형 오프셋, 단색은 기준의 색상과 채도를 유지하며 밝기를 변화시킵니다.

JSON보내기에는 무엇이 포함되나요?

안정적인 키: baseHex, alpha, namedColor, harmony, 해당 시 harmonyCount, harmonySwatches, tintShadeStrip, stripCount 및 대비 비율—도구나 문서화에 적합합니다.

색상을 공유할 수 있나요?

예. URL은 hex, alpha, 조화 모드, 개수 및 스트립 크기로 업데이트되어 정확한 설정을 북마크하거나 공유할 수 있습니다.