Complementary Color Finder

Find the complementary color with ease.
보색을 간단하게 찾을 수 있는 사이트

🔗 https://minji105.github.io/color-complementary

기능

색상 선택 및 보색 매칭

• 색상 선택기에서 원하는 색을 선택할 수 있습니다.
• 선택한 색상의 보색이 자동으로 계산되어 화면에 표시됩니다.
• 밝기 대비를 기준으로 텍스트 색이 검은색 또는 흰색으로 자동 변경됩니다.
• 선택한 색상과 보색의 HEX값, RGB값, 색상 이름이 표시됩니다. (근사치 색상 이름 제공)

텍스트 샘플

• 각 섹션에 다양한 크기의 텍스트 샘플이 포함되어 있습니다.
  • 알파벳 대소문자와 긴 단락 텍스트
  • AOS typo 가이드를 참고하여 96px, 60px, 48px, 34px, 24px, 20px 크기로 구성

글꼴 설정

• Arial, Times New Roman, Courier New 등 샘플 글꼴을 제공합니다.
• 글꼴 선택 시 양쪽 섹션 모두에 적용됩니다.

이미지 저장

• 현재 색상 조합을 PNG 이미지로 저장할 수 있습니다.
• 2가지 형식의 미리보기 제공 (간단 버전 / 상세 버전)

기술 스택

분류	기술
Frontend	React 19, React Router 7
Styling	SCSS, CSS Modules
색상 이름 매칭	color-name-list, nearest-color
이미지 변환	html-to-image, downloadjs
배포	GitHub Pages

추가 예정 기능

• 스크랩
• 해당 조합 이미지 저장(구현 완료)