Swimming Color Psychology & Meaning
Swimming aqua is chlorine and lane lines — these specific teals are the color of competition pools, of water that has been optimized for speed rather than beauty.
#E0F7FA
#00BCD4
#00697A
#003B44
Background
Primary Accent
Secondary
Body Text
Swimming
freshcleanathletic summer sportwellnessbranding
AAA
WCAG Grade
11.0:1
Contrast Ratio
2,100
Saves
5,700
AI Copies
Use #E0F7FA as the background. Use #00BCD4 as the primary accent. Use #00697A as secondary. Use #003B44 as body text/supporting color. Palette mood: Swimming — fresh, clean, athletic.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Swimming 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: 89.3% | 224, 247, 250 | 10%, 1%, 0%, 2% | 187°, 72%, 93% | ||
| Primary Accent Luminance: 40.7% | 0, 188, 212 | 100%, 11%, 0%, 17% | 187°, 100%, 42% | ||
| Secondary Luminance: 11.5% | 0, 105, 122 | 100%, 14%, 0%, 52% | 188°, 100%, 24% | ||
| Body Text Luminance: 3.5% | 0, 59, 68 | 100%, 13%, 0%, 73% | 188°, 100%, 13% |
Color Harmony: Analogous Scheme
The Swimming palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Competitive swimming visual identities draw from the specific blue-green of competition pools (treated water with white tile) and the primary colors of competitive swimwear brands.
Best Design Use Cases
Near-white teal for surfaces. Bright pool-blue for primary elements. Deep teal for secondary. Darkest teal for text. Clean and aquatic.
Industries This Palette Suits
Swimming brands, aquatic sports, wellness facilities, water brands, Olympic sports.
How to Implement the Swimming Color Scheme
To use this Swimming 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 #E0F7FA for the main background and #00BCD4 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #003B44 and #E0F7FA is 11.03:1 (AAA). Ensure your body text remains legible.