#D68F00 + #8CA170 + #72617A + #4C3B54 + #2D2430 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D68F00

Ochre · DarkGoldenRod · Honey Gold

HEX

#D68F00

RGB

rgb(214, 143, 0)

HSL

hsl(40, 100%, 42%)

HSB

hsb(40, 100%, 84%)

CMYK

cmyk(0%, 33%, 100%, 16%)

Oklch

oklch(70.4% 0.149 73.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8CA170

Grass Green · Gray · Olive Green

HEX

#8CA170

RGB

rgb(140, 161, 112)

HSL

hsl(86, 21%, 54%)

HSB

hsb(86, 30%, 63%)

CMYK

cmyk(13%, 0%, 30%, 37%)

Oklch

oklch(68.0% 0.073 127.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#72617A

Dark Plum · DimGray · Violet

HEX

#72617A

RGB

rgb(114, 97, 122)

HSL

hsl(281, 11%, 43%)

HSB

hsb(281, 20%, 48%)

CMYK

cmyk(7%, 20%, 0%, 52%)

Oklch

oklch(51.8% 0.044 314.9)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#4C3B54

Dark Plum · DarkSlateGray · Eggplant

HEX

#4C3B54

RGB

rgb(76, 59, 84)

HSL

hsl(281, 17%, 28%)

HSB

hsb(281, 30%, 33%)

CMYK

cmyk(10%, 30%, 0%, 67%)

Oklch

oklch(38.1% 0.047 314.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#2D2430

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2D2430

RGB

rgb(45, 36, 48)

HSL

hsl(285, 14%, 16%)

HSB

hsb(285, 25%, 19%)

CMYK

cmyk(6%, 25%, 0%, 81%)

Oklch

oklch(27.6% 0.025 317.6)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D68F00

0047D6

Analogous

D62400

D68F00

B3D600

Triadic

D68F00

00D68F

8F00D6

Split-Comp.

D68F00

00B3D6

2400D6

Tetradic

D68F00

00D624

0047D6

D600B2

Contrast Matrix WCAG 2.1 Contrast

D68F00	8CA170	72617A	4C3B54	2D2430
—	1.0 Fail	2.1 Fail	3.8 AA Large	5.5 AA
1.0 Fail	—	2.0 Fail	3.6 AA Large	5.3 AA
2.1 Fail	2.0 Fail	—	1.8 Fail	2.6 Fail
3.8 AA Large	3.6 AA Large	1.8 Fail	—	1.5 Fail
5.5 AA	5.3 AA	2.6 Fail	1.5 Fail	—

White BG

2.7Fail

2.8Fail

5.7AA

10.2AAA

14.9AAA

Black BG

7.8AAA

7.4AAA

3.7AA Large

2.1Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B723

95957C

6B6A74

45444E

29292D

Deuteranopia

BBC12B

94927F

6C6D72

46474D

2A2A2C

Tritanopia

D23E44

8D8587

716F6E

4B4948

2D2B2A

Achromatopsia

949494

959595

696969

434343

282828

Shades & Tints Shades & Tints

#D68F00

Dark

Light

#8CA170

Dark

Light

#72617A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d68f00;
  --color-2: #8ca170;
  --color-3: #72617a;
  --color-4: #4c3b54;
  --color-5: #2d2430;
}

SCSS

$color-1: #d68f00;
$color-2: #8ca170;
$color-3: #72617a;
$color-4: #4c3b54;
$color-5: #2d2430;

TAILWIND

colors: {
  'brand-1': '#d68f00',
  'brand-2': '#8ca170',
  'brand-3': '#72617a',
  'brand-4': '#4c3b54',
  'brand-5': '#2d2430',
}

RGB Array

[214, 143, 0], [140, 161, 112], [114, 97, 122], [76, 59, 84], [45, 36, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D68F00, #8CA170, #72617A, #4C3B54, #2D2430 is ideal for: tech websites, dark mode UIs, game UIs. 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: #d68f00; --color-2: #8ca170; --color-3: #72617a; --color-4: #4c3b54; --color-5: #2d2430. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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