← Back to Editor

#F7D5BC · #DEBC75 · #F1A037 · #418377 · #AAB7BD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F7D5BC

Apricot · Wheat · Peach Orange

HEX
#F7D5BC
RGB
rgb(247, 213, 188)
HSL
hsl(25, 79%, 85%)
HSB
hsb(25, 24%, 97%)
CMYK
cmyk(0%, 14%, 24%, 3%)
Oklch
oklch(89.5% 0.051 58.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DEBC75

Ginger · BurlyWood · Sunflower

HEX
#DEBC75
RGB
rgb(222, 188, 117)
HSL
hsl(41, 61%, 66%)
HSB
hsb(41, 47%, 87%)
CMYK
cmyk(0%, 15%, 47%, 13%)
Oklch
oklch(80.9% 0.098 84.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F1A037

Ginger · GoldenRod · Warm Sun

HEX
#F1A037
RGB
rgb(241, 160, 55)
HSL
hsl(34, 87%, 58%)
HSB
hsb(34, 77%, 95%)
CMYK
cmyk(0%, 34%, 77%, 5%)
Oklch
oklch(76.9% 0.149 68.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#418377

Mineral Blue · SeaGreen · Mint Ice

HEX
#418377
RGB
rgb(65, 131, 119)
HSL
hsl(169, 34%, 38%)
HSB
hsb(169, 50%, 51%)
CMYK
cmyk(50%, 0%, 9%, 49%)
Oklch
oklch(56.3% 0.070 180.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#AAB7BD

Sky Blue · Silver · Lake Green

HEX
#AAB7BD
RGB
rgb(170, 183, 189)
HSL
hsl(199, 13%, 70%)
HSB
hsb(199, 10%, 74%)
CMYK
cmyk(10%, 3%, 0%, 26%)
Oklch
oklch(77.1% 0.017 227.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D5BC
BBDEF7

Analogous

F7BBC0
F7D5BC
F7F2BB

Triadic

F7D5BC
BBF7D4
D4BBF7

Split-Comp.

F7D5BC
BBF7F2
BBC0F7

Tetradic

F7D5BC
C0F7BB
BBDEF7
F2BBF7

Contrast Matrix WCAG 2.1 Contrast

F7D5BC
DEBC75
F1A037
418377
AAB7BD
—
1.3
Fail
1.5
Fail
3.2
AA Large
1.5
Fail
1.3
Fail
—
1.2
Fail
2.4
Fail
1.1
Fail
1.5
Fail
1.2
Fail
—
2.1
Fail
1.0
Fail
3.2
AA Large
2.4
Fail
2.1
Fail
—
2.2
Fail
1.5
Fail
1.1
Fail
1.0
Fail
2.2
Fail
—
White BG
1.4Fail
1.8Fail
2.1Fail
4.4AA Large
2.1Fail
Black BG
15.2AAA
11.6AAA
9.8AAA
4.7AA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8C2
CFCF86
CECD50
5E5E7A
B0B0BC

Deuteranopia

EAEDC4
D1D48A
D3D957
5A557B
AFAEBB

Tritanopia

F5C7C8
DC9497
ED6469
447C7D
ABBABA

Achromatopsia

DCDCDC
BEBEBE
ACACAC
6E6E6E
B4B4B4

Shades & Tints Shades & Tints

#F7D5BC

Dark
Light

#DEBC75

Dark
Light

#F1A037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d5bc;
  --color-2: #debc75;
  --color-3: #f1a037;
  --color-4: #418377;
  --color-5: #aab7bd;
}

SCSS

$color-1: #f7d5bc;
$color-2: #debc75;
$color-3: #f1a037;
$color-4: #418377;
$color-5: #aab7bd;

TAILWIND

colors: {
  'brand-1': '#f7d5bc',
  'brand-2': '#debc75',
  'brand-3': '#f1a037',
  'brand-4': '#418377',
  'brand-5': '#aab7bd',
}

RGB Array

[247, 213, 188], [222, 188, 117], [241, 160, 55], [65, 131, 119], [170, 183, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7D5BC, #DEBC75, #F1A037, #418377, #AAB7BD is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f7d5bc; --color-2: #debc75; --color-3: #f1a037; --color-4: #418377; --color-5: #aab7bd. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color