クロマバース
説明
Chromaverseは、ユーザーが16進値、ランダム入力、または気分ベースの説明に基づいてカラーパレットを生成および比較できる洗練されたWebアプリケーションです。ユーザーは、複数のパレットを生成し、個々の色の詳細を表示し、パレットをダウンロードし、並んでビューで比較できます。デザインは洗練されたプロフェッショナルで、カラーパレットとグラデーションの両方のホバーエフェクト、色プレビュー、高度なダウンロード機能を備えています。
特徴
- 複数のヘックス入力：ユーザーは、コンマで区切られた複数のヘックス値を入力して、個々の色の見本と勾配を生成できます。
- 色の自動検出：テキストまたはムードの説明を入力すると、システムは関連するヘックス値を抽出したり、入力に基づいて色を生成したりしようとします。
- サークルカラーディスプレイ：生成された各色は、より良い視覚化のために円形の見本に表示されます。
- 勾配生成：生成されたすべての色の勾配が自動的に提供されます。
- カラーダウンロード：PNG画像としてパレット全体または生成されたグラデーションをダウンロードします。
- HEX値ディスプレイ：パレット内の各色の個々のヘックス値を表示し、ヘックスコードを簡単にコピーする「コピー」ボタンを使用します。
- ホバー効果：ホバー効果の強化により、ホバリングすると個々の色がポップし、ユーザーエクスペリエンスが向上します。
- カラーセレクター：カラーピッカーツールが利用可能で、ユーザーは色を手動で選択し、ヘックス値をリアルタイムで表示できます。
- 複数のパレット：複数のパレットを連続して生成します。各パレットには、確認のためのアラートメッセージを使用して削除するオプションがあります。
- パレットの比較：パレットを「比較リスト」に追加して、さまざまな色の組み合わせを並べて並べて視覚的に比較します。
- すべてのパレットを削除およびクリアする：ユーザーは、Compareリストから個々のパレットを削除したり、クリアする前にすべてのパレットをアラート確認でクリアできます。
- 比較リスト：Compareリストのすべてのパレットを単一のPNG画像としてダウンロードします。
- プロのスタイリング：Glassmorphism、Smooth Transition、Responsive Designなどの最新のCSS技術を使用した高度なUIデザインにより、アプリが洗練されたプロフェッショナルに見えるようになります。
使い方
- HEX値を入力：入力フィールドでは、コンマで区切られた1つ以上の16進値を入力できます。オプションで、テキストの説明やムードを入力すると、システムは自動検出され、色を生成します。
- パレットの生成：「生成」ボタンをクリックして、カラーパレットを生成します。色は円形の見本として表示され、すべての色の勾配も表示されます。
- 色の上：個々の色の上にマウスを移動して、プレビューが強化され、それぞれの16進コードを表示します。
- ダウンロードオプション：提供されたボタンを使用して、生成されたカラーパレットまたは勾配をPNGファイルとしてダウンロードします。
- ヘックス値をコピーする：各色の横にある「コピー」ボタンを使用して個々のヘックスコードをコピーします。
- リストを追加してください：[リストを追加]をクリックして、生成されたパレットを比較セクションに移動します。
- パレットを比較して削除します：複数のパレットを表示および比較する、個々のパレットを削除するか、すべてを確認アラートでクリアします。
- リストのリスト：パレットを比較した後、それらをすべてを単一の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
- JavaScriptは、ユーザー入力からカラーパレットを生成し、16進価値抽出を処理し、比較リストの管理、画像のダウンロードを有効にし、ホバーエフェクトやアラートなどのインタラクティブ性を追加するために使用されます。
- コードは、ダウンロードのために画像をレンダリングするためにキャンバスをレバレッジし、六角値をコピーするためにクリップボードAPIを作成します。
使用されたテクノロジー
- HTML5 ：アプリケーションの構造を提供します。
- CSS3 ：レスポンシブデザイン、ホバーエフェクト、および最新のガラスムルフィックスタイルを担当します。
- JavaScript ：パレットの生成、色の抽出、画像のダウンロード、およびインタラクティブのロジックを処理します。
- Canvas API ：カラーパレットとグラデーションのダウンロード可能なPNG画像を生成するために使用されます。
ライセンス
このプロジェクトは、MITライセンスの下でライセンスされています。詳細については、ライセンスファイルを参照してください。
