Generate Hex Color Based on First Letter of Any String
Color Generator is a simple utility to generate hex color codes based on the first character of a string or number. It provides an easy-to-use function that accepts a string, number, or an array of strings/numbers as input and returns the corresponding hex color(s). Additionally, the package allows you to specify an opacity level (0-100%) for the generated colors, providing flexibility for styling with transparent colors.
npm install color-generator-fl
yarn add color-generator-fl
import { getColorForFirstCharacter } from 'color-generator-fl';
getColorForFirstCharacter(arg: string | number | (string | number)[]): string | string[]
import { getColorForFirstCharacter } from 'color-generator-fl';
const color = getColorForFirstCharacter('Alice'); // '#00094CFF'
console.log(color);
const colorWithOpacity = getColorForFirstCharacter('Alice', 50); // '#00094C80' (with 50% opacity)
console.log(colorWithOpacity);
import { getColorForFirstCharacter } from 'color-generator-fl';
const color = getColorForFirstCharacter(666); // '#A43522FF'
console.log(color);
const colorWithOpacity = getColorForFirstCharacter(666, 75); // '#A43522BF' (with 75% opacity)
console.log(colorWithOpacity);
import { getColorForFirstCharacter } from 'color-generator-fl';
const colors = getColorForFirstCharacter(['Alice', 123, 'Bob']);
// ['#00094CFF', '#A44C15FF', '#00376EFF']
console.log(colors);
const colorsWithOpacity = getColorForFirstCharacter(['Alice', 123, 'Bob'], 25);
// ['#00094C40', '#A44C1540', '#00376E40']
console.log(colorsWithOpacity);
import { getColorForFirstCharacter } from 'color-generator-fl';
const color = getColorForFirstCharacter('!@#'); // '#010514FF'
console.log(color);
import { getColorForFirstCharacter } from 'color-generator-fl';
const color = getColorForFirstCharacter({name: 'John Doe'}); // '#010514FF'
console.log(color);
This package uses two distinct color palettes:
getColorForFirstCharacter
arg: string | number | (string | number)[]
: A string, number, or array of strings and numbers.string
: A single hex color code for a string or number input.string[]
: An array of hex color codes for an array of strings and/or numbers.Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const tags = ['Important', 'Urgent', 'Pending'];
const tagColors = getColorForFirstCharacter(tags);
console.log(tagColors);
// ['#263E0DFF', '#005B00FF', '#43616CFF'] (Colors for 'Important', 'Urgent', 'Pending')
This approach ensures that tags can have consistent colors across the app, making the UI more user-friendly and intuitive.
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const userName = 'Sarah Connor';
const avatarColor = getColorForFirstCharacter(userName);
console.log(avatarColor); // A consistent color for 'S'
This use case can be helpful in list-based UIs or grids where users are represented with initials instead of profile pictures.
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const projects = ['Alpha', 'Beta', 'Gamma'];
const projectColors = getColorForFirstCharacter(projects);
console.log(projectColors);
// Colors for 'Alpha', 'Beta', 'Gamma' which can be applied to project cards or labels
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const senderName = 'David';
const bubbleColor = getColorForFirstCharacter(senderName);
console.log(bubbleColor); // Generates a consistent color for David's message bubble
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const notificationTypes = ['System Alert', 'Message', 'Reminder'];
const notificationColors = getColorForFirstCharacter(notificationTypes);
console.log(notificationColors);
// Generates different colors for each type of notification
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const categories = ['Electronics', 'Clothing', 'Books'];
const categoryColors = getColorForFirstCharacter(categories);
console.log(categoryColors);
// Colors for 'Electronics', 'Clothing', and 'Books' categories
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const labels = ['Sales', 'Revenue', 'Profit'];
const chartColors = getColorForFirstCharacter(labels);
console.log(chartColors);
// Generates distinct colors for 'Sales', 'Revenue', and 'Profit' series in the chart
This ensures consistency and a visually pleasing look for charts that need distinct colors for different datasets.
Example:
import { getColorForFirstCharacter } from 'color-generator-fl';
const folders = ['Annual Report', 'Budget', 'Client List'];
const folderColors = getColorForFirstCharacter(folders);
console.log(folderColors);
// Generates distinct colors for each folder, making it easier to visually distinguish them
By leveraging the Color Generator package in these use cases, you can maintain a consistent and vibrant UI while adding a dynamic element to your application. There can be more use cases based on a particular situation.