Chromaverse
설명
Chromaverse는 사용자가 16 진수 값, 임의 입력 또는 기분 기반 설명을 기반으로 컬러 팔레트를 생성하고 비교할 수있는 정교한 웹 애플리케이션입니다. 사용자는 여러 팔레트를 생성하고 개별 색상 세부 사항을보고 팔레트를 다운로드 한 후 나란히보기에서 비교할 수 있습니다. 이 디자인은 매끄럽고 전문적이며 호버 효과, 색상 미리보기 및 컬러 팔레트 및 그라디언트 모두에 대한 고급 다운로드 기능이 특징입니다.
특징
- 다중 16 진수 입력 : 사용자는 쉼표로 분리 된 여러 16 진수 값을 입력하여 개별 색상 견본과 그라디언트를 생성 할 수 있습니다.
- 색상의 자동 감지 : 텍스트 또는 기분 설명을 입력하면 시스템이 관련 16 진수 값을 추출하거나 입력에 따라 색상을 생성하려고 시도합니다.
- 원 컬러 디스플레이 : 각 생성 된 색상은 더 나은 시각화를 위해 원형 견본에 표시됩니다.
- 그라디언트 생성 : 생성 된 모든 색상의 구배가 자동으로 제공됩니다.
- 색상 다운로드 : 전체 팔레트 또는 생성 된 그라디언트를 PNG 이미지로 다운로드하십시오.
- 16 진수 값 디스플레이 : 팔레트의 각 색상에 대한 개별 16 진수 값을 표시하여 "복사"버튼으로 16 진 코드를 쉽게 복사하십시오.
- 호버 효과 : 향상된 호버 효과는 개별 색상이 호버링 될 때 팝을 뿌려 사용자 경험을 향상시킵니다.
- 색상 선택기 : 컬러 피커 도구를 사용할 수 있으므로 사용자는 수동으로 색상을 선택하고 16 진수를 실시간으로 표시 할 수 있습니다.
- 여러 팔레트 : 여러 팔레트를 연속적으로 생성합니다. 각 팔레트에는 확인을위한 경고 메시지와 함께 삭제할 수있는 옵션이 있습니다.
- 팔레트 비교 : 팔레트를 "비교 목록"에 추가하여 나란히보기에서 다른 색상 조합을 시각적으로 비교하십시오.
- 모든 팔레트를 제거하고 지우십시오 : 사용자는 비교 목록에서 개별 팔레트를 제거하거나 지우기 전에 경고 확인으로 모든 팔레트를 지울 수 있습니다.
- 비교 목록 다운로드 : 비교 목록의 모든 팔레트를 단일 PNG 이미지로 다운로드하십시오.
- 전문적인 스타일 : 유리 모르피즘, 부드러운 전환 및 반응 형 디자인과 같은 최신 CSS 기술을 갖춘 고급 UI 디자인은 앱이 세련되고 전문적으로 보이도록합니다.
사용 방법
- 16 진수 입력 : 입력 필드에서 쉼표로 분리 된 하나 이상의 16 진수 값을 입력 할 수 있습니다. 선택적으로 텍스트 설명이나 분위기를 입력하면 시스템이 자동 감지 및 색상을 생성합니다.
- 팔레트 생성 : "생성"버튼을 클릭하여 색상 팔레트를 생성합니다. 색상은 원형 견본으로 표시되며 모든 색상의 기울기도 표시됩니다.
- 색상 위로 마우스를 가져옵니다 : 마우스를 개별 색상 위로 움직여 향상된 미리보기를보고 각각 16 진 코드를 봅니다.
- 다운로드 옵션 : 제공된 버튼을 사용하여 생성 된 색상 팔레트 또는 그라디언트를 PNG 파일로 다운로드하십시오.
- 16 진수 복사 : 각 색상 옆의 "복사"버튼을 사용하여 개별 16 진 코드를 복사하십시오.
- 비교 목록을 추가하십시오 : "비교 목록 추가"를 클릭하여 생성 된 팔레트를 비교 섹션으로 이동하십시오.
- 팔레트 비교 및 삭제 : 여러 팔레트를보고 비교하고 개별 팔레트를 제거하거나 확인 경고로 모두 지우십시오.
- 비교 목록을 다운로드하십시오 : 팔레트를 비교 한 후 향후 참조를위한 단일 PNG 이미지로 다운로드하십시오.
설치 지침
저장소 복제 :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
브라우저에서 index.html 엽니 다 :
파일 구조
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
코드 개요
HTML
- HTML은 입력 필드, 버튼, 컬러 디스플레이, 비교 목록 및 다운로드 옵션의 구조를 제공합니다.
-
<input> , <button> , <div> 및 <canvas> 요소를 사용하여 UI를 구성하고 기능을 위해 JavaScript와 상호 작용합니다.
CSS
- CSS에는 호버 효과, 유리 모르피즘, 다크 모드 지원, 반응 형 디자인 및 기타 최신 UI 요소를위한 고급 스타일이 포함되어 있습니다.
- 색상은 CSS 변수를 사용하여 제어되므로 명확한 모드와 어두운 모드를 쉽게 전환 할 수 있습니다.
자바 스크립트
- JavaScript는 사용자 입력에서 컬러 팔레트를 생성하고, 16 진수 추출을 처리하고, 비교 목록을 관리하고, 이미지의 다운로드를 활성화하고, 호버 효과 및 경고와 같은 상호 작용을 추가하는 데 사용됩니다.
- 이 코드는 다운로드 이미지 렌더링 및 16 진수 값을 복사하기위한 클립 보드 API를위한 캔버스를 활용합니다.
사용 된 기술
- HTML5 : 응용 프로그램의 구조를 제공합니다.
- CSS3 : 반응 형 디자인, 호버 효과 및 현대식 유리 모르 프 스타일을 담당합니다.
- JavaScript : 팔레트 생성, 색상 추출, 이미지 다운로드 및 상호 작용에 대한 논리를 처리합니다.
- 캔버스 API : 컬러 팔레트 및 그라디언트의 다운로드 가능한 PNG 이미지를 생성하는 데 사용됩니다.
특허
이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.
