디자인
컬러 유틸리티
HEX, RGB, HSL 색상을 변환하고 웹 접근성을 위한 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)
미리보기
다람쥐 헌 쳇바퀴에 타고파. 키스의 고유물은 입술이다.
색상 변환 및 대비 확인 도구
HEX, RGB, HSL 색상 형식을 변환하고 전경색과 배경색의 대비를 확인합니다. CSS 구현, 디자인 handoff, hover 상태, UI 접근성 검토에 유용합니다.
자주 쓰는 상황
- CSS 색상 변환: 디자인 도구와 코드 사이의 형식을 맞춥니다.
- 가독성 확인: 버튼, 링크, label, alert의 대비를 확인합니다.
- 색상 변형 만들기: HSL로 밝기와 채도를 조정합니다.
중요한 상태를 색상만으로 표현하지 말고 텍스트, 아이콘, 레이아웃도 함께 사용하세요.
Recent Articles
도구 소개
2026-05-02
CSV와 JSON 변환: API 연동과 데이터 이전에서 형식을 고르는 방법
CSV와 JSON을 안전하게 변환하기 위한 헤더, 구분자, 값 타입, 중첩 데이터 처리, 실무 활용 흐름을 설명합니다.
도구 소개
2026-05-02
JSON 포맷팅과 검증: API 응답을 안전하게 확인하는 방법
JSON을 보기 좋게 정리하고, 문법 오류와 값의 타입을 확인하며, TypeScript 타입과 Zod, OpenAPI 스키마로 이어지는 실무 흐름을 설명합니다.
개발 이야기
2026-04-06
아무도 아키텍처 다이어그램을 업데이트하지 않는 문제에 대하여
'잠깐, 중간에 서버가 하나 더 있지 않나요?' 누군가 이렇게 물어볼 때 느끼는 그 서늘함. 실시간 웹 기반 Mermaid 인프라 시각화 도구를 만들게 된 이야기입니다.
개발 이야기
2026-04-05
YAML 지옥에서 정신줄 놓기: 내가 CI/CD 시각화 도구를 만든 이유
GitHub Actions의 'needs' 의존성이 인간의 눈으로 파악하기엔 너무 혼란스러워졌을 때, YAML 미로를 깔끔한 순서도로 바꾸기로 결심했습니다.
개발 이야기
2026-04-04
JOIN 때문에 울지 마세요: 비주얼 SQL 빌더 개발 비화
'잠깐, LEFT JOIN이 어떻게 작동하더라?' 쉼표 누락이나 구문 오류를 디버깅하느라 시간을 낭비하지 않도록 이 노코드 SQL 도구를 만들었습니다.
개발 이야기
2026-03-09
재귀로 푸는 JSON→TypeScript 변환: 외부 라이브러리에 의존하지 않는 강점
API 응답에서 순식간에 타입 정의를 생성. 외부 파서 없이 재귀 알고리즘으로 가볍고 빠르게 구현한 뒷이야기를 소개합니다.