NB Developer Tools · 무료 도구 · HEX·RGB 색상 변환

HEX·RGB 색상 변환

디자인 파일은 HEX, CSS 는 RGB, 색을 조절할 때는 HSL 이 편합니다. 하나만 넣으면 나머지를 다 보여주고, **글자 대비비까지 함께 계산**해 줍니다.

이렇게 씁니다

색상 값을 입력합니다. `#7c3aed` 또는 `rgb(124,58,237)` 형식을 인식합니다.
실행하기를 누릅니다.
HEX·RGB·HSL 값과 밝기 단계, 흰/검 글자 대비비가 나옵니다.

세 표기법의 쓸모

HEX  #7c3aed          디자인 파일·CSS 에서 가장 흔하다
RGB  rgb(124,58,237)  투명도를 붙일 때(rgba) 편하다
HSL  hsl(263,79%,58%) 색조는 그대로 두고 **밝기만** 조절할 때 압도적으로 편하다

[대비비(contrast ratio)]
  글자와 배경의 밝기 차이를 1:1 ~ 21:1 로 나타낸다
  WCAG 기준 — 본문 글자 4.5:1 이상 · 큰 글자(18pt+ 또는 14pt bold) 3:1 이상
  이 도구는 이 색 위에 **흰 글자**와 **검은 글자**를 올렸을 때의 대비비를 각각 준다

버튼·배지 색을 정할 때 대비비를 먼저 보세요. 브랜드 색이 예뻐도 그 위에 흰 글자가 안 읽히면 쓸 수 없습니다. 대비비가 둘 다 낮으면 그 색은 배경으로만 쓰고 글자는 다른 색을 얹어야 합니다.

결과 읽는 법

HSL 의 세 번째 값(명도)만 올리거나 내리면 같은 계열의 밝은/어두운 색이 나옵니다. 이 도구가 주는 밝기 단계가 그것입니다.
대비비가 4.5:1 미만이면 본문 글자색으로 쓰지 마세요.
3자리 HEX(`#f0a`)는 6자리(`#ff00aa`)와 같은 색입니다.

주의할 점

대비비는 색만 봅니다. 실제 가독성은 글자 굵기·크기·배경 패턴에도 좌우됩니다.
모니터 보정과 다크모드에 따라 체감이 달라집니다. 두 모드에서 모두 확인하세요.

자주 묻는 질문

HEX 를 RGB 로 바꾸는 방법이 뭔가요?

HEX 는 두 자리씩 16진수로 R·G·B 를 나타냅니다. `#7c` = 124, `3a` = 58, `ed` = 237 이라 rgb(124,58,237) 이 됩니다.

HSL 은 언제 쓰나요?

같은 색조에서 밝기만 바꿔 색 계열을 만들 때 가장 편합니다. HEX 로는 감으로 맞춰야 합니다.

대비비는 얼마여야 하나요?

WCAG 기준으로 본문은 4.5:1 이상, 큰 글자는 3:1 이상입니다.

HEX·RGB 색상 변환 열기 — 무료 · 설치 없음

NB Developer Tools의 다른 도구

Base64 인코딩·디코딩 — 텍스트를 Base64로 바꾸거나 되돌립니다
JSON 포맷터 — JSON을 보기 좋게 정리하거나 압축합니다
URL 인코딩·디코딩 — URL과 쿼리 문자열을 안전하게 변환합니다
UUID 생성기 — UUID v4를 원하는 개수·형식으로 만듭니다
SHA-256 해시 생성기 — 텍스트의 SHA-256·SHA-512·SHA-1 해시를 한 번에 계산합니다

NB 무료 도구 모음

설치·가입 없이 브라우저에서 바로 쓰는 무료 도구들입니다.