Nouplo

CSS·색상 도구

프런트엔드 작업에 쓰는 Nouplo의 디자인 도구를 모았습니다. 붙여 넣을 수 있는 CSS, 색상 변환과 명도 대비 검사, 팔레트와 색 추출, 아이콘·SVG·더미 텍스트까지 있습니다. 모두 브라우저에서 동작합니다.

CSS 생성기

◒ CSS 그라디언트 생성 색을 넣고, 선언을 받습니다. ◒ CSS box-shadow 생성 끌어 쓰는 화면이 아니라, 선언으로. ∿ cubic-bezier 이징 곡선을, 읽을 수 있는 형태로.

색상과 명도 대비

◒ 색상 코드 변환 HEX·RGB·HSL·CMYK와, 가독성을 결정하는 명도 대비. ◐ 명도 대비 검사 애초에 읽히기는 하는가. ◒ 이미지 도구 컬러 팔레트 생성기 스페이스 바로 새 팔레트를, 마음에 드는 색은 고정해서. ◉ 이미지 도구 이미지 색상 추출 클릭 한 번에 색상 코드, 버튼 하나로 이미지의 팔레트. ◉ 이미지 도구 이미지에서 색 뽑기 그 그림이 무슨 색으로 되어 있는지를, 헥스 코드로. ◒ 이미지 도구 색각 시뮬레이터 남성 약 12명 중 1명은 빨강과 초록 범례를 구분하지 못합니다.

아이콘·SVG·더미 텍스트

◰ 이미지 도구 파비콘 만들기 이미지 한 장을 넣으면 favicon.ico, apple-touch-icon, 매니페스트 아이콘과 붙여 넣을 태그가 나옵니다. ⇄ 파일 변환 SVG PNG 변환 SVG를 받지 않는 곳을 위해 벡터를 선명한 비트맵으로 바꿉니다. 파일을 어디에도 보내지 않습니다. ◇ 파일 변환 이미지를 SVG로 변환 이미지를 윤곽선으로 옮겨, 어느 크기에서도 선명하게. • 텍스트 도구 더미 텍스트 생성기 필요한 만큼만 만들어 바로 복사.

자주 묻는 질문

결과를 스타일시트에 바로 붙여 넣을 수 있나요?
네. 그라데이션, 박스 그림자, cubic-bezier 페이지는 CSS 선언 자체를 바로 복사할 수 있게 만들어 주고, 색상 코드 변환은 같은 색을 CSS 표기마다 보여 줍니다.
명도 대비 검사는 어떤 기준을 쓰나요?
WCAG 2입니다. 명도 대비 비율을 보여 주고, 본문 텍스트, 큰 텍스트, 인터페이스 요소 각각에 대해 AA와 AAA를 통과하는지 알려 줍니다.
왜 다른 사이트로 가는 카드가 있나요?
팔레트 생성기, 이미지 색 추출, 파비콘 만들기는 이미지를 다루기 때문에 Nouplo의 이미지 사이트에 있습니다. SVG 변환은 변환 사이트에, 더미 텍스트는 텍스트 사이트에 있습니다. 카드에 어디로 가는지 적혀 있습니다.
이미지가 업로드되나요?
아니요. 색을 고르거나 파비콘을 만들려고 연 이미지는 브라우저에서 읽을 뿐 기기 밖으로 나가지 않습니다.