← Back to Editor

#D37714 · #F3DAAA · #0C7177 · #57786E · #85B4B8

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

#D37714

Ochre · Chocolate · Amber Brown

HEX
#D37714
RGB
rgb(211, 119, 20)
HSL
hsl(31, 83%, 45%)
HSB
hsb(31, 91%, 83%)
CMYK
cmyk(0%, 44%, 91%, 17%)
Oklch
oklch(65.8% 0.150 59.2)

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

#F3DAAA

Goose Yellow · Wheat · Peach Orange

HEX
#F3DAAA
RGB
rgb(243, 218, 170)
HSL
hsl(39, 75%, 81%)
HSB
hsb(39, 30%, 95%)
CMYK
cmyk(0%, 10%, 30%, 5%)
Oklch
oklch(89.7% 0.068 83.5)

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

#0C7177

Lake Blue · Teal · Mint Ice

HEX
#0C7177
RGB
rgb(12, 113, 119)
HSL
hsl(183, 82%, 26%)
HSB
hsb(183, 90%, 47%)
CMYK
cmyk(90%, 5%, 0%, 53%)
Oklch
oklch(50.0% 0.082 201.5)

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

#57786E

Mineral Blue · DimGray · Mint Ice

HEX
#57786E
RGB
rgb(87, 120, 110)
HSL
hsl(162, 16%, 41%)
HSB
hsb(162, 27%, 47%)
CMYK
cmyk(27%, 0%, 8%, 53%)
Oklch
oklch(54.4% 0.041 174.0)

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

#85B4B8

Sky Blue · DarkGray · Lake Green

HEX
#85B4B8
RGB
rgb(133, 180, 184)
HSL
hsl(185, 26%, 62%)
HSB
hsb(185, 28%, 72%)
CMYK
cmyk(28%, 2%, 0%, 28%)
Oklch
oklch(73.8% 0.050 202.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D37714
1470D2

Analogous

D21714
D37714
CFD214

Triadic

D37714
14D276
7614D2

Split-Comp.

D37714
14CFD2
1714D2

Tetradic

D37714
14D217
1470D2
D214CF

Contrast Matrix WCAG 2.1 Contrast

D37714
F3DAAA
0C7177
57786E
85B4B8
—
2.4
Fail
1.8
Fail
1.5
Fail
1.4
Fail
2.4
Fail
—
4.2
AA Large
3.6
AA Large
1.7
Fail
1.8
Fail
4.2
AA Large
—
1.2
Fail
2.5
Fail
1.5
Fail
3.6
AA Large
1.2
Fail
—
2.1
Fail
1.4
Fail
1.7
Fail
2.5
Fail
2.1
Fail
—
White BG
3.3AA Large
1.4Fail
5.8AA
4.9AA
2.3Fail
Black BG
6.4AA
15.4AAA
3.6AA Large
4.3AA Large
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA2C
E8E8B6
383976
656670
999AB7

Deuteranopia

B1B732
EAECB8
322A75
636171
9793B7

Tritanopia

CE3F43
F2BFC1
117474
597273
87B6B6

Achromatopsia

878787
DCDCDC
535353
6D6D6D
A6A6A6

Shades & Tints Shades & Tints

#D37714

Dark
Light

#F3DAAA

Dark
Light

#0C7177

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d37714;
  --color-2: #f3daaa;
  --color-3: #0c7177;
  --color-4: #57786e;
  --color-5: #85b4b8;
}

SCSS

$color-1: #d37714;
$color-2: #f3daaa;
$color-3: #0c7177;
$color-4: #57786e;
$color-5: #85b4b8;

TAILWIND

colors: {
  'brand-1': '#d37714',
  'brand-2': '#f3daaa',
  'brand-3': '#0c7177',
  'brand-4': '#57786e',
  'brand-5': '#85b4b8',
}

RGB Array

[211, 119, 20], [243, 218, 170], [12, 113, 119], [87, 120, 110], [133, 180, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D37714, #F3DAAA, #0C7177, #57786E, #85B4B8 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: #d37714; --color-2: #f3daaa; --color-3: #0c7177; --color-4: #57786e; --color-5: #85b4b8. 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