InsurTech Color Psychology & Meaning
InsurTech blue-teal bridges the old world of insurance (serious blue) with the new world of digital products (fresh teal), signaling that this company has inherited the trust without the stuffiness.
#FFFFFF
#1A5AA8
#00AA88
#1A1A2E
Background
Primary Accent
Secondary
Body Text
InsurTech
trustworthymodernprofessional all brandinginsurancetech
AAA
WCAG Grade
17.1:1
Contrast Ratio
1,700
Saves
4,500
AI Copies
Use #FFFFFF as the background. Use #1A5AA8 as the primary accent. Use #00AA88 as secondary. Use #1A1A2E as body text. Palette: InsurTech.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the InsurTech 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: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 10.4% | 26, 90, 168 | 85%, 46%, 0%, 34% | 213°, 73%, 38% | ||
| Secondary Luminance: 30.5% | 0, 170, 136 | 100%, 0%, 20%, 33% | 168°, 100%, 33% | ||
| Body Text Luminance: 1.2% | 26, 26, 46 | 43%, 43%, 0%, 82% | 240°, 28%, 14% |
Color Harmony: Triadic Scheme
The InsurTech 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
InsurTech companies (Lemonade, Oscar Health, Zego) disrupted traditional insurance visual identities in the 2010s, moving from stuffy establishment palettes to more approachable digital-first systems.
Best Design Use Cases
White for all product surfaces. Blue for primary brand and trust elements. Teal for modern, digital-first features. Dark navy for text.
Industries This Palette Suits
Insurance technology, health insurance, digital insurance, fintech.
How to Implement the InsurTech Color Scheme
To use this InsurTech 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 #FFFFFF for the main background and #1A5AA8 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A1A2E and #FFFFFF is 17.06:1 (AAA). Ensure your body text remains legible.