디자인 도구
프런트엔드 및 시각 디자인 작업을 위한 빠른 도구입니다. 복사해 사용할 수 있는 CSS와 WCAG 대비 공식에 기반한 접근성 검사를 제공합니다.
도구 7개
이 카테고리의 도구
- 색상 변환기HEX, RGB, HSL, HWB, OKLCH, 단순 CMYK 간에 색상을 변환합니다. CSS 색상 코드를 붙여 넣거나 색상 선택기를 사용한 다음 각 형식을 복사하세요. 브라우저에서 실행됩니다.
- 색상 대비 검사기텍스트와 배경의 WCAG 2.2 대비율을 확인하고, 텍스트와 UI 요소의 AA 및 AAA 결과와 기준을 충족하는 가장 가까운 색상을 확인하세요.
- CSS 그라데이션 생성기2~6개의 색상 정지점을 사용해 선형, 방사형, 원뿔형 CSS 그라데이션을 만들고, 각도와 위치를 설정해 미리 본 다음 배경 CSS를 복사하세요.
- Box Shadow 생성기오프셋, 흐림, 확산, 색상, 투명도, inset을 여러 레이어로 조합해 CSS box-shadow를 디자인하세요. 어떤 배경에서도 미리 보고 CSS를 복사할 수 있습니다.
- 색상 팔레트 생성기색상 하나로 보색, 유사색, 삼색 조화, 사색 조화, 분할 보색 및 명암 팔레트를 생성하세요. 색상을 잠근 다음 HEX, CSS 또는 JSON으로 복사할 수 있습니다.
- PX-REM 변환기px를 rem 또는 em으로, 다시 반대로 변환하세요. 원하는 루트 크기를 설정할 수 있으며 기본값은 16px입니다. 자주 쓰는 크기 표와 CSS 코드 전체의 px 값 변환 기능을 제공합니다.
- 종횡비 계산기종횡비에 맞는 너비 또는 높이를 구하고, 1920×1080 같은 크기를 16:9로 약분해 보세요. 비율을 미리 보고 CSS aspect-ratio 규칙을 복사할 수 있습니다.