Skip to main content

Get Color For Initial

getColorForInitial​

Generates consistent hex colors based on the first character of strings/numbers. Supports single values, arrays, and nested arrays with optional opacity control. Uses predefined palettes for letters (A-Z) and digits (0-9).

Function Signature​

// Single input version
function getColorForInitial(input: ColorInput, opacity?: Percent): string;

// Array input version
function getColorForInitial(input: ColorInputArray, opacity?: Percent): string[];

// Combined signature
function getColorForInitial(input: ColorInput | ColorInputArray, opacity?: Percent): string | string[];

Parameters​

  • input:
    • string | number: Single value to generate color for
    • Array<string | number | Array>: Array (potentially nested) of values
  • opacity (optional): Number between 0-100 representing opacity percentage (default: 100)

Return Value​

  • Single hex color string (for single input)
  • Array of hex color strings (for array input)
  • All 36 colors (alphabet + numbers) for empty array input

Types​

ColorInput​

type ColorInput = string | number;

ColorInputArray​

type ColorInputArray = Array<ColorInput | ColorInputArray>

Percent​

type Percent = 0 | 1 | 2 | ... | 100;  // 0-100 integer values

Color Palettes​

Alphabet Colors (A-Z)​

26 predefined colors mapped to A through Z:

const alphabetColorPalette = [
 '#00094C',
 '#00376E',
 '#005600',
 '#024647',
 '#423067',
 '#55188E',
 '#00453E',
 '#00516C',
 '#263E0D',
 '#0F6F3F',
 '#730073',
 '#053636',
 '#253654',
 '#4682B4',
 '#3253B6',
 '#43616C',
 '#036C44',
 '#30784F',
 '#601C1C',
 '#690000',
 '#005B00',
 '#BF0E6C',
 '#008080',
 '#475F47',
 '#546F1C',
 '#824809',
];

Number Colors (0-9)​

10 predefined colors mapped to digits 0 through 9:

const numberColorPalette = [
 '#893213',
 '#A44C15',
 '#8B4513',
 '#8A1D33',
 '#3B543B',
 '#342656',
 '#A43522',
 '#04605F',
 '#B5680A',
 '#6437B3',
];

Example Usage​

Basic Usage​

// Single string
getColorForInitial('Apple'); // '#00094C' (color for 'A')

// Single number 
getColorForInitial(42); // '#A44C15' (color for '4')

// With opacity
getColorForInitial('Banana', 50); // '#00376E80' (50% opacity)

Array Handling​

// Simple array
getColorForInitial(['Cat', 42, 'Dog']);
// ['#005600', '#A44C15', '#024647']

// Nested arrays
getColorForInitial([['A'], ['B', [3]]);
// ['#00094C', '#00376E', '#8B4513']

// Empty array returns all colors
getColorForInitial([]).length; // 36

Real-World Use Cases​

1 Tagging System Backgrounds​

const tags = ['Important', 'Urgent', 'Pending'];
const tagColors = getColorForInitial(tags);
// ['#263E0DFF', '#005B00FF', '#43616CFF']

2 User Avatar Colors​

const userName = 'Sarah Connor';
const avatarColor = getColorForInitial(userName); // Color for 'S'

3 Project Categorization​

const projects = ['Alpha', 'Beta', 'Gamma'];
const projectColors = getColorForInitial(projects);

4 Chat Message Bubbles​

const senderName = 'David';
const bubbleColor = getColorForInitial(senderName);

5 Data Visualization​

const dataLabels = ['Sales', 'Revenue', 'Profit'];
const chartColors = getColorForInitial(dataLabels);

Limitations​

  1. Color Consistency

    • Limited to 36 predefined colors (26 letters + 10 numbers)
    • Similar initials will get identical colors

  2. Input Handling

    • Non-alphanumeric first characters return fallback color (#010514)
    • Case-insensitive for letters (a/A same color)
    • Negative numbers use the '-' character's color (fallback)

  3. Performance

    • Nested arrays are flattened recursively
    • Very large arrays may impact performance

  4. Opacity

    • Only affects the alpha channel of the hex color
    • Some browsers may not support 8-digit hex colors

Notes​

  • Fallback Color: #010514 (dark blue) used for:

    • Empty strings
    • Non-alphanumeric first characters
    • Invalid numbers (NaN)

  • Opacity Handling:

    • 100% = FF (fully opaque)
    • 0% = 00 (fully transparent)
    • Values are clamped to 0-100 range

  • Edge Cases:

    • Empty string/number returns fallback
    • Empty array returns all 36 colors
    • Nested arrays are fully flattened

Conclusion​

The getColorForInitial function provides:

  1. Consistent color generation for given inputs
  2. Flexible handling of single values and complex arrays
  3. Visual distinction through predefined palettes
  4. UI enhancement capabilities through opacity control

Ideal for applications needing:

  • Dynamic color assignment
  • Visual categorization
  • Consistent theming based on text/number inputs
  • Accessible color differentiation

While limited to 36 distinct colors, it covers most alphanumeric use cases while maintaining predictable output for better user experience.