DevToolKits.app
디자인

컬러 유틸리티

HEX, RGB, HSL 색상을 변환하고 웹 접근성을 위한 WCAG 대비율을 확인합니다.

가이드: 사용 방법 및 특징

  • HEX, RGB, HSL 중 하나로 입력하면 다른 형식이 즉시 변환됩니다.
  • 전경색과 배경색을 지정해 대비율과 WCAG 상태를 확인하세요.
  • 미리보기 텍스트로 가독성을 확인하고 색상을 조정합니다.
  • 결과를 복사해 CSS 또는 디자인 도구에 바로 사용할 수 있습니다.

샘플: 입출력 예시

HEX から RGB/HSL に変換

입력 예시

#1d4ed8

출력 예시

RGB: rgb(29, 78, 216)
HSL: hsl(221, 76%, 48%)

FAQ: 자주 묻는 질문

  • 어떤 색상 형식을 지원하나요?

    HEX (#RGB / #RRGGBB), RGB, HSL 간 변환을 지원합니다.
  • WCAG 판정은 어떻게 표시되나요?

    일반 텍스트와 큰 텍스트의 대비율을 표시하고 통과 여부를 알려줍니다.
  • 입력한 색상이 저장되나요?

    모든 처리는 브라우저에서 로컬로 진행됩니다. 페이지를 닫으면 입력이 초기화됩니다.

활용: 주요 활용 사례

  • 디자인 색상을 CSS 형식으로 변환

    HEX 값을 RGB/HSL로 변환해 스타일 가이드나 CSS 변수에 활용합니다.

  • 대비율 준수 확인

    전경/배경 조합을 WCAG 대비 기준으로 검증합니다.

  • 팔레트 조정 및 공유

    가독성을 확인하며 색상을 조정하고 코드를 팀과 공유합니다.

주의: 주의사항 및 제한

  • 브라우저 안에서만 처리

    입력과 출력은 기기 안에 머무릅니다. 탭을 닫거나 캐시를 삭제하면 임시 상태가 초기화됩니다.

  • 중요 데이터는 검증 필수

    결과는 보조 용도이므로 운영 환경에 넣기 전에 반드시 내용을 확인하고 필요한 검증을 수행하세요.

  • 큰 데이터는 기기 성능에 영향

    매우 큰 텍스트나 파일은 일부 브라우저에서 느려질 수 있습니다. 무거운 작업은 데스크톱 사용을 권장합니다.

색상 변환

HEX
#007BFF
RGB
rgb(0, 123, 255)
HSL
hsl(211, 100%, 50%)

대비 확인 도구 (WCAG)

대비율 21.00
일반 텍스트
AA (4.5:1)
AAA (7.0:1)
큰 텍스트
AA (3.0:1)
AAA (4.5:1)
미리보기

다람쥐 헌 쳇바퀴에 타고파. 키스의 고유물은 입술이다.

최신 기사

Story
2026-03-09

재귀로 푸는 JSON→TypeScript 변환: 외부 라이브러리에 의존하지 않는 강점

API 응답에서 순식간에 타입 정의를 생성. 외부 파서 없이 재귀 알고리즘으로 가볍고 빠르게 구현한 뒷이야기를 소개합니다.

Read more
Story
2026-03-09

안전한 JWT 검증 환경을 브라우저에. 보안 엔지니어의 시점

기밀성 높은 토큰을 안전하게 다루기 위해. jose 라이브러리와 로컬 처리를 조합한 JWT 도구의 설계 사상을 해설합니다.

Read more
Story
2026-03-09

QR 코드 생성, 더 간편하고 안전하게

Canvas API와 node-qrcode를 조합하여 브라우저상에서 실시간 생성과 프라이버시 보호를 동시에 실현한 도구의 비하인드 스토리.

Read more
Story
2026-03-09

데이터 전송 없이 안심. 브라우저 완결형 Diff 도구 개발 배경

텍스트 차이를 안전하고 빠르게 비교하기 위해, 외부 라이브러리를 활용하면서도 프라이버시를 최우선으로 설계한 비하인드 스토리.

Read more
Story
2026-03-09

라이브러리 없는 타임존 변환: Intl API의 저력

Moment.js나 date-fns를 사용하지 않고 브라우저 표준 Intl API만으로 구현한 경량 타임존 처리 도구의 개발 비화.

Read more
Story
2026-03-03

SQL to ER 도구 개발 비화: '브라우저 완결'에 집착한 이유

SQL로부터 ER 다이어그램을 생성하는 도구의 개발 배경과, 보안과 편의성을 동시에 잡기 위한 기술적 도전에 대해 소개합니다.

Read more

광고

광고