조민지의 미니홈피

TODAY 1

|

TOTAL 369

← 목록으로

ColorComp

ColorComp GitHub 저장소

개인

스택: React, SCSS

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 등 샘플 글꼴을 제공합니다.
  • 글꼴 선택 시 양쪽 섹션 모두에 적용됩니다.

이미지 저장

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

기술 스택

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

추가 예정 기능

  • 스크랩
  • 해당 조합 이미지 저장(구현 완료)
프로젝트방명록