색상·디자인

색상과 CSS 시각 도구에 필요한 20개의 브라우저 도구를 한곳에서 확인하세요. 설치나 회원가입 없이 각 도구를 바로 열어 사용할 수 있습니다.

• 색상 변환기

  HEX 색상을 RGB·HSL 등 화면에서 쓰기 쉬운 표현으로 변환하고 대비가 좋은 on-color도 제안합니다.

• 색상 선택기

  HEX 직접 입력·브라우저 EyeDropper와 최근 색상으로 색을 고르고 관련 harmony 색을 미리 봅니다.

• 색상 팔레트 생성기

  기준 HEX에서 harmony role palette 또는 단계형 scale palette를 생성합니다.

• 명암비 확인기

  전경색과 배경색의 상대휘도 대비비를 계산하고 WCAG AA/AAA 기준 통과 여부를 표시합니다.

• CSS 그라디언트 생성기

  세 HEX 색과 각도·중간 stop 위치로 3색 CSS linear-gradient를 구성합니다.

• 색상 명암 생성기

  기준색에서 더 어두운 방향으로 지정 step 수의 shade scale을 생성합니다.

• 색상 틴트 생성기

  기준색에서 더 밝은 방향으로 지정 step 수의 tint scale을 생성합니다.

• 보색 찾기

  기준색의 HSL hue를 약 180도 반대편으로 이동한 보색 조합을 생성합니다.

• 유사색 생성기

  기준 hue 주변의 좁은 각도 범위에서 3~7개의 유사색 harmony를 생성합니다.

• 삼각 배색 생성기

  기준 hue에서 120도 간격의 세 색으로 triadic harmony를 생성합니다.

• 색상 혼합기

  두 HEX 색 사이를 0~100% 비율로 선형 혼합해 중간색을 계산합니다.

• 색온도 미리보기

  Kelvin 값을 대략적인 RGB/HEX 색으로 변환해 색온도 preview를 제공합니다.

• 박스 그림자 생성기

  offset X/Y, blur, spread, opacity, inset와 색으로 CSS box-shadow 값을 구성합니다.

• 텍스트 그림자 생성기

  offset X/Y, blur와 색을 조절해 CSS text-shadow 값을 생성합니다.

• 둥근 모서리 생성기

  네 모서리 radius를 각각 px 또는 % 단위로 설정해 CSS border-radius 축약값을 생성합니다.

• 글래스모피즘 생성기

  반투명 흰 배경·backdrop blur·border·shadow·radius를 조합한 glassmorphism CSS를 생성합니다.

• 뉴모피즘 생성기

  기준색과 light/dark shadow를 계산해 flat·concave·convex neumorphism CSS를 만듭니다.

• CSS Grid 생성기

  columns, rows, gap을 조절해 기본 CSS Grid container 선언을 생성합니다.

• CSS Flexbox 생성기

  flex-direction, justify-content, align-items, gap을 선택해 CSS Flexbox container 선언을 생성합니다.

• SVG 물결 생성기

  두 색과 높이·곡률·반전·layer 수로 SVG wave 배경을 생성하고 파일로 다운로드할 수 있습니다.