#9DB392 + #ACC4A1 + #F5EEC4 + #FC9642 + #E87C23 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9DB392

Celadon · DarkSeaGreen · Apple Green

HEX

#9DB392

RGB

rgb(157, 179, 146)

HSL

hsl(100, 18%, 64%)

HSB

hsb(100, 18%, 70%)

CMYK

cmyk(12%, 0%, 18%, 30%)

Oklch

oklch(74.1% 0.052 135.2)

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

#ACC4A1

Celadon · DarkGray · Apple Green

HEX

#ACC4A1

RGB

rgb(172, 196, 161)

HSL

hsl(101, 23%, 70%)

HSB

hsb(101, 18%, 77%)

CMYK

cmyk(12%, 0%, 18%, 23%)

Oklch

oklch(79.3% 0.055 135.8)

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

#F5EEC4

Fresh Green · Bisque · Lemon Cream

HEX

#F5EEC4

RGB

rgb(245, 238, 196)

HSL

hsl(51, 71%, 86%)

HSB

hsb(51, 20%, 96%)

CMYK

cmyk(0%, 3%, 20%, 4%)

Oklch

oklch(94.4% 0.055 99.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FC9642

Apricot · Coral · Warm Sun

HEX

#FC9642

RGB

rgb(252, 150, 66)

HSL

hsl(27, 97%, 62%)

HSB

hsb(27, 74%, 99%)

CMYK

cmyk(0%, 40%, 74%, 1%)

Oklch

oklch(76.6% 0.155 56.6)

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

#E87C23

Tangerine · Chocolate · Warm Sun

HEX

#E87C23

RGB

rgb(232, 124, 35)

HSL

hsl(27, 81%, 52%)

HSB

hsb(27, 85%, 91%)

CMYK

cmyk(0%, 47%, 85%, 9%)

Oklch

oklch(69.5% 0.162 53.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DB392

A993B4

Analogous

AEB493

9DB392

93B498

Triadic

9DB392

939EB4

B4939E

Split-Comp.

9DB392

9893B4

B493AE

Tetradic

9DB392

93AEB4

A993B4

B49893

Contrast Matrix WCAG 2.1 Contrast

9DB392	ACC4A1	F5EEC4	FC9642	E87C23
—	1.2 Fail	1.9 Fail	1.0 Fail	1.3 Fail
1.2 Fail	—	1.6 Fail	1.2 Fail	1.5 Fail
1.9 Fail	1.6 Fail	—	1.9 Fail	2.4 Fail
1.0 Fail	1.2 Fail	1.9 Fail	—	1.3 Fail
1.3 Fail	1.5 Fail	2.4 Fail	1.3 Fail	—

White BG

2.3Fail

1.9Fail

1.2Fail

2.2Fail

2.9Fail

Black BG

9.3AAA

11.2AAA

17.9AAA

9.6AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A79A

B6B7A9

F2F2CE

D0CF56

B9B839

Deuteranopia

A5A49C

B5B3AC

F2F3D1

D6DD5B

C0C83E

Tritanopia

9EA0A2

ADB0B2

F5D6D8

F7666A

E34A4D

Achromatopsia

A9A9A9

B9B9B9

EBEBEB

ABABAB

929292

Shades & Tints Shades & Tints

#9DB392

Dark

Light

#ACC4A1

Dark

Light

#F5EEC4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9db392;
  --color-2: #acc4a1;
  --color-3: #f5eec4;
  --color-4: #fc9642;
  --color-5: #e87c23;
}

SCSS

$color-1: #9db392;
$color-2: #acc4a1;
$color-3: #f5eec4;
$color-4: #fc9642;
$color-5: #e87c23;

TAILWIND

colors: {
  'brand-1': '#9db392',
  'brand-2': '#acc4a1',
  'brand-3': '#f5eec4',
  'brand-4': '#fc9642',
  'brand-5': '#e87c23',
}

RGB Array

[157, 179, 146], [172, 196, 161], [245, 238, 196], [252, 150, 66], [232, 124, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DB392, #ACC4A1, #F5EEC4, #FC9642, #E87C23 is ideal for: health products, baby brands, fresh-style blogs. 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: #9db392; --color-2: #acc4a1; --color-3: #f5eec4; --color-4: #fc9642; --color-5: #e87c23. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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