Bob's Multi Tool

Color 변환기

Color색상개인정보: 브라우저 로컬

Color 변환기

HEX, RGB, HSL 색상을 서로 변환하고 실제 전경/배경 조합의 WCAG 대비를 확인하는 도구입니다.

입력 / 출력

도구부터 사용

입력, 출력, 복사 작업은 이 영역에 모았습니다. 예제와 검토 내용은 아래에서 따로 확인합니다.

복사 가능한 출력

로컬 세션

입력 상태를 이 브라우저에만 저장해 계정 없이 마지막 작업을 복원할 수 있습니다.

결과 확인 후 검토

기본 입력/출력 흐름이 끝난 뒤 필요한 예제, 확인 목록, 관련 도구만 펼쳐 봅니다.

웹 운영 점검 워크벤치

색상 접근성 확인

전경/배경 색상을 변환하고 WCAG 대비 리포트를 복사한 뒤 배포 전 CSS 토큰과 시각 자산을 검토합니다.

3 도구
  1. 1. Color

    HEX/RGB/HSL 조합을 변환하고 AA/AAA 기준을 확인한 뒤 접근성 리포트를 복사합니다.

  2. 2. CSS

    변경을 커밋하기 전에 CSS 토큰 이름, 선택자, 중복 색상 값을 검토합니다.

  3. 3. Favicon

    브랜드 이니셜이나 작은 아이콘이 선택한 배경에서 또렷하게 보이는지 확인합니다.

CSS 스니펫 검토

CSS 스니펫을 정리하고 CSS 검토 보고서를 복사한 뒤 압축과 색상 대비까지 확인합니다.

3 도구
  1. 1. CSS

    스니펫을 정리하고 selector, token, cascade, specificity, checklist 신호가 담긴 보고서를 복사합니다.

  2. 2. CSS Min

    압축 CSS를 공유해야 한다면 압축률, 주석 제거, minify 검토 보고서를 확인합니다.

  3. 3. Color

    스니펫이 전경/배경 색상을 바꾸면 color token을 WCAG 대비 기준으로 확인합니다.

Wi-Fi QR 만들기

호환되는 네트워크 비밀번호를 만들고 Wi-Fi payload를 구성한 뒤 스캔 리포트와 대비를 확인합니다.

3 도구
  1. 1. Password

    공유기 정책에 맞는 비밀번호를 생성합니다.

  2. 2. QR Code

    Wi-Fi payload를 만들고 QR 이미지를 내려받은 뒤 인수인계용 스캔 리포트를 복사합니다.

  3. 3. Color

    출력 전에 전경/배경 대비를 확인합니다.

복사 전 확인

  • 실제 UI의 전경과 배경 쌍으로 다시 확인합니다.
  • AA 일반 텍스트, AA 큰 텍스트, AAA 일반 텍스트 기준을 따로 봅니다.
  • Color 변환기 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토합니다.

흔한 실패 사례

  • 대비율이 통과해도 실제 글자 크기, 굵기, 상태가 다르면 읽기 어려울 수 있습니다.
  • 투명도, 오버레이, 배경 이미지는 계산된 전경/배경 대비를 바꿉니다.

관련 도구

Clamp반응형 font-size와 spacing에 쓸 CSS clamp() 값을 min/max 범위로 생성하는 도구입니다.다음 단계: 반응형 font-size와 spacing에 쓸 CSS clamp() 값을 min/max 범위로 생성하는 도구입니다.CSS Unitpx, rem, em, percent 값을 CSS 레이아웃과 타이포그래피 계산에 맞게 변환하는 도구입니다.다음 단계: px, rem, em, percent 값을 CSS 레이아웃과 타이포그래피 계산에 맞게 변환하는 도구입니다.Favicon아이콘 소스와 색상 값을 정리해 favicon link, manifest hint, 브라우저 탭 표시를 점검합니다.다음 단계: 아이콘 소스와 색상 값을 정리해 favicon link, manifest hint, 브라우저 탭 표시를 점검합니다.
  • 실제 UI의 전경과 배경 쌍으로 다시 확인합니다.
  • AA 일반 텍스트, AA 큰 텍스트, AAA 일반 텍스트 기준을 따로 봅니다.
  • Color 변환기 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토합니다.
Color 변환기 - 무료 온라인 색상 도구 | bobob.app