#D8C290 + #FFA55A + #D7384C + #69AC8B + #B3D3A1 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D8C290

Goose Yellow · BurlyWood · Sunflower

HEX

#D8C290

RGB

rgb(216, 194, 144)

HSL

hsl(42, 48%, 71%)

HSB

hsb(42, 33%, 85%)

CMYK

cmyk(0%, 10%, 33%, 15%)

Oklch

oklch(82.1% 0.070 87.0)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FFA55A

Apricot · SandyBrown · Warm Sun

HEX

#FFA55A

RGB

rgb(255, 165, 90)

HSL

hsl(27, 100%, 68%)

HSB

hsb(27, 65%, 100%)

CMYK

cmyk(0%, 35%, 65%, 0%)

Oklch

oklch(79.8% 0.140 58.6)

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

#D7384C

Vermilion · Crimson · Passion Red

HEX

#D7384C

RGB

rgb(215, 56, 76)

HSL

hsl(352, 67%, 53%)

HSB

hsb(352, 74%, 84%)

CMYK

cmyk(0%, 74%, 65%, 16%)

Oklch

oklch(58.7% 0.194 19.0)

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

#69AC8B

Mineral Blue · CadetBlue · Olive Green

HEX

#69AC8B

RGB

rgb(105, 172, 139)

HSL

hsl(150, 29%, 54%)

HSB

hsb(150, 39%, 67%)

CMYK

cmyk(39%, 0%, 19%, 33%)

Oklch

oklch(69.0% 0.085 161.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B3D3A1

Celadon · Silver · Apple Green

HEX

#B3D3A1

RGB

rgb(179, 211, 161)

HSL

hsl(98, 36%, 73%)

HSB

hsb(98, 24%, 83%)

CMYK

cmyk(15%, 0%, 24%, 17%)

Oklch

oklch(83.0% 0.076 134.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8C290

92A7D9

Analogous

D9A092

D8C290

CAD992

Triadic

D8C290

92D9C3

C392D9

Split-Comp.

D8C290

92CAD9

A092D9

Tetradic

D8C290

92D9A0

92A7D9

D992CA

Contrast Matrix WCAG 2.1 Contrast

D8C290	FFA55A	D7384C	69AC8B	B3D3A1
—	1.1 Fail	2.6 Fail	1.5 Fail	1.1 Fail
1.1 Fail	—	2.4 Fail	1.4 Fail	1.2 Fail
2.6 Fail	2.4 Fail	—	1.7 Fail	2.8 Fail
1.5 Fail	1.4 Fail	1.7 Fail	—	1.6 Fail
1.1 Fail	1.2 Fail	2.8 Fail	1.6 Fail	—

White BG

1.7Fail

1.9Fail

4.6AA

2.7Fail

1.6Fail

Black BG

12.0AAA

10.8AAA

4.6AA

7.9AAA

12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE9C

D8D76C

929147

868793

C1C1AD

Deuteranopia

D0D19F

DDE471

9BA746

827D95

BFBDB0

Tritanopia

D7A6A8

FB7A7E

CF4343

6C999B

B5B7B9

Achromatopsia

C3C3C3

B7B7B7

6A6A6A

949494

C4C4C4

Shades & Tints Shades & Tints

#D8C290

Dark

Light

#FFA55A

Dark

Light

#D7384C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8c290;
  --color-2: #ffa55a;
  --color-3: #d7384c;
  --color-4: #69ac8b;
  --color-5: #b3d3a1;
}

SCSS

$color-1: #d8c290;
$color-2: #ffa55a;
$color-3: #d7384c;
$color-4: #69ac8b;
$color-5: #b3d3a1;

TAILWIND

colors: {
  'brand-1': '#d8c290',
  'brand-2': '#ffa55a',
  'brand-3': '#d7384c',
  'brand-4': '#69ac8b',
  'brand-5': '#b3d3a1',
}

RGB Array

[216, 194, 144], [255, 165, 90], [215, 56, 76], [105, 172, 139], [179, 211, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D8C290, #FFA55A, #D7384C, #69AC8B, #B3D3A1 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: #d8c290; --color-2: #ffa55a; --color-3: #d7384c; --color-4: #69ac8b; --color-5: #b3d3a1. 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 dark-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