#DDB180 + #F8C48A + #F88568 + #7F5556 + #7F6A73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DDB180

Ginger · BurlyWood · Warm Sun

HEX

#DDB180

RGB

rgb(221, 177, 128)

HSL

hsl(32, 58%, 68%)

HSB

hsb(32, 42%, 87%)

CMYK

cmyk(0%, 20%, 42%, 13%)

Oklch

oklch(78.9% 0.082 69.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F8C48A

Goose Yellow · BurlyWood · Peach Orange

HEX

#F8C48A

RGB

rgb(248, 196, 138)

HSL

hsl(32, 89%, 76%)

HSB

hsb(32, 44%, 97%)

CMYK

cmyk(0%, 21%, 44%, 3%)

Oklch

oklch(85.4% 0.095 69.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F88568

Peach Pink · Salmon · Coral Red

HEX

#F88568

RGB

rgb(248, 133, 104)

HSL

hsl(12, 91%, 69%)

HSB

hsb(12, 58%, 97%)

CMYK

cmyk(0%, 46%, 58%, 3%)

Oklch

oklch(73.8% 0.147 35.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#7F5556

Crimson · DimGray · Passion Red

HEX

#7F5556

RGB

rgb(127, 85, 86)

HSL

hsl(359, 20%, 42%)

HSB

hsb(359, 33%, 50%)

CMYK

cmyk(0%, 33%, 32%, 50%)

Oklch

oklch(49.6% 0.056 17.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#7F6A73

Dark Violet · DimGray · Warm Gray

HEX

#7F6A73

RGB

rgb(127, 106, 115)

HSL

hsl(334, 9%, 46%)

HSB

hsb(334, 17%, 50%)

CMYK

cmyk(0%, 17%, 9%, 50%)

Oklch

oklch(54.7% 0.030 350.5)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDB180

7EAADD

Analogous

DD817E

DDB180

DADD7E

Triadic

DDB180

7EDDB1

B17EDD

Split-Comp.

DDB180

7EDADD

817EDD

Tetradic

DDB180

7EDD81

7EAADD

DD7EDA

Contrast Matrix WCAG 2.1 Contrast

DDB180	F8C48A	F88568	7F5556	7F6A73
—	1.2 Fail	1.2 Fail	3.2 AA Large	2.5 Fail
1.2 Fail	—	1.6 Fail	4.0 AA Large	3.1 AA Large
1.2 Fail	1.6 Fail	—	2.6 Fail	2.0 Fail
3.2 AA Large	4.0 AA Large	2.6 Fail	—	1.3 Fail
2.5 Fail	3.1 AA Large	2.0 Fail	1.3 Fail	—

White BG

2.0Fail

1.6Fail

2.5Fail

6.3AA

5.0AA

Black BG

10.7AAA

13.3AAA

8.5AAA

3.3AA Large

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA8C

E1E198

C6C56F

6D6C56

767671

Deuteranopia

CDD08F

E5E89B

CDD671

6F7256

777970

Tritanopia

DB9597

F5A3A6

F27576

7D5656

7E6F6F

Achromatopsia

B9B9B9

CDCDCD

A4A4A4

626262

717171

Shades & Tints Shades & Tints

#DDB180

Dark

Light

#F8C48A

Dark

Light

#F88568

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddb180;
  --color-2: #f8c48a;
  --color-3: #f88568;
  --color-4: #7f5556;
  --color-5: #7f6a73;
}

SCSS

$color-1: #ddb180;
$color-2: #f8c48a;
$color-3: #f88568;
$color-4: #7f5556;
$color-5: #7f6a73;

TAILWIND

colors: {
  'brand-1': '#ddb180',
  'brand-2': '#f8c48a',
  'brand-3': '#f88568',
  'brand-4': '#7f5556',
  'brand-5': '#7f6a73',
}

RGB Array

[221, 177, 128], [248, 196, 138], [248, 133, 104], [127, 85, 86], [127, 106, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDB180, #F8C48A, #F88568, #7F5556, #7F6A73 is ideal for: corporate websites, product showcases, portfolios. 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: #ddb180; --color-2: #f8c48a; --color-3: #f88568; --color-4: #7f5556; --color-5: #7f6a73. 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. 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