| 50 | |
| 51 | // Function to generate a complementary color |
| 52 | const getComplementaryColor = (hexColor: string): string => { |
| 53 | // Default to a nice blue if no color is provided |
| 54 | if (!hexColor) return `#3498db` |
| 55 | |
| 56 | // Remove the hash if it exists |
| 57 | const color = hexColor.replace(`#`, ``) |
| 58 | |
| 59 | // Convert hex to RGB |
| 60 | const r = parseInt(color.substr(0, 2), 16) |
| 61 | const g = parseInt(color.substr(2, 2), 16) |
| 62 | const b = parseInt(color.substr(4, 2), 16) |
| 63 | |
| 64 | // Calculate complementary color (inverting the RGB values) |
| 65 | const compR = 255 - r |
| 66 | const compG = 255 - g |
| 67 | const compB = 255 - b |
| 68 | |
| 69 | // Convert back to hex |
| 70 | const compHex = |
| 71 | `#` + |
| 72 | ((1 << 24) + (compR << 16) + (compG << 8) + compB).toString(16).slice(1) |
| 73 | |
| 74 | // Calculate brightness of the background |
| 75 | const brightness = r * 0.299 + g * 0.587 + b * 0.114 |
| 76 | |
| 77 | // If the complementary color doesn't have enough contrast, adjust it |
| 78 | const compBrightness = compR * 0.299 + compG * 0.587 + compB * 0.114 |
| 79 | const brightnessDiff = Math.abs(brightness - compBrightness) |
| 80 | |
| 81 | if (brightnessDiff < 128) { |
| 82 | // Not enough contrast, use a more vibrant alternative |
| 83 | if (brightness > 128) { |
| 84 | // Dark color for light background |
| 85 | return `#8e44ad` // Purple |
| 86 | } else { |
| 87 | // Light color for dark background |
| 88 | return `#f1c40f` // Yellow |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | return compHex |
| 93 | } |
| 94 | |
| 95 | const titleColor = getComplementaryColor(backgroundColor) |
| 96 | |