#454476 + #757485 + #A09D86 + #C9C98B + #F2F47C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#454476

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#454476

RGB

rgb(69, 68, 118)

HSL

hsl(241, 27%, 36%)

HSB

hsb(241, 42%, 46%)

CMYK

cmyk(42%, 42%, 0%, 54%)

Oklch

oklch(41.2% 0.082 283.1)

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

#757485

Ink Gray · Gray · Warm Gray

HEX

#757485

RGB

rgb(117, 116, 133)

HSL

hsl(244, 7%, 49%)

HSB

hsb(244, 13%, 52%)

CMYK

cmyk(12%, 13%, 0%, 48%)

Oklch

oklch(56.6% 0.026 288.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A09D86

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A09D86

RGB

rgb(160, 157, 134)

HSL

hsl(53, 12%, 58%)

HSB

hsb(53, 16%, 63%)

CMYK

cmyk(0%, 2%, 16%, 37%)

Oklch

oklch(69.2% 0.033 101.1)

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

#C9C98B

Fresh Green · Tan · Sunflower

HEX

#C9C98B

RGB

rgb(201, 201, 139)

HSL

hsl(60, 36%, 67%)

HSB

hsb(60, 31%, 79%)

CMYK

cmyk(0%, 0%, 31%, 21%)

Oklch

oklch(82.1% 0.081 108.1)

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

#F2F47C

Fresh Green · Khaki · Sunflower

HEX

#F2F47C

RGB

rgb(242, 244, 124)

HSL

hsl(61, 85%, 72%)

HSB

hsb(61, 49%, 96%)

CMYK

cmyk(1%, 0%, 49%, 4%)

Oklch

oklch(94.2% 0.143 109.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

454476

747543

Analogous

435B75

454476

5D4375

Triadic

454476

754443

437544

Split-Comp.

454476

755D43

5B7543

Tetradic

454476

75435B

747543

43755D

Contrast Matrix WCAG 2.1 Contrast

454476	757485	A09D86	C9C98B	F2F47C
—	2.0 Fail	3.3 AA Large	5.2 AA	7.7 AAA
2.0 Fail	—	1.7 Fail	2.7 Fail	3.9 AA Large
3.3 AA Large	1.7 Fail	—	1.6 Fail	2.4 Fail
5.2 AA	2.7 Fail	1.6 Fail	—	1.5 Fail
7.7 AAA	3.9 AA Large	2.4 Fail	1.5 Fail	—

White BG

9.0AAA

4.6AA

2.7Fail

1.7Fail

1.2Fail

Black BG

2.3Fail

4.6AA

7.7AAA

12.2AAA

18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

45456A

757581

9F9F8C

C9C99A

F3F399

Deuteranopia

454567

757580

9F9F8D

C9C99E

F3F3A0

Tritanopia

45605E

757E7D

A09091

C9A6A8

F2B0B5

Achromatopsia

4A4A4A

767676

9B9B9B

C2C2C2

E6E6E6

Shades & Tints Shades & Tints

#454476

Dark

Light

#757485

Dark

Light

#A09D86

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #454476;
  --color-2: #757485;
  --color-3: #a09d86;
  --color-4: #c9c98b;
  --color-5: #f2f47c;
}

SCSS

$color-1: #454476;
$color-2: #757485;
$color-3: #a09d86;
$color-4: #c9c98b;
$color-5: #f2f47c;

TAILWIND

colors: {
  'brand-1': '#454476',
  'brand-2': '#757485',
  'brand-3': '#a09d86',
  'brand-4': '#c9c98b',
  'brand-5': '#f2f47c',
}

RGB Array

[69, 68, 118], [117, 116, 133], [160, 157, 134], [201, 201, 139], [242, 244, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #454476, #757485, #A09D86, #C9C98B, #F2F47C 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: #454476; --color-2: #757485; --color-3: #a09d86; --color-4: #c9c98b; --color-5: #f2f47c. 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 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