Blue Orange Petrolux Color Palette for Technology Brands

Blue Orange Petrolux Color Palette

This palette is inspired by the blue and orange tones of the Petrolux logo, balancing energy and reliability with key neutral shades for usability across digital and print. It features a vivid Blue and a light Blue variant paired with energetic Amber to create a dynamic yet trustworthy tech brand identity.

ComplementaryTechblueorangenavysteel blue

Main (Brand) Colors

The main colors merge a vibrant Blue and a light Blue variant with an energetic Amber to establish a balanced and recognizable visual identity.

PrimaryBlue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

This vibrant Blue conveys reliability and trust, crucial for a technology-focused brand.

HEX#0071BC

RGB0, 113, 188

HSL204, 100, 37

CMYK100, 40, 0, 26

SecondaryLight Sky Blue

RolesBtn Secondary Bg

Light Sky Blue offers a bright, airy tone for secondary UI elements, softening the palette without losing color harmony.

HEX#D9E4F5

RGB217, 228, 245

HSL216, 58, 91

CMYK11, 7, 0, 4

TertiaryAmber

Amber injects energy and warmth, providing dynamic contrast that energizes the palette.

HEX#FFA500

RGB255, 165, 0

HSL39, 100, 50

CMYK0, 35, 100, 0

Support Colors

Muted and softer accents extend the main palette by complementing and balancing the vibrant Blue and Amber, enhancing usability and visual interest.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue functions as a subtle, calming accent that complements stronger blues while grounding the palette.

HEX#5A8BB1

RGB90, 139, 177

HSL206, 36, 52

CMYK49, 21, 0, 31

Pale Orange

Pale Orange gently supports Amber’s vibrancy by adding warmth without overwhelming the design.

HEX#FFD580

RGB255, 213, 128

HSL40, 100, 75

CMYK0, 16, 50, 0

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ghost White

RolesBg Dark

HEX#F5F7FA

RGB245, 247, 250

HSL216, 33, 97

CMYK2, 1, 0, 2

Raisin Black

RolesText, Btn Secondary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Blue", "hex": "#0071BC", "role": "main", "cmyk": { "c": 100, "m": 40, "y": 0, "k": 26, "source": "colorfly" } }, { "name": "Light Sky Blue", "hex": "#D9E4F5", "role": "main", "cmyk": { "c": 11, "m": 7, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Amber", "hex": "#FFA500", "role": "main", "cmyk": { "c": 0, "m": 35, "y": 100, "k": 0, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#5A8BB1", "role": "support", "cmyk": { "c": 49, "m": 21, "y": 0, "k": 31, "source": "colorfly" } }, { "name": "Pale Orange", "hex": "#FFD580", "role": "support", "cmyk": { "c": 0, "m": 16, "y": 50, "k": 0, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ghost White", "hex": "#F5F7FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Raisin Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-blue: #0071BC; --color-light-sky-blue: #D9E4F5; --color-amber: #FFA500; --color-steel-blue: #5A8BB1; --color-pale-orange: #FFD580; --color-white: #FFFFFF; --color-ghost-white: #F5F7FA; --color-raisin-black: #1A1A1A; }

:root { --role-logo: #0071BC; --role-link: #0071BC; --role-btn-primary-bg: #0071BC; --role-btn-outlined-border: #0071BC; --role-btn-outlined-text: #0071BC; --role-headline: #0071BC; --role-btn-secondary-bg: #D9E4F5; --role-icon: #5A8BB1; --role-border: #5A8BB1; --role-divider: #5A8BB1; --role-outline: #5A8BB1; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F5F7FA; --role-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "blue": "#0071BC", "light-sky-blue": "#D9E4F5", "amber": "#FFA500", "steel-blue": "#5A8BB1", "pale-orange": "#FFD580", "white": "#FFFFFF", "ghost-white": "#F5F7FA", "raisin-black": "#1A1A1A" }

<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: #0071BC; --gradient-partner: #73B1DA; --gradient-accent: #5A8BB1; --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: #0071BC; --gradient-text-b: #73B1DA; --gradient-text-c: #5A8BB1; 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>