Vibrant Orange Construction Color Palette for Bold Branding

Vibrant Orange Construction Color Palette

This palette draws inspiration from the image's bold orange, complemented by grounded neutral tones and subtle blue accents, creating a dynamic yet balanced color system suitable for construction-related branding.

ComplementaryConstructionconstructionorangeboldneutral

Main (Brand) Colors

The main colors combine a vivid orange with a cool dark blue and a medium warm brown, balancing energy and professionalism to create a recognizable and versatile palette.

PrimaryVibrant Orange

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

Vibrant Orange conveys energy, confidence, and visibility, essential for a construction brand to stand out.

HEX#F26A2E

RGB242, 106, 46

HSL18, 88, 56

CMYK0, 56, 81, 5

SecondaryDeep Blue

RolesBtn Secondary Bg

Deep Blue introduces trustworthiness and stability, balancing the energetic orange with professionalism.

HEX#16324F

RGB22, 50, 79

HSL211, 56, 20

CMYK72, 37, 0, 69

TertiaryWarm Brown

Warm Brown adds an earthy grounding tone, emphasizing reliability and warmth appropriate for the construction industry.

HEX#84593E

RGB132, 89, 62

HSL23, 36, 38

CMYK0, 33, 53, 48

Support Colors

Support colors extend the palette with muted neutrals and a muted slate blue for refinement and contrast while keeping focus on the main colors.

Muted Slate Blue

RolesIcon, Border, Divider, Outline

Muted Slate Blue complements Deep Blue with a softer tone, supporting visual hierarchy without overpowering the main colors.

HEX#7D8CA3

RGB125, 140, 163

HSL216, 17, 56

CMYK23, 14, 0, 36

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Gray

RolesBg Dark

HEX#F7F7F7

RGB247, 247, 247

HSL0, 0, 97

CMYK0, 0, 0, 3

Charcoal Black

RolesText, Btn Primary Text

HEX#202020

RGB32, 32, 32

HSL0, 0, 13

CMYK0, 0, 0, 87

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Vibrant Orange", "hex": "#F26A2E", "role": "main", "cmyk": { "c": 0, "m": 56, "y": 81, "k": 5, "source": "colorfly" } }, { "name": "Deep Blue", "hex": "#16324F", "role": "main", "cmyk": { "c": 72, "m": 37, "y": 0, "k": 69, "source": "colorfly" } }, { "name": "Warm Brown", "hex": "#84593E", "role": "main", "cmyk": { "c": 0, "m": 33, "y": 53, "k": 48, "source": "colorfly" } }, { "name": "Muted Slate Blue", "hex": "#7D8CA3", "role": "support", "cmyk": { "c": 23, "m": 14, "y": 0, "k": 36, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Gray", "hex": "#F7F7F7", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#202020", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 87, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-vibrant-orange: #F26A2E; --color-deep-blue: #16324F; --color-warm-brown: #84593E; --color-muted-slate-blue: #7D8CA3; --color-pure-white: #FFFFFF; --color-soft-gray: #F7F7F7; --color-charcoal-black: #202020; }

:root { --role-logo: #F26A2E; --role-link: #F26A2E; --role-btn-primary-bg: #F26A2E; --role-btn-outlined-border: #F26A2E; --role-btn-outlined-text: #F26A2E; --role-headline: #F26A2E; --role-btn-secondary-bg: #16324F; --role-icon: #7D8CA3; --role-border: #7D8CA3; --role-divider: #7D8CA3; --role-outline: #7D8CA3; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F7F7F7; --role-text: #202020; --role-btn-primary-text: #202020; }

{ "vibrant-orange": "#F26A2E", "deep-blue": "#16324F", "warm-brown": "#84593E", "muted-slate-blue": "#7D8CA3", "pure-white": "#FFFFFF", "soft-gray": "#F7F7F7", "charcoal-black": "#202020" }

<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: #F26A2E; --gradient-partner: #F8AD8C; --gradient-accent: #FAC9B3; --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: #F26A2E; --gradient-text-b: #865D4C; --gradient-text-c: #96796B; 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>