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): Hex8;

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

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

Parameters​

  • input:
    • ColorInput: Single string/number value to generate color for
    • ColorInputArray: 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
Note

All hex colors are returned in 8-digit Hex8 format (e.g. #RRGGBBAA), where the last two digits represent the alpha channel based on the provided opacity. FF indicates full opacity, and 00 indicates full transparency.

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 for A to Z:

const ALPHABET_COLOR_PALETTE = [
 '#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 for digits 0 to 9:

const NUMBER_COLOR_PALETTE = [
 '#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.

For more powerful color manipulation, consider using the Color class.