도구 모음

색, 접근성과 CSS의 스튜디오

색과 대비를 비교하고, 그라디언트와 그림자를 만들며, Grid, Flexbox, 유동 레이아웃을 구성해 보세요. 대비 점검 결과는 선택한 규격에 의존하며, 완전한 접근성 감사의 대체가 되지 않습니다.

색 탐색, 대비 확인, 그라디언트, 그림자, CSS 레이아웃 설계를 위한 스튜디오.

이 모음의 도구

4개 도구

색과 CSS 디자인

색, 팔레트와 대비 스튜디오

색 모델 변환, CSS 스케일 생성, 팔레트 추출, WCAG와 APCA 대비 확인을 할 수 있습니다.

도구 열기

색과 CSS 디자인

CSS 그라디언트, 그림자와 애니메이션 스튜디오

그라디언트, 그림자, 필터, 변환, CSS 애니메이션을 미리보기와 함께 만듭니다.

도구 열기

색과 CSS 디자인

CSS Grid, Flexbox와 유동 타이포 스튜디오

CSS 그리드, Flexbox 레이아웃, 유동 글자 크기, 반응형 간격의 시제품을 만들 수 있습니다.

도구 열기

이미지와 벡터

SVG와 벡터 아이콘 스튜디오

SVG 코드, viewBox, 색을 편집하고 경로를 최적화합니다. TSX/JSX, CSS Data URI, PNG, WebP로 내보낼 수 있습니다.

도구 열기

대상 카테고리

디자인·CSS 도구에 대한 질문

컬러 스튜디오는 WCAG와 APCA 대비를 확인할 수 있습니까?

컬러 스튜디오의 페이지에 사용할 수 있는 방식과 지표가 정리되어 있습니다. 선택한 모드를 확인하고, 사용 상황에 맞춰 결과를 해석해 주세요.

대비 점검에 합격하면 접근성이 보장됩니까?

보장되지 않습니다. 점검 결과는 선택한 기준에서의 참고값입니다. 실제 환경까지 포괄하는 완전한 감사의 대체가 되지 않습니다.

WCAG와 APCA의 결과가 다를 때는 어떻게 읽어야 합니까?

둘은 기준과 계산 방식이 다릅니다. 용도에 맞는 기준을 선택하고, 실제 사용 환경에 맞춰 판단해 주세요.

생성한 CSS를 그대로 공개해도 괜찮습니까?

시제품용 코드입니다. 실제 사이트에 적용하기 전에 대상 브라우저 환경에서 표시를 확인해 주세요.

작업 종류별로 도구를 찾을 수 있습니다.

모든 도구 보기
☕ 후원하기