← Back to Editor

#9DC69E · #F3DFA2 · #F7D536 · #E47B39 · #FA8A38

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9DC69E

Celadon · DarkSeaGreen · Apple Green

HEX
#9DC69E
RGB
rgb(157, 198, 158)
HSL
hsl(121, 26%, 70%)
HSB
hsb(121, 21%, 78%)
CMYK
cmyk(21%, 0%, 20%, 22%)
Oklch
oklch(78.6% 0.071 145.5)

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

#F3DFA2

Goose Yellow · Wheat · Lemon Cream

HEX
#F3DFA2
RGB
rgb(243, 223, 162)
HSL
hsl(45, 77%, 79%)
HSB
hsb(45, 33%, 95%)
CMYK
cmyk(0%, 8%, 33%, 5%)
Oklch
oklch(90.6% 0.081 92.1)

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

#F7D536

Ginger · Gold · Sunflower

HEX
#F7D536
RGB
rgb(247, 213, 54)
HSL
hsl(49, 92%, 59%)
HSB
hsb(49, 78%, 97%)
CMYK
cmyk(0%, 14%, 78%, 3%)
Oklch
oklch(87.7% 0.167 96.2)

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

#E47B39

Tangerine · Coral · Warm Sun

HEX
#E47B39
RGB
rgb(228, 123, 57)
HSL
hsl(23, 76%, 56%)
HSB
hsb(23, 75%, 89%)
CMYK
cmyk(0%, 46%, 75%, 11%)
Oklch
oklch(69.0% 0.152 49.8)

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

#FA8A38

Tangerine · Coral · Warm Sun

HEX
#FA8A38
RGB
rgb(250, 138, 56)
HSL
hsl(25, 95%, 60%)
HSB
hsb(25, 78%, 98%)
CMYK
cmyk(0%, 45%, 78%, 2%)
Oklch
oklch(74.3% 0.164 52.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DC69E
C69FC6

Analogous

B2C69F
9DC69E
9FC6B3

Triadic

9DC69E
9F9FC6
C69F9F

Split-Comp.

9DC69E
B39FC6
C69FB2

Tetradic

9DC69E
9FB2C6
C69FC6
C6B39F

Contrast Matrix WCAG 2.1 Contrast

9DC69E
F3DFA2
F7D536
E47B39
FA8A38
—
1.4
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.4
Fail
—
1.1
Fail
2.2
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
2.0
Fail
1.7
Fail
1.5
Fail
2.2
Fail
2.0
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.7
Fail
1.2
Fail
—
White BG
1.9Fail
1.3Fail
1.4Fail
2.9Fail
2.4Fail
Black BG
11.0AAA
15.9AAA
14.5AAA
7.2AAA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFA8
EAEAB1
E8E85C
B7B649
CAC84C

Deuteranopia

ACA9AA
ECEDB4
EAED66
BDC54D
D0D851

Tritanopia

9FAFB1
F2BCBF
F57B82
DF5658
F45C5F

Achromatopsia

B5B5B5
DEDEDE
CDCDCD
939393
A2A2A2

Shades & Tints Shades & Tints

#9DC69E

Dark
Light

#F3DFA2

Dark
Light

#F7D536

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dc69e;
  --color-2: #f3dfa2;
  --color-3: #f7d536;
  --color-4: #e47b39;
  --color-5: #fa8a38;
}

SCSS

$color-1: #9dc69e;
$color-2: #f3dfa2;
$color-3: #f7d536;
$color-4: #e47b39;
$color-5: #fa8a38;

TAILWIND

colors: {
  'brand-1': '#9dc69e',
  'brand-2': '#f3dfa2',
  'brand-3': '#f7d536',
  'brand-4': '#e47b39',
  'brand-5': '#fa8a38',
}

RGB Array

[157, 198, 158], [243, 223, 162], [247, 213, 54], [228, 123, 57], [250, 138, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DC69E, #F3DFA2, #F7D536, #E47B39, #FA8A38 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9dc69e; --color-2: #f3dfa2; --color-3: #f7d536; --color-4: #e47b39; --color-5: #fa8a38. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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