Desert Ice Contrast Color Palette for Fashion and Beauty

Desert Ice Contrast Color Palette

This palette blends soft desert tones with icy greys and muted blues to reflect both the warmth of desert scenes and the coolness of icy environments. The main colors create a balanced and recognizable system integrating warm peachy hues with cool neutral tones. Support colors provide subtle depth and contrast while maintaining an understated presence. Neutrals offer flexible background and text options for clear legibility and clean interface design.

ComplementaryFashion Beautydeserticewarm tonescool tones

Main (Brand) Colors

The main colors combine warm peach, muted slate blue, and soft warm beige to create a visually balanced and distinctive palette representing both warmth and coolness.

PrimaryPeach

RolesLogo, Link, Btn Primary Bg

Peach evokes warmth and approachability, anchoring the palette with an inviting and fashionable tone.

HEX#D9A67A

RGB217, 166, 122

HSL28, 56, 66

CMYK0, 24, 44, 15

SecondarySlate Blue

RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg

Slate Blue introduces calmness and sophistication, balancing the warmth with a muted cool contrast.

HEX#7B8EA1

RGB123, 142, 161

HSL210, 17, 56

CMYK24, 12, 0, 37

TertiaryAlmond

Almond adds softness and natural elegance, enhancing the approachable and warm elements without overpowering.

HEX#E3D8C2

RGB227, 216, 194

HSL40, 37, 83

CMYK0, 5, 15, 11

Support Colors

The support colors extend the palette with subtle neutral blues and greys that complement the main colors and provide versatility for icons, borders, and dividers without competing for attention.

Mist Blue

RolesIcon, Border, Divider, Outline

Mist Blue supports Slate Blue by offering a lighter tone that helps soften and complement the palette's cool side.

HEX#B1BCCC

RGB177, 188, 204

HSL216, 21, 75

CMYK13, 8, 0, 20

Stone

Stone grounds the palette with an earthy neutral that balances the warmth of Peach and Almond with muted reliability.

HEX#928B7F

RGB146, 139, 127

HSL38, 8, 54

CMYK0, 5, 13, 43

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Off White

RolesBg Dark

HEX#F6F5F3

RGB246, 245, 243

HSL40, 14, 96

CMYK0, 0, 1, 4

Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Peach", "hex": "#D9A67A", "role": "main", "cmyk": { "c": 0, "m": 24, "y": 44, "k": 15, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#7B8EA1", "role": "main", "cmyk": { "c": 24, "m": 12, "y": 0, "k": 37, "source": "colorfly" } }, { "name": "Almond", "hex": "#E3D8C2", "role": "main", "cmyk": { "c": 0, "m": 5, "y": 15, "k": 11, "source": "colorfly" } }, { "name": "Mist Blue", "hex": "#B1BCCC", "role": "support", "cmyk": { "c": 13, "m": 8, "y": 0, "k": 20, "source": "colorfly" } }, { "name": "Stone", "hex": "#928B7F", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 13, "k": 43, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Off White", "hex": "#F6F5F3", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-peach: #D9A67A; --color-slate-blue: #7B8EA1; --color-almond: #E3D8C2; --color-mist-blue: #B1BCCC; --color-stone: #928B7F; --color-white: #FFFFFF; --color-off-white: #F6F5F3; --color-charcoal: #2B2B2B; }

:root { --role-logo: #D9A67A; --role-link: #D9A67A; --role-btn-primary-bg: #D9A67A; --role-btn-outlined-border: #7B8EA1; --role-btn-outlined-text: #7B8EA1; --role-headline: #7B8EA1; --role-btn-secondary-bg: #7B8EA1; --role-icon: #B1BCCC; --role-border: #B1BCCC; --role-divider: #B1BCCC; --role-outline: #B1BCCC; --role-bg-light: #FFFFFF; --role-bg-dark: #F6F5F3; --role-text: #2B2B2B; --role-btn-primary-text: #2B2B2B; --role-btn-secondary-text: #2B2B2B; }

{ "peach": "#D9A67A", "slate-blue": "#7B8EA1", "almond": "#E3D8C2", "mist-blue": "#B1BCCC", "stone": "#928B7F", "white": "#FFFFFF", "off-white": "#F6F5F3", "charcoal": "#2B2B2B" }

<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: #D9A67A; --gradient-partner: #E4C1A2; --gradient-accent: #A98F78; --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: #755A42; --gradient-text-b: #7B6857; --gradient-text-c: #A98F78; 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>