Adobe Color Palette Viewer in React

This project provides a React-based implementation to showcase Adobe color palettes in a tabular format. It dynamically generates color tones using predefined constants and renders them with React components.

[Demo]

Features

• Dynamic rendering of color tones for various palettes.
• Clean and reusable React components for better maintainability.
• Styled using SCSS for a polished appearance.

Project Structure

• AdobeColorPalette.jsx: The main React component that renders the color palette table.
• AdobeColorPaletteContants.js: Defines the COLOR_TONES constant, which holds the tone data for different color palettes.

Usage

Rendering the AdobeColorPalette Component

The AdobeColorPalette component dynamically renders a table based on the COLOR_TONES defined in AdobeColorPaletteConstants.js. Example:

import AdobeColorPalette from './AdobeColorPalette';

function App() {
  return (
    <div className="App">
      <h1>Adobe Color Palette Viewer</h1>
      <AdobeColorPalette />
    </div>
  );
}

export default App;
Example COLOR_TONES Definition
The COLOR_TONES object in AdobeColorPaletteContants.js defines the color palettes and their respective tones.

javascript
Copy code
export const COLOR_TONES = {
  gray: ['gray-50', 'gray-75', ...],
  blue: ['blue-100', 'blue-200', ...],
  green: ['green-100', 'green-200', ...],
  // More colors...
};

You can customize these tones or add new palettes as needed.

Styling with SCSS

Color tones are styled using SCSS. Each tone is represented by a CSS class (e.g., .blue-100, .gray-50). Add or update your SCSS file to define the color classes.

Example:

.color-palette-item {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.gray-50 {
  background-color: #f7fafc;
}

.blue-100 {
  background-color: #ebf8ff;
}