#FFB345 + #4D6370 + #D0C7A0 + #A8C1A3 + #8ED3B7 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFB345

Ginger · SandyBrown · Warm Sun

HEX

#FFB345

RGB

rgb(255, 179, 69)

HSL

hsl(35, 100%, 64%)

HSB

hsb(35, 73%, 100%)

CMYK

cmyk(0%, 30%, 73%, 0%)

Oklch

oklch(82.1% 0.150 72.4)

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

#4D6370

Slate Blue · DimGray · Prussian Blue

HEX

#4D6370

RGB

rgb(77, 99, 112)

HSL

hsl(202, 19%, 37%)

HSB

hsb(202, 31%, 44%)

CMYK

cmyk(31%, 12%, 0%, 56%)

Oklch

oklch(48.7% 0.034 234.3)

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

#D0C7A0

Goose Yellow · Tan · Sunflower

HEX

#D0C7A0

RGB

rgb(208, 199, 160)

HSL

hsl(49, 34%, 72%)

HSB

hsb(49, 23%, 82%)

CMYK

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

Oklch

oklch(82.7% 0.053 96.5)

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

#A8C1A3

Celadon · DarkGray · Apple Green

HEX

#A8C1A3

RGB

rgb(168, 193, 163)

HSL

hsl(110, 19%, 70%)

HSB

hsb(110, 16%, 76%)

CMYK

cmyk(13%, 0%, 16%, 24%)

Oklch

oklch(78.4% 0.050 140.4)

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

#8ED3B7

Jade · MediumAquaMarine · Apple Green

HEX

#8ED3B7

RGB

rgb(142, 211, 183)

HSL

hsl(156, 44%, 69%)

HSB

hsb(156, 33%, 83%)

CMYK

cmyk(33%, 0%, 13%, 17%)

Oklch

oklch(81.3% 0.080 167.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB345

4794FF

Analogous

FF5747

FFB345

F0FF47

Triadic

FFB345

47FFB3

B247FF

Split-Comp.

FFB345

47F0FF

5747FF

Tetradic

FFB345

47FF57

4794FF

FF47F0

Contrast Matrix WCAG 2.1 Contrast

FFB345	4D6370	D0C7A0	A8C1A3	8ED3B7
—	3.5 AA Large	1.0 Fail	1.1 Fail	1.0 Fail
3.5 AA Large	—	3.7 AA Large	3.2 AA Large	3.6 AA Large
1.0 Fail	3.7 AA Large	—	1.1 Fail	1.0 Fail
1.1 Fail	3.2 AA Large	1.1 Fail	—	1.1 Fail
1.0 Fail	3.6 AA Large	1.0 Fail	1.1 Fail	—

White BG

1.8Fail

6.3AA

1.7Fail

1.9Fail

1.7Fail

Black BG

11.8AAA

3.3AA Large

12.4AAA

10.8AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDD60

57576D

CCCCA9

B3B3AA

ACACBE

Deuteranopia

E3E866

55546C

CDCDAC

B1B0AC

A8A3BF

Tritanopia

FB7579

4E6A6A

D0B1B3

A9B0B1

91C3C4

Achromatopsia

BDBDBD

5E5E5E

C5C5C5

B6B6B6

BBBBBB

Shades & Tints Shades & Tints

#FFB345

Dark

Light

#4D6370

Dark

Light

#D0C7A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb345;
  --color-2: #4d6370;
  --color-3: #d0c7a0;
  --color-4: #a8c1a3;
  --color-5: #8ed3b7;
}

SCSS

$color-1: #ffb345;
$color-2: #4d6370;
$color-3: #d0c7a0;
$color-4: #a8c1a3;
$color-5: #8ed3b7;

TAILWIND

colors: {
  'brand-1': '#ffb345',
  'brand-2': '#4d6370',
  'brand-3': '#d0c7a0',
  'brand-4': '#a8c1a3',
  'brand-5': '#8ed3b7',
}

RGB Array

[255, 179, 69], [77, 99, 112], [208, 199, 160], [168, 193, 163], [142, 211, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FFB345, #4D6370, #D0C7A0, #A8C1A3, #8ED3B7 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: #ffb345; --color-2: #4d6370; --color-3: #d0c7a0; --color-4: #a8c1a3; --color-5: #8ed3b7. 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 cool-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