About The Project

Chroma Chameleon is a powerful web-based utility designed to streamline the process of creating and visualizing CSS color themes. It presents a side-by-side comparison of a user interface in both dark and light modes, offering a comprehensive preview of how color choices will appear in a realistic application setting.

Users can live-edit individual HSL\RGB\OKLCH color values for a wide range of CSS variables—from backgrounds and text to semantic colors for primary, success, and danger states. As changes are made, the corresponding UI mockup updates instantly, providing immediate visual feedback. For rapid prototyping, users can also paste a full block of CSS variables to apply an entire theme at once.

The application is designed to be a practical tool for ensuring aesthetic consistency and accessibility across different UI components and color modes.

Try Chroma Chameleon Now!

Experience the power of real-time CSS theme editing. Create beautiful light and dark mode color schemes with instant visual feedback.

Launch Application →

Key Features

  • 👀 Dual-Theme Preview: Simultaneously view and interact with both a light and dark mode version of a sample UI.
  • ⚡ Live Color Editing: Modify HSL\RGB\OKLCH values for individual CSS theme variables with changes reflected instantly.
  • 🎨 Color Swatches: Each input field is accompanied by a color swatch that displays the current color.
  • 📋 Bulk Paste & Apply: A dedicated text area allows users to paste a complete set of CSS variables to rapidly apply a new color scheme.
  • 🧩 Comprehensive UI Mockup: The preview includes a rich set of components like headers, buttons, alerts, tables, and pop-ups.
  • ❓ Interactive Instructions: A helpful pop-out guide explains the core features to new users.
  • 📱 Responsive Design: The layout is fully responsive, adapting seamlessly from desktop to mobile devices.

How to Use

There are two primary ways to customize the themes:

1. Live Editing:

  • Navigate to either the "Dark Mode Colors" or "Light Mode Colors" editor.
  • Find the CSS variable you wish to change (e.g., `--primary`).
  • Modify its HSL\RGB\OKLCH value in the input field.
  • Observe the corresponding mockup update in real-time.

2. Paste to Apply:

  • Prepare a block of CSS variables in the format --variable-name: value;.
  • Paste your code into the textarea at the top of either editor.
  • Click the "Apply" button.
  • The mockup will update with all the new values at once.