← Back to Editor

#DDB94B · #DF863F · #E15333 · #AA694F · #737F6B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DDB94B

Ginger · SandyBrown · Sunflower

HEX
#DDB94B
RGB
rgb(221, 185, 75)
HSL
hsl(45, 68%, 58%)
HSB
hsb(45, 66%, 87%)
CMYK
cmyk(0%, 16%, 66%, 13%)
Oklch
oklch(79.7% 0.133 90.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DF863F

Tangerine · Coral · Warm Sun

HEX
#DF863F
RGB
rgb(223, 134, 63)
HSL
hsl(27, 71%, 56%)
HSB
hsb(27, 72%, 87%)
CMYK
cmyk(0%, 40%, 72%, 13%)
Oklch
oklch(70.2% 0.138 56.3)

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

#E15333

Vermilion · Chocolate · Passion Red

HEX
#E15333
RGB
rgb(225, 83, 51)
HSL
hsl(11, 74%, 54%)
HSB
hsb(11, 77%, 88%)
CMYK
cmyk(0%, 63%, 77%, 12%)
Oklch
oklch(62.8% 0.183 34.2)

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

#AA694F

Tangerine · Sienna · Amber Brown

HEX
#AA694F
RGB
rgb(170, 105, 79)
HSL
hsl(17, 37%, 49%)
HSB
hsb(17, 54%, 67%)
CMYK
cmyk(0%, 38%, 54%, 33%)
Oklch
oklch(58.6% 0.092 42.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#737F6B

Celadon · DimGray · Warm Gray

HEX
#737F6B
RGB
rgb(115, 127, 107)
HSL
hsl(96, 9%, 46%)
HSB
hsb(96, 16%, 50%)
CMYK
cmyk(9%, 0%, 16%, 50%)
Oklch
oklch(58.1% 0.033 132.8)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDB94B
4B6FDD

Analogous

DD6F4B
DDB94B
B8DD4B

Triadic

DDB94B
4BDDB8
B84BDD

Split-Comp.

DDB94B
4BB8DD
6F4BDD

Tetradic

DDB94B
4BDD6F
4B6FDD
DD4BB8

Contrast Matrix WCAG 2.1 Contrast

DDB94B
DF863F
E15333
AA694F
737F6B
—
1.5
Fail
2.0
Fail
2.3
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
1.5
Fail
2.0
Fail
1.4
Fail
—
1.1
Fail
1.1
Fail
2.3
Fail
1.6
Fail
1.1
Fail
—
1.0
Fail
2.2
Fail
1.5
Fail
1.1
Fail
1.0
Fail
—
White BG
1.9Fail
2.8Fail
3.8AA Large
4.3AA Large
4.2AA Large
Black BG
11.1AAA
7.6AAA
5.5AA
4.8AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCD66
B8B850
A4A23B
8E8D55
787870

Deuteranopia

D0D26C
BEC454
ACB63D
929757
787771

Tritanopia

DB7B7F
DB5E61
DA4142
A75A5B
747475

Achromatopsia

B7B7B7
999999
7A7A7A
797979
797979

Shades & Tints Shades & Tints

#DDB94B

Dark
Light

#DF863F

Dark
Light

#E15333

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddb94b;
  --color-2: #df863f;
  --color-3: #e15333;
  --color-4: #aa694f;
  --color-5: #737f6b;
}

SCSS

$color-1: #ddb94b;
$color-2: #df863f;
$color-3: #e15333;
$color-4: #aa694f;
$color-5: #737f6b;

TAILWIND

colors: {
  'brand-1': '#ddb94b',
  'brand-2': '#df863f',
  'brand-3': '#e15333',
  'brand-4': '#aa694f',
  'brand-5': '#737f6b',
}

RGB Array

[221, 185, 75], [223, 134, 63], [225, 83, 51], [170, 105, 79], [115, 127, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDB94B, #DF863F, #E15333, #AA694F, #737F6B 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: #ddb94b; --color-2: #df863f; --color-3: #e15333; --color-4: #aa694f; --color-5: #737f6b. 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