무료 온라인 디자인 도구

도구 14개

색상을 고르고, CSS 효과를 만들고, 명암비를 확인하고, 시각 자산을 만듭니다.

시각적 요소 만들고 확인하기

프로젝트에 쓸 색상, CSS 효과, 레이아웃 스니펫, 작은 시각 자산을 만듭니다. 효과를 미리 보면 선택에 도움이 되지만, 최종 결과는 주변 디자인, 뷰포트, 콘텐츠에 따라 달라집니다. 개별 요소의 모양뿐 아니라 명암비와 반응형 동작도 확인하십시오.

CSS 그라데이션 생성기는 그라데이션 스타일을 만들고, 색상 선택 및 팔레트 생성기는 팔레트를 고르도록 돕고, WCAG 명암비 확인은 전경색과 배경색을 비교합니다. 실제 글자 크기와 상태로 결과를 테스트하십시오.

명암비 기준을 통과하면 페이지가 완전히 접근 가능한가요?

아니요. 명암비는 점검 항목 중 하나일 뿐입니다. 키보드 탐색, 레이블, 포커스 표시, 문서 구조 등 다른 접근성 요구 사항도 중요합니다.

그라데이션 미리보기를 웹사이트 스타일로 바꾸려면 어떻게 하나요?

CSS 그라데이션 생성기는 그라데이션 선언문을 만듭니다. 이를 의도한 요소에 적용하고, 페이지에서 실제로 사용하는 크기, 텍스트, 배경으로 테스트하십시오.

텍스트에 쓸 색상을 고르기 전에 두 색을 비교할 수 있나요?

WCAG 명암비 확인은 전경색과 배경색의 명암비를 계산합니다. 실제 색상을 사용하고, 글자 크기와 굵기에 맞는 기준을 확인하십시오.

HEX, RGB, HSL 사이를 어떻게 전환하나요?

RGB, HEX, HSL 변환은 색상 값의 표기 방식을 바꿉니다. 표기 방식은 색을 나타낼 뿐이며, 팔레트를 자동으로 만들거나 좋은 명암비를 보장하지는 않습니다.