← Back to Editor

#3D896B · #F9F9BB · #DA5E20 · #9B792F · #D1D655

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3D896B

Mineral Blue · SeaGreen · Forest Green

HEX
#3D896B
RGB
rgb(61, 137, 107)
HSL
hsl(156, 38%, 39%)
HSB
hsb(156, 55%, 54%)
CMYK
cmyk(55%, 0%, 22%, 46%)
Oklch
oklch(57.3% 0.089 164.9)

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

#F9F9BB

Fresh Green · Bisque · Lemon Cream

HEX
#F9F9BB
RGB
rgb(249, 249, 187)
HSL
hsl(60, 84%, 85%)
HSB
hsb(60, 25%, 98%)
CMYK
cmyk(0%, 0%, 25%, 2%)
Oklch
oklch(96.7% 0.079 107.8)

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

#DA5E20

Tangerine · Chocolate · Amber Brown

HEX
#DA5E20
RGB
rgb(218, 94, 32)
HSL
hsl(20, 74%, 49%)
HSB
hsb(20, 85%, 85%)
CMYK
cmyk(0%, 57%, 85%, 15%)
Oklch
oklch(63.0% 0.171 43.1)

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

#9B792F

Ochre · Sienna · Honey Gold

HEX
#9B792F
RGB
rgb(155, 121, 47)
HSL
hsl(41, 53%, 40%)
HSB
hsb(41, 70%, 61%)
CMYK
cmyk(0%, 22%, 70%, 39%)
Oklch
oklch(59.5% 0.100 83.8)

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

#D1D655

Autumn Sage · BurlyWood · Sunflower

HEX
#D1D655
RGB
rgb(209, 214, 85)
HSL
hsl(62, 61%, 59%)
HSB
hsb(62, 60%, 84%)
CMYK
cmyk(2%, 0%, 60%, 16%)
Oklch
oklch(84.8% 0.150 111.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D896B
893E5C

Analogous

3E8945
3D896B
3E8289

Triadic

3D896B
6B3E89
896B3E

Split-Comp.

3D896B
893E82
89453E

Tetradic

3D896B
453E89
893E5C
82893E

Contrast Matrix WCAG 2.1 Contrast

3D896B
F9F9BB
DA5E20
9B792F
D1D655
—
3.9
AA Large
1.1
Fail
1.0
Fail
2.7
Fail
3.9
AA Large
—
3.4
AA Large
3.7
AA Large
1.4
Fail
1.1
Fail
3.4
AA Large
—
1.1
Fail
2.4
Fail
1.0
Fail
3.7
AA Large
1.1
Fail
—
2.6
Fail
2.7
Fail
1.4
Fail
2.4
Fail
2.6
Fail
—
White BG
4.2AA Large
1.1Fail
3.7AA Large
4.1AA Large
1.6Fail
Black BG
5.0AA
19.3AAA
5.6AA
5.2AA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5F72
F9F9CA
A4A32F
8C8C41
D3D374

Deuteranopia

5A5474
F9F9CE
ACB533
8E9145
D3D37C

Tritanopia

417879
F9D6D8
D43B3D
994F52
D18D92

Achromatopsia

6F6F6F
F2F2F2
7C7C7C
7B7B7B
C6C6C6

Shades & Tints Shades & Tints

#3D896B

Dark
Light

#F9F9BB

Dark
Light

#DA5E20

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d896b;
  --color-2: #f9f9bb;
  --color-3: #da5e20;
  --color-4: #9b792f;
  --color-5: #d1d655;
}

SCSS

$color-1: #3d896b;
$color-2: #f9f9bb;
$color-3: #da5e20;
$color-4: #9b792f;
$color-5: #d1d655;

TAILWIND

colors: {
  'brand-1': '#3d896b',
  'brand-2': '#f9f9bb',
  'brand-3': '#da5e20',
  'brand-4': '#9b792f',
  'brand-5': '#d1d655',
}

RGB Array

[61, 137, 107], [249, 249, 187], [218, 94, 32], [155, 121, 47], [209, 214, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D896B, #F9F9BB, #DA5E20, #9B792F, #D1D655 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #3d896b; --color-2: #f9f9bb; --color-3: #da5e20; --color-4: #9b792f; --color-5: #d1d655. 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 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