Custom Color Palette Example

This project demonstrates a reusable color palette system implemented in React. The CustomColorPalette provides customizable color sets and a utility function for applying opacity to colors. The CustomColorPaletteSample component showcases how to use this palette in a UI.

[Demo]

Features

• Reusable Color Sets: Predefined color palettes for different themes (e.g., white, black, gray, blue).
• Opacity Adjustment: Convert HEX color codes to RGBA with customizable opacity.
• Dynamic UI Rendering: Easily switch between color modes and preview changes in real time.

Our project will consist of:

Two different Lottie animations.

• A dropdown menu to switch between animations.
• A checkbox to enable or disable playback controls.
• A responsive layout using a Splitter for the animation player and control panel.

Let's dive into the implementation!

Components

CustomColorPalette

This module defines:

• Color Palettes: Predefined sets of colors, including white, black, gray, and more, with varying opacities.
• Utility Functions:
  • applyOpacity(hexCode, opacity): Converts a HEX color to RGBA with the specified opacity.
• Exports:
  • CustomColorSets: An object containing all predefined color sets.
  • CustomColorFontColor: A mapping of color modes to recommended font colors for contrast.

CustomColorPaletteSample

A demonstration component that:

• Allows users to select a color mode via a dropdown.
• Dynamically renders a list of colors from the selected palette with appropriate font colors.
• Provides a simple and interactive example of how to use CustomColorPalette.

import React from "react";
import CustomColorPaletteSample from "./CustomColorPaletteSample";

function App() {
  return (
    <div>
      <h1>Custom Color Palette Demo</h1>
      <CustomColorPaletteSample />
    </div>
  );
}

export default App;

Preview

The application displays:

• A color mode selector (dropdown).
• A list of colors from the selected palette, rendered with appropriate font colors for contrast.