디자인 & 컬러 가이드
컬러 선택부터 CSS 코드 생성까지, 디자이너와 개발자를 위한 도구
컬러 피커, 대비 검사기, 그라데이션 생성기처럼 웹 디자인과 프론트엔드 작업에서 반복적으로 필요한 컬러·스타일 작업을 브라우저에서 바로 처리할 수 있도록 모은 카테고리입니다. 눈으로 확인하며 값을 조정하고, 완성된 결과를 코드로 바로 복사해 프로젝트에 붙여넣을 수 있습니다.
RGB·HSL·HSV 변환처럼 컬러 표기법을 다루는 도구부터, 웹 접근성 기준(WCAG)에 맞춘 명암비 검사, Tailwind용 팔레트 생성까지 실제 디자인·퍼블리싱 작업 흐름에 맞춰 구성했습니다.
자주 묻는 질문 (FAQ)
Q.색상 대비 검사 결과는 어떤 기준을 따르나요?
웹 콘텐츠 접근성 지침(WCAG 2.1)의 AA/AAA 등급 기준으로 명암비를 계산해 보여줍니다.
Q.만든 그라데이션이나 팔레트를 코드로 바로 쓸 수 있나요?
네. 대부분의 도구가 CSS, Tailwind 클래스 등 실제 코드 형태로 값을 복사할 수 있게 되어 있습니다.
Q.디자인 툴(피그마 등)에서 뽑은 색상값도 넣을 수 있나요?
네. HEX, RGB, HSL 등 표준 표기법을 그대로 입력하면 되고, 서로 다른 표기법 간 변환도 지원합니다.
Q.라이트/다크 모드를 모두 고려해서 만들 수 있나요?
도구별로 다르지만, 명암비 검사기처럼 배경색을 직접 바꿔가며 확인할 수 있는 도구는 두 모드를 각각 테스트하는 데 유용합니다.