#FFBB6E + #C5BD88 + #8CC0A3 + #52C2BD + #4F5185 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFBB6E

Goose Yellow · SandyBrown · Warm Sun

HEX

#FFBB6E

RGB

rgb(255, 187, 110)

HSL

hsl(32, 100%, 72%)

HSB

hsb(32, 57%, 100%)

CMYK

cmyk(0%, 27%, 57%, 0%)

Oklch

oklch(84.0% 0.123 68.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C5BD88

Fresh Green · Tan · Sunflower

HEX

#C5BD88

RGB

rgb(197, 189, 136)

HSL

hsl(52, 34%, 65%)

HSB

hsb(52, 31%, 77%)

CMYK

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

Oklch

oklch(79.2% 0.071 100.6)

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

#8CC0A3

Celadon · DarkSeaGreen · Apple Green

HEX

#8CC0A3

RGB

rgb(140, 192, 163)

HSL

hsl(147, 29%, 65%)

HSB

hsb(147, 27%, 75%)

CMYK

cmyk(27%, 0%, 15%, 25%)

Oklch

oklch(76.3% 0.069 159.8)

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

#52C2BD

Mineral Blue · MediumTurquoise · Lake Green

HEX

#52C2BD

RGB

rgb(82, 194, 189)

HSL

hsl(177, 48%, 54%)

HSB

hsb(177, 58%, 76%)

CMYK

cmyk(58%, 0%, 3%, 24%)

Oklch

oklch(74.9% 0.102 191.2)

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

#4F5185

Indigo · DarkSlateBlue · Navy Blue

HEX

#4F5185

RGB

rgb(79, 81, 133)

HSL

hsl(238, 25%, 42%)

HSB

hsb(238, 41%, 52%)

CMYK

cmyk(41%, 39%, 0%, 48%)

Oklch

oklch(45.7% 0.084 280.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBB6E

70B3FF

Analogous

FF7570

FFBB6E

FAFF70

Triadic

FFBB6E

70FFBC

BC70FF

Split-Comp.

FFBB6E

70FAFF

7570FF

Tetradic

FFBB6E

70FF75

70B3FF

FF70FA

Contrast Matrix WCAG 2.1 Contrast

FFBB6E	C5BD88	8CC0A3	52C2BD	4F5185
—	1.1 Fail	1.2 Fail	1.3 Fail	4.4 AA Large
1.1 Fail	—	1.1 Fail	1.1 Fail	3.9 AA Large
1.2 Fail	1.1 Fail	—	1.0 Fail	3.6 AA Large
1.3 Fail	1.1 Fail	1.0 Fail	—	3.4 AA Large
4.4 AA Large	3.9 AA Large	3.6 AA Large	3.4 AA Large	—

White BG

1.7Fail

1.9Fail

2.1Fail

7.4AAA

Black BG

12.6AAA

11.0AAA

10.2AAA

9.8AAA

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E181

C2C195

A3A3AA

8284BE

505078

Deuteranopia

E6EB85

C2C398

A09CAC

7C74BE

505075

Tritanopia

FC8F93

C59FA1

8FB0B1

58BFBF

4F6E6C

Achromatopsia

C7C7C7

B9B9B9

ADADAD

A0A0A0

565656

Shades & Tints Shades & Tints

#FFBB6E

Dark

Light

#C5BD88

Dark

Light

#8CC0A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbb6e;
  --color-2: #c5bd88;
  --color-3: #8cc0a3;
  --color-4: #52c2bd;
  --color-5: #4f5185;
}

SCSS

$color-1: #ffbb6e;
$color-2: #c5bd88;
$color-3: #8cc0a3;
$color-4: #52c2bd;
$color-5: #4f5185;

TAILWIND

colors: {
  'brand-1': '#ffbb6e',
  'brand-2': '#c5bd88',
  'brand-3': '#8cc0a3',
  'brand-4': '#52c2bd',
  'brand-5': '#4f5185',
}

RGB Array

[255, 187, 110], [197, 189, 136], [140, 192, 163], [82, 194, 189], [79, 81, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBB6E, #C5BD88, #8CC0A3, #52C2BD, #4F5185 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: #ffbb6e; --color-2: #c5bd88; --color-3: #8cc0a3; --color-4: #52c2bd; --color-5: #4f5185. 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