Surfing Color Psychology & Meaning
Surfing is ocean gradients and sunrise — these blues and warm oranges are the colors of dawn patrol, of reading swell reports at 5am and being in the water by 6.
#EBF5FD
#1A9DE0
#FF8C00
#1A3A5C
Background
Primary Accent
Secondary
Body Text
Surfing
freshfreecoastal summer sportlifestylebranding
AAA
WCAG Grade
10.5:1
Contrast Ratio
2,300
Saves
6,200
AI Copies
Use #EBF5FD as the background. Use #1A9DE0 as the primary accent. Use #FF8C00 as secondary. Use #1A3A5C as body text/supporting color. Palette mood: Surfing — fresh, free, coastal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Surfing 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: 90.1% | 235, 245, 253 | 7%, 3%, 0%, 1% | 207°, 82%, 96% | ||
| Primary Accent Luminance: 29.7% | 26, 157, 224 | 88%, 30%, 0%, 12% | 200°, 79%, 49% | ||
| Secondary Luminance: 40.0% | 255, 140, 0 | 0%, 45%, 100%, 0% | 33°, 100%, 50% | ||
| Body Text Luminance: 4.0% | 26, 58, 92 | 72%, 37%, 0%, 64% | 211°, 56%, 23% |
Color Harmony: Complementary Scheme
The Surfing palette is built using a complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A complementary palette is often preferred by professional designers because it provides maximum contrast and energy by using opposite colors.
History & Design Context
Surfing visual culture developed from 1960s California and Hawaii through brands like Quiksilver, Billabong, and Rip Curl. The ocean-blue plus warm accent system has been surf's visual language for 50 years.
Best Design Use Cases
Light sky blue for surfaces. Bright ocean blue for primary elements. Warm orange for contrast accents and warmth. Deep navy for text.
Industries This Palette Suits
Surf brands, ocean sports, beach lifestyle, coastal tourism, water sports apparel.
How to Implement the Surfing Color Scheme
To use this Surfing 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 #EBF5FD for the main background and #1A9DE0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A3A5C and #EBF5FD is 10.54:1 (AAA). Ensure your body text remains legible.