← Back to Editor

#F2DA6D · #ACB854 · #6A9463 · #3B696B · #2C394D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F2DA6D

Ginger · Khaki · Sunflower

HEX
#F2DA6D
RGB
rgb(242, 218, 109)
HSL
hsl(49, 84%, 69%)
HSB
hsb(49, 55%, 95%)
CMYK
cmyk(0%, 10%, 55%, 5%)
Oklch
oklch(88.7% 0.132 97.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#ACB854

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACB854
RGB
rgb(172, 184, 84)
HSL
hsl(67, 41%, 53%)
HSB
hsb(67, 54%, 72%)
CMYK
cmyk(7%, 0%, 54%, 28%)
Oklch
oklch(75.2% 0.126 115.2)

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

#6A9463

Celadon · Gray · Olive Green

HEX
#6A9463
RGB
rgb(106, 148, 99)
HSL
hsl(111, 20%, 48%)
HSB
hsb(111, 33%, 58%)
CMYK
cmyk(28%, 0%, 33%, 42%)
Oklch
oklch(62.3% 0.085 141.0)

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

#3B696B

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3B696B
RGB
rgb(59, 105, 107)
HSL
hsl(183, 29%, 33%)
HSB
hsb(183, 45%, 42%)
CMYK
cmyk(45%, 2%, 0%, 58%)
Oklch
oklch(48.9% 0.051 199.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#2C394D

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C394D
RGB
rgb(44, 57, 77)
HSL
hsl(216, 27%, 24%)
HSB
hsb(216, 43%, 30%)
CMYK
cmyk(43%, 26%, 0%, 70%)
Oklch
oklch(34.2% 0.039 258.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DA6D
6E86F2

Analogous

F2986E
F2DA6D
C8F26E

Triadic

F2DA6D
6EF2DA
DA6EF2

Split-Comp.

F2DA6D
6EC8F2
986EF2

Tetradic

F2DA6D
6EF298
6E86F2
F26EC8

Contrast Matrix WCAG 2.1 Contrast

F2DA6D
ACB854
6A9463
3B696B
2C394D
—
1.5
Fail
2.5
Fail
4.4
AA Large
8.3
AAA
1.5
Fail
—
1.6
Fail
2.8
Fail
5.4
AA
2.5
Fail
1.6
Fail
—
1.8
Fail
3.4
AA Large
4.4
AA Large
2.8
Fail
1.8
Fail
—
1.9
Fail
8.3
AAA
5.4
AA
3.4
AA Large
1.9
Fail
—
White BG
1.4Fail
2.2Fail
3.5AA Large
6.1AA
11.7AAA
Black BG
15.0AAA
9.7AAA
6.0AA
3.4AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E787
B1B16C
7C7D6F
4F4F6B
323248

Deuteranopia

E9EB8E
B1B072
7A7772
4C496A
313047

Tritanopia

F19CA1
AD7F84
6C787A
3D6A6A
2D4444

Achromatopsia

D5D5D5
A9A9A9
828282
5B5B5B
373737

Shades & Tints Shades & Tints

#F2DA6D

Dark
Light

#ACB854

Dark
Light

#6A9463

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2da6d;
  --color-2: #acb854;
  --color-3: #6a9463;
  --color-4: #3b696b;
  --color-5: #2c394d;
}

SCSS

$color-1: #f2da6d;
$color-2: #acb854;
$color-3: #6a9463;
$color-4: #3b696b;
$color-5: #2c394d;

TAILWIND

colors: {
  'brand-1': '#f2da6d',
  'brand-2': '#acb854',
  'brand-3': '#6a9463',
  'brand-4': '#3b696b',
  'brand-5': '#2c394d',
}

RGB Array

[242, 218, 109], [172, 184, 84], [106, 148, 99], [59, 105, 107], [44, 57, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DA6D, #ACB854, #6A9463, #3B696B, #2C394D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f2da6d; --color-2: #acb854; --color-3: #6a9463; --color-4: #3b696b; --color-5: #2c394d. 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 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