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

브라우저에서 바로 16진수를 RGB, HSL, HSV로 변환하고 조화 견본을 복사하고 CSS 또는 JSON을 내보낼 수 있습니다.

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

16진수 색상

#RGB 또는 #RRGGBB(# 포함 또는 제외)를 입력합니다. 잘못된 값은 마지막으로 좋은 변환을 유지합니다.

전환

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

하모니 견본

하모니형

견본 수

틴트/쉐이드 스트립

색조/색조 단계

견본 내보내기

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",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

16진수 색상을 선택하거나 붙여넣고, RGB, HSL 및 HSV로 변환하고, 보색/유사/삼중/단색 견본을 생성하고, 값을 복사하고, CSS 또는 JSON을 내보냅니다. 무료이며 빠르며 브라우저에서 완전히 실행됩니다.

이 16진수 색상 선택기를 사용하는 방법

16진수 값을 입력하거나 붙여넣거나 기본 선택기를 사용하세요. 페이지는 즉시 RGB, HSL 및 HSV로 변환하고 조화 견본과 색조/음영 스트립을 생성하고 모든 것을 복사 가능한 상태로 유지합니다. 설정을 URL과 공유하세요. 상태는 쿼리 문자열에 저장됩니다.

16진수, RGB, HSL 및 HSV 참조

Hex는 컴팩트 RGB 인코딩입니다. RGB는 빨간색/녹색/파란색 채널을 나타냅니다. HSL은 색상, 채도, 밝기를 표현합니다. HSV는 색상, 채도, 명도(밝기)를 사용합니다. 이 도구는 브라우저에서 결정론적 수학을 사용하므로 업로드나 외부 API가 없습니다.

상보성, 유사성, 삼원성, 단색성

보색은 색조를 180° 회전시킵니다. 베이스 주위의 고정된 각도에 따라 유사한 단계의 색조가 나타납니다. Triadic은 120° 오프셋을 사용합니다. 단색은 색상을 유지하고 밝기를 변화시킵니다. 카운트 컨트롤은 유사 및 단색 모드에 적용됩니다.

CSS 변수 및 JSON 내보내기

내보내기는 안정적인 이름(예: --color-base, --color-analogous-1)이 있는 :root 사용자 정의 속성과 baseHex, 조화 모드 및 스크립트 또는 디자인 토큰에 대한 견본 목록이 있는 JSON을 생성합니다.

자주 묻는 질문

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

그렇습니다. 세 자리 16진수는 숫자 쌍별로 확장되므로 #ABC는 #AABBCC가 됩니다.

내 16진수가 유효하지 않으면 어떻게 되나요?

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

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

이는 결정론적입니다. 보완은 HSL에서 180° 색조 변화입니다. 유사하게 고정된 색조 단계를 사용합니다. 3극은 120° 오프셋을 사용합니다. 단색은 베이스의 색상과 채도를 유지하면서 밝기를 변경합니다.

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

안정적인 키: baseHex, 하모니, 하모니카운트(해당되는 경우), 하모니Swatches(16진수 문자열), TintShadeStrip 및 StripCount - 도구 또는 문서화에 적합합니다.

내 색상을 공유할 수 있나요?

그렇습니다. URL은 16진수, 조화 모드, 개수 및 스트립 크기로 업데이트되므로 정확한 설정을 북마크에 추가하거나 공유할 수 있습니다.