Crimson Coral Terra Color Palette for Tech Brands

Crimson Coral Terra Color Palette

This palette combines a bold Crimson as the primary brand color for strong recognition, a warm Tomato red for secondary emphasis, and a bright Coral for tertiary highlights, supported by gentle muted Terracotta and Sandy tones to balance vibrancy with warmth. The neutrals offer clear functional contrast for text, backgrounds, and UI elements, ensuring a readable and dynamic brand presence inspired by the red and white logo.

MonochromaticTechcrimsoncoralterrared palette

Main (Brand) Colors

The main colors use an analogous scheme of Crimson, Tomato, and Coral that harmonize as warm, vivid reds emphasizing energy and approachability for strong brand identity.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg

Crimson conveys confidence and power, anchoring the brand's visual presence.

HEX#B22222

RGB178, 34, 34

HSL0, 68, 42

CMYK0, 81, 81, 30

SecondaryTomato

RolesBtn Secondary Bg, Headline

Tomato adds vibrant energy for secondary elements, complementing the stronger Crimson.

HEX#FF6347

RGB255, 99, 71

HSL9, 100, 64

CMYK0, 61, 72, 0

TertiaryCoral

RolesBtn Outlined Border, Btn Outlined Text

Coral provides a friendly accent that highlights interactive UI elements like outlines.

HEX#FF7F50

RGB255, 127, 80

HSL16, 100, 66

CMYK0, 50, 69, 0

Support Colors

Support colors extend the warm main palette with subdued earthy tones that balance the intensity while maintaining brand warmth and approachability.

Terracotta

RolesIcon, Border, Divider, Outline

Terracotta serves as a subtle earthy accent that complements the reds without overpowering.

HEX#D2691E

RGB210, 105, 30

HSL25, 75, 47

CMYK0, 50, 86, 18

Sandy Brown

Sandy Brown softens the palette, adding warmth and usability in interface elements.

HEX#F4A460

RGB244, 164, 96

HSL28, 87, 67

CMYK0, 33, 61, 4

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

Cultured

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesText, Btn Secondary Text

HEX#2F2F2F

RGB47, 47, 47

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#B22222", "role": "main", "cmyk": { "c": 0, "m": 81, "y": 81, "k": 30, "source": "colorfly" } }, { "name": "Tomato", "hex": "#FF6347", "role": "main", "cmyk": { "c": 0, "m": 61, "y": 72, "k": 0, "source": "colorfly" } }, { "name": "Coral", "hex": "#FF7F50", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 69, "k": 0, "source": "colorfly" } }, { "name": "Terracotta", "hex": "#D2691E", "role": "support", "cmyk": { "c": 0, "m": 50, "y": 86, "k": 18, "source": "colorfly" } }, { "name": "Sandy Brown", "hex": "#F4A460", "role": "support", "cmyk": { "c": 0, "m": 33, "y": 61, "k": 4, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2F2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson: #B22222; --color-tomato: #FF6347; --color-coral: #FF7F50; --color-terracotta: #D2691E; --color-sandy-brown: #F4A460; --color-white: #FFFFFF; --color-cultured: #F5F5F5; --color-charcoal: #2F2F2F; }

:root { --role-logo: #B22222; --role-link: #B22222; --role-btn-primary-bg: #B22222; --role-btn-secondary-bg: #FF6347; --role-headline: #FF6347; --role-btn-outlined-border: #FF7F50; --role-btn-outlined-text: #FF7F50; --role-icon: #D2691E; --role-border: #D2691E; --role-divider: #D2691E; --role-outline: #D2691E; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F5F5F5; --role-text: #2F2F2F; --role-btn-secondary-text: #2F2F2F; }

{ "crimson": "#B22222", "tomato": "#FF6347", "coral": "#FF7F50", "terracotta": "#D2691E", "sandy-brown": "#F4A460", "white": "#FFFFFF", "cultured": "#F5F5F5", "charcoal": "#2F2F2F" }

<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: #B22222; --gradient-partner: #D58585; --gradient-accent: #D2691E; --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: #B22222; --gradient-text-b: #D58585; --gradient-text-c: #D2691E; 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>