Bioluminescence Color Psychology & Meaning
Bioluminescence is nature doing neon — the cold light produced by living organisms in darkness. Teal and blue-green against absolute black.
#050D1A
#00FFD4
#00B4D8
#7B2FBE
Background
Primary Accent
Secondary
Body Text
Bioluminescence
nightneoncool springsummer brandingsciencetech
Fail
WCAG Grade
2.8:1
Contrast Ratio
2,341
Saves
6,102
AI Copies
Use #050D1A as the background. Use #00FFD4 as the primary accent. Use #00B4D8 as secondary. Use #7B2FBE as body text/supporting color. Palette mood: Bioluminescence — night, neon, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Bioluminescence color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.4% | 5, 13, 26 | 81%, 50%, 0%, 90% | 217°, 68%, 6% | ||
| Primary Accent Luminance: 76.3% | 0, 255, 212 | 100%, 0%, 17%, 0% | 170°, 100%, 50% | ||
| Secondary Luminance: 37.6% | 0, 180, 216 | 100%, 17%, 0%, 15% | 190°, 100%, 42% | ||
| Body Text Luminance: 10.0% | 123, 47, 190 | 35%, 75%, 0%, 25% | 272°, 60%, 46% |
Color Harmony: Triadic Scheme
The Bioluminescence palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Bioluminescent organisms (fireflies, deep sea creatures, plankton) have been studied since antiquity. The specific blue-green of marine bioluminescence became an aesthetic reference in the 2010s.
Best Design Use Cases
True black for the deep darkness. Teal as the primary bioluminescent glow. Cyan for secondary light. Purple for depth.
Industries This Palette Suits
Science brands, tech, environmental, beauty.
How to Implement the Bioluminescence Color Scheme
To use this Bioluminescence color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #050D1A for the main background and #00FFD4 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #7B2FBE and #050D1A is 2.77:1 (Fail). Ensure your body text remains legible.