Deep Ocean Coastal Color Palette for Tech Brands

Deep Ocean Coastal Color Palette

A balanced coastal-inspired palette combining deep ocean blues with soft sandy neutrals and off-white, providing a calm yet trustworthy visual system ideal for technology and professional services.

MonochromaticTechocean bluedeep bluesandoff-white

Main (Brand) Colors

The main colors are harmonious shades of blue progressing from medium to deep, evoking reliability and depth while maintaining brand recognition with a balanced tonal range.

PrimaryAzul Atlántico

RolesLogo, Link, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg

Azul Atlántico provides a stable and trustworthy foundation representing professionalism and calm confidence.

HEX#526C84

RGB82, 108, 132

HSL209, 23, 42

CMYK38, 18, 0, 48

SecondaryAzul Profundo

RolesBtn Primary Bg, Headline

Azul Profundo offers depth and authority, ideal to draw attention and signify strong brand presence.

HEX#334A5E

RGB51, 74, 94

HSL208, 30, 28

CMYK46, 21, 0, 63

TertiaryArena

Arena acts as a subtle support color, softening the palette and providing balance to deeper blues in secondary elements.

HEX#E8E1D6

RGB232, 225, 214

HSL37, 28, 87

CMYK0, 3, 8, 9

Support Colors

Support colors extend the main blues by introducing softer blues and subtle neutrals that enhance visual hierarchy without distracting from the core identity.

Blanco Roto

RolesIcon, Border, Divider, Outline

Blanco Roto complements the main blues with a lighter tone, maintaining harmony while ensuring clarity on icons and borders.

HEX#F8F6F2

RGB248, 246, 242

HSL40, 30, 96

CMYK0, 1, 2, 3

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Off-White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F8F6F2

RGB248, 246, 242

HSL40, 30, 96

CMYK0, 1, 2, 3

Sand

RolesBg Dark

HEX#E8E1D6

RGB232, 225, 214

HSL37, 28, 87

CMYK0, 3, 8, 9

Charcoal

RolesText

HEX#2C2C2C

RGB44, 44, 44

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Azul Atlántico", "hex": "#526C84", "role": "main", "cmyk": { "c": 38, "m": 18, "y": 0, "k": 48, "source": "colorfly" } }, { "name": "Azul Profundo", "hex": "#334A5E", "role": "main", "cmyk": { "c": 46, "m": 21, "y": 0, "k": 63, "source": "colorfly" } }, { "name": "Arena", "hex": "#E8E1D6", "role": "main", "cmyk": { "c": 0, "m": 3, "y": 8, "k": 9, "source": "colorfly" } }, { "name": "Blanco Roto", "hex": "#F8F6F2", "role": "support", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 3, "source": "colorfly" } }, { "name": "Off-White", "hex": "#F8F6F2", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 3, "source": "colorfly" } }, { "name": "Sand", "hex": "#E8E1D6", "role": "neutral", "cmyk": { "c": 0, "m": 3, "y": 8, "k": 9, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2C2C2C", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-azul-atlantico: #526C84; --color-azul-profundo: #334A5E; --color-arena: #E8E1D6; --color-blanco-roto: #F8F6F2; --color-off-white: #F8F6F2; --color-sand: #E8E1D6; --color-charcoal: #2C2C2C; }

:root { --role-logo: #526C84; --role-link: #526C84; --role-btn-outlined-border: #526C84; --role-btn-outlined-text: #526C84; --role-btn-secondary-bg: #526C84; --role-btn-primary-bg: #334A5E; --role-headline: #334A5E; --role-icon: #F8F6F2; --role-border: #F8F6F2; --role-divider: #F8F6F2; --role-outline: #F8F6F2; --role-bg-light: #F8F6F2; --role-btn-primary-text: #F8F6F2; --role-btn-secondary-text: #F8F6F2; --role-bg-dark: #E8E1D6; --role-text: #2C2C2C; }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #526C84; --gradient-partner: #A0AEBB; --gradient-accent: #F8F6F2; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #526C84; --gradient-text-b: #A0AEBB; --gradient-text-c: #959491; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>